角度材質 - 如何在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>

該解決方案還從規範服用。