Angular2材质设计工具栏

Question

我试图在Material和Angular2中设计一个工具栏，如下图所示。我无法格式化工具栏，使搜索栏位于中间（并且为白色），Create Project和其他其他按钮向右齐平。代码如下：

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

如何使用可用的Material构造进行此操作？

Answer 1

将工具栏内容拆分为3个部分，然后根据需要对齐每个部分，flex让内容覆盖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