Toolbar actions appear above the view affected by their actions. They may constrain their width to accommodate material passing over them.
Toolbars adjusts its height dimensions based on the screen width to best fit the visible area on small devices. Try to resize your browser to see the difference:
The following options can be applied to all toolbars:
| Name | Description |
|---|---|
| md-transparent | Makes the Toolbar background transparent |
| md-dense | Creates a small sized toolbar |
| md-medium | Creates a medium sized toolbar |
| md-large | Creates a large sized toolbar |
As the Toolbars are mostly used to hold actions that affects the entire application, you can create rows or sections inside of it.
Although those rows works on every toolbar, they were created to separate contents for large toolbars. This element is represented by the md-toolbar-row class. A row can also have a md-toolbar-offset to add a little space on the left of it. This is commonly used inside the second row of an large toolbar.
The sections are used to split the content of the toolbar horizontally (or the row inside). You can apply them using two types of section: md-toolbar-section-start will be left-aligned and md-toolbar-section-end right-aligned.
The following classes creates parts of a toolbar:
| Name | Description |
|---|---|
| md-toolbar-row | Creates a toolbar row, commonly used on large toolbars |
| md-toolbar-offset | Adds an left offset to any toolbar row. Only works in md-toolbar-row |
| md-toolbar-section-start | Creates a section on the left of a toolbar or toolbar row. Commonly used to hold the application menu button and the title |
| md-toolbar-section-end | Creates a section on the right of a toolbar or toolbar row. Commonly used to hold the main action of a toolbar, such as overflow buttons |
| md-title | Will create the toolbar title. Works inside or outside a toolbar row |