角度材质 - 如何在md工具栏中将元素定位到右侧

Question

我在工具栏中使用了FAB快速拨号。但是我无法将它浮动到工具栏的右侧。我试过风格：“float：right”没有运气。也尝试过flex offset =“55”，但是当窗口被调整大小时这不起作用。实质上，无论窗口大小如何，我都希望坐在蓝色工具栏容器内最右侧的按钮。任何帮助，将不胜感激。见照片和代码如下：

<md-toolbar layout-fill layout-padding layout="row" style="background-color: #3F51B5;color:white;text-align:text-center;"> 
    <div layout="row"> 
     <i class="fa fa-users fa-2x" flex></i> 
     <h1 class="md-title" style="color:white">Org Chart</h1>         
    </div> 
    <div class="lock-size" flex offset="55"> 
     <md-fab-speed-dial md-direction="left" ng-class="md-fling"> 
      <md-fab-trigger> 
       <md-button aria-label="menu" class="md-fab md-accent"> 
        <md-tooltip> 
         Actions 
        </md-tooltip> 
        <md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon> 
       </md-button> 
      </md-fab-trigger> 
      <md-fab-actions> 
       <md-button aria-label="view" class="md-fab md-raised md-mini" > 
        <md-tooltip> 
         View Chart 
        </md-tooltip>        
        <md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon> 
       </md-button> 
       <md-button aria-label="add" class="md-fab md-raised md-mini" > 
        <md-tooltip> 
         Add Chart 
        </md-tooltip>        
        <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon> 
       </md-button> 
       <md-button aria-label="Settings" class="md-fab md-raised md-mini" > 
        <md-tooltip> 
         Security Access 
        </md-tooltip>        
        <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.permission" ng-click="paneShowFn('permission')"></md-icon> 
       </md-button>         
       <md-button aria-label="edit" class="md-fab md-raised md-mini" style="color:black" ng-show="cDP.update" ng-click="paneShowFn('update')"> 
        <md-tooltip> 
         Edit Chart 
        </md-tooltip>        
        <md-icon md-svg-src="img/icons/ic_edit_48px.svg" style="color:black"></md-icon> 
       </md-button>         
      </md-fab-actions> 
     </md-fab-speed-dial> 
    </div> 
</md-toolbar> 

Answer 1

该解决方案是角形材料1.x版，如果你需要一个通用/角材料V2解决方案检查@experimenter ANSWER

如果您有一个md-toolbar对齐正确的内容最简单的方法是这样的：

<md-toolbar> 
     <div class="md-toolbar-tools"> 
      <h3>You text</h3> 
      <span flex></span> 
      <ANY>your right content</ANY> 
     </div> 
    </md-toolbar> 

span中的flex属性将覆盖内容之间的空间。这是文档中的官方方式。

在你例子中，你只需要：

<md-toolbar> 
    <div class="md-toolbar-tools"> 
     <div layout="row"> 
      <i class="fa fa-users fa-2x" flex></i> 
      <h1 class="md-title" style="color:white">Org Chart</h1> 
     </div> 
     <span flex></span> 
     <md-fab-speed-dial md-direction="left" ng-class="md-fling"> 
      <md-fab-trigger> 
       <md-button aria-label="menu" class="md-fab md-accent"> 
        <md-tooltip> 
         Actions 
        </md-tooltip> 
        <md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon> 
       </md-button> 
      </md-fab-trigger> 
      <md-fab-actions> 
       <md-button aria-label="view" class="md-fab md-raised md-mini"> 
        <md-tooltip> 
         View Chart 
        </md-tooltip> 
        <md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon> 
       </md-button> 
       <md-button aria-label="add" class="md-fab md-raised md-mini"> 
        <md-tooltip> 
         Add Chart 
        </md-tooltip> 
        <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon> 
       </md-button> 
       <md-button aria-label="Settings" class="md-fab md-raised md-mini"> 
        <md-tooltip> 
         Security Access 
        </md-tooltip> 
        <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.permission" ng-click="paneShowFn('permission')"></md-icon> 
       </md-button> 
       <md-button aria-label="edit" class="md-fab md-raised md-mini" style="color:black" ng-show="cDP.update" ng-click="paneShowFn('update')"> 
        <md-tooltip> 
         Edit Chart 
        </md-tooltip> 
        <md-icon md-svg-src="img/icons/ic_edit_48px.svg" style="color:black"></md-icon> 
       </md-button> 
      </md-fab-actions> 
     </md-fab-speed-dial> 
    </div> 
</md-toolbar> 

Answer 2

或者你可以使用一个类为：

.fill-space { 
 
    // This fills the remaining space, by using flexbox. 
 
    // Every toolbar row uses a flexbox row layout. 
 
    flex: 1 1 auto; 
 
}

<md-toolbar color="primary"> 
 
    <span>Application Title</span> 
 

 
    <!-- This fills the remaining space of the current row --> 
 
    <span class="fill-space"></span> 
 

 
    <span>Right Aligned Text</span> 
 
</md-toolbar>

该解决方案还从规范服用。