Açısal Malzeme - Öğeleri md araç çubuğunda sağa nasıl konumlandırma

Question

Araç çubuğunda FAB hızlı arama özelliğini kullanıyorum. Bununla birlikte, araç çubuğunun sağında kayan yapamıyorum. Stil denedim: şanssız "şamandıra: sağ". Ayrıca esnek ofset = "55" denedi, ancak pencere yeniden boyutlandırıldığında bu çalışmaz. Aslında, pencere boyutu ne olursa olsun, mavi araç çubuğu kabı içinde en sağda oturan düğmeyi istiyorum. Bu konuda herhangi bir yardım çok takdir edilecektir. Aşağıdaki fotoğraf ve kod Bkz:

<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

BU ÇÖZÜM, KÖŞELİ MALZEME v1.x için IS SİZE

CEVAP @experimenter BİR EVRENSEL/AÇISAL MALZEME v2 ÇÖZÜM KONTROL ETMEK Eğer bir md-toolbar doğru içeriği hizalamak için en kolay yol var şu şekildedir:

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

span numaralı flex özelliğindeki içerik, içerik arasındaki boşluğu kapsayacaktır. Bu belgeleme resmi yoludur.

<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

Yoksa bunun için bir sınıf kullanabilirsiniz:: size örnekte

, sadece ihtiyaç

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

Bu çözüm aynı zamanda bir spec alınır.