Angular2 Material 设计工具栏

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

Angular2 Material 设计工具栏

Angular2 Material Design Toolbar

html

css

angular-material

angular-material2

angular