Angular2材質設計工具欄

Question

我試圖在Material和Angular2中設計一個工具欄，如下圖所示。我無法格式化工具欄，以便搜索欄位於中心（並且是白色的），並且其餘的其他按鈕向右齊平。這樣做的代碼如下：

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

我如何去這樣做使用可用的材料結構？

Answer 1

將工具欄內容拆分爲3部分，然後根據需要對齊每個部分，然後讓內容覆蓋100％的寬度。

<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