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部分，然后根據需要對齊每個部分，然后彎曲以使內容覆蓋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>

例