abcc6af Aug 19, 2016
69 lines (53 sloc) 1.71 KB


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




Bound Properties

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


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


A basic toolbar would have the following markup.

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

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>

    <span>Second Row</span>

    <span>Third Row</span>


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>

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 image