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