Eckiges Material - So positionieren Sie Elemente in der md-Symbolleiste nach rechts

Question

Ich verwende FAB-Kurzwahl in einer Symbolleiste. Ich kann es jedoch nicht auf der rechten Seite der Symbolleiste schweben lassen. Ich habe Stil versucht: "float: right" ohne Glück. Auch versucht flex offset = "55", aber das funktioniert nicht, wenn das Fenster in der Größe geändert wird. Im Grunde, egal wie groß die Fenstergröße ist, würde ich gerne den Knopf ganz rechts im blauen Werkzeugleisten-Container haben. Jede Hilfe wird sehr geschätzt. Siehe Foto und Code unten:

<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

Diese Lösung ist WINKEL MATERIAL v1.x, WENN SIE BRAUCHEN EIN UNIVERSAL/WINKEL MATERIAL PRÜFEN v2 SOLUTION ANTWORT @experimenter

Wenn Sie haben Sie eine md-toolbar der einfachste Weg, um richtigen Inhalt auszurichten ist wie folgt:

Die flex Eigenschaft in span wird den Raum zwischen den Inhalten abdecken. Dies ist der offizielle Weg in der Dokumentation.

In Ihrem Beispiel, brauchen Sie nur:

<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

Oder Sie eine Klasse für das verwenden können:

.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>

Diese Lösung genommen wird auch von einem spec.