Angular2 Material Design ToolbarAsk Question

问题:

I'm trying to design a toolbar in Material and Angular2 as shown in the image below. I'm unable to format the toolbar such that the search bar comes in the center (and is in white) and the Create Project and remaining other buttons are flush to the right. The code for this is as follows:

enter image description here

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

How do I go about doing this using the available Material constructs?

回答1:


Split toolbar content in 3 part then align each part as needed, flex let content cover 100% width.

<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

标签: css angular angular-material angular-material2
© 2014 TuiCode, Inc.