कोणीय सामग्री - एमडी-टूलबार में दाईं ओर तत्वों को कैसे स्थानांतरित करें

Question

मैं एक टूलबार के भीतर एफएबी स्पीड डायल का उपयोग कर रहा हूं। हालांकि मैं टूलबार के दाईं ओर तैरने में असमर्थ हूं। मैंने शैली की कोशिश की है: "फ्लोट: दाएं" बिना किस्मत के। फ्लेक्स ऑफसेट = "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

इस समाधान, कोणीय सामग्री v1.x के लिए है, तो आप एक सार्वभौमिक/कोणीय सामग्री v2 समाधान जांच की जरूरत है @experimenter उत्तर

आप तो md-toolbar सही सामग्री को संरेखित करने का सबसे आसान तरीका इस प्रकार है:

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

flexspan में संपत्ति सामग्री के बीच की जगह को कवर करेगी। दस्तावेज़ीकरण में यह आधिकारिक तरीका है।

आप उदाहरण में, आप बस की जरूरत है:

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

यह समाधान भी एक कल्पना से लिया जाता है।