@material-git/all
Version:
Angular 2 Material
69 lines (53 loc) • 1.82 kB
Markdown
# 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.
```html
<md-toolbar [color]="myColor">
<span>My Application Title</span>
</md-toolbar>
```
Toolbars can also have multiple rows.<br/>
Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `<md-toolbar-row>` elements.
```html
<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.<br/>
For example, the following markup aligns the items on the `right`.
Custom HTML
```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
```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
