Angular2 Material Design Toolbar

Question

Ich versuche eine Symbolleiste in Material und Angular2 wie in der Abbildung unten zu entwerfen. Ich bin nicht in der Lage, die Symbolleiste so zu formatieren, dass die Suchleiste in der Mitte erscheint (und in weiß ist) und die übrigen Tasten rechtsbündig sind. Der Code hierfür ist wie folgt:

<md-sidenav-container fullscreen> 
    <md-sidenav mode="side" opened="false" #sidenav> 
    <md-toolbar color="primary">AppLogo</md-toolbar> 
    </md-sidenav> 
    <div class="main-content"> 
    <md-toolbar color="primary"> 
     <span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span> 
     <span><h2>Application Name</h2></span> 
     <md-input-container> 
     <input mdInput placeholder="Search"> 
     </md-input-container> 
     <div id="right_nav"> 
     <span><button md-button><md-icon>add</md-icon> Create Project</button></span> 
     <span><button md-button><md-icon>help</md-icon></button></span> 
     <span><button md-button><md-icon>alarm</md-icon></button></span> 
     <span><button md-button><md-icon>face</md-icon></button></span> 
     </div> 
    </md-toolbar> 
    </div> 
</md-sidenav-container> 

Wie gehe ich über das das vorhandene Material Konstrukten zu tun?

Answer 1

Teilen Sie den Werkzeugleisteninhalt in 3 Teile, dann richten Sie jedes Teil nach Bedarf aus, flex lassen Sie Inhalt 100% Breite abdecken.

<md-sidenav-container fullscreen> 
    <md-sidenav mode="side" opened="false" #sidenav> 
    <md-toolbar color="primary">AppLogo</md-toolbar> 
    </md-sidenav> 
    <div class="main-content"> 
    <md-toolbar color="primary" layout="row"> 
     <div flex layout="row" layout-align="start center"> 
     <span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span> 
     <span><h2>Application Name</h2></span> 
     </div> 
     <div flex layout="row" layout-align="center center"> 
     <md-input-container> 
      <input mdInput placeholder="Search"> 
     </md-input-container> 
     </div> 
     <div id="right_nav" flex layout="row" layout-align="end center"> 
     <span><button md-button><md-icon>add</md-icon> Create Project</button></span> 
     <span><button md-button><md-icon>help</md-icon></button></span> 
     <span><button md-button><md-icon>alarm</md-icon></button></span> 
     <span><button md-button><md-icon>face</md-icon></button></span> 
     </div> 
    </md-toolbar> 
    </div> 
</md-sidenav-container> 

EXAMPLE