MdToolbar

MdToolbar is a vertical aligned bar, which can hold the application title or actions.

Screenshots

<md-toolbar>

Bound Properties

| Name | Type | Description | | --- | --- | --- | | color | "primary" | "accent" | "warn" | The color palette for the toolbar |

Notes

The md-toolbar component will use by default the background palette.

Examples

A basic toolbar would have the following markup.

<md-toolbar [color]="myColor">
  <span>My Application Title</span>
</md-toolbar>

Toolbars can also have multiple rows. Multiple rows inside of a md-toolbar can be added by appending as many as needed <md-toolbar-row> elements.

<md-toolbar [color]="myColor">
  <span>First Row</span>
  
  <md-toolbar-row>
    <span>Second Row</span>
  </md-toolbar-row>
  
  <md-toolbar-row>
    <span>Third Row</span>
  </md-toolbar-row>
</md-toolbar>

Alignment

The alignment inside of a toolbar row can be easily done by using the flexbox layout. For example, the following markup aligns the items on the right.

Custom HTML

<md-toolbar color="primary">
  <span>Application Title</span>
  
  <!-- This fills the remaining space of the current row -->
  <span class="example-fill-remaining-space"></span>
  
  <span>Right Aligned Text</span>
</md-toolbar>

Custom SCSS

.example-fill-remaining-space {
  // This fills the remaining space, by using flexbox. 
  // Every toolbar row uses a flexbox row layout.
  flex: 1 1 auto;
}

Output