<app-toolbar>¶ ↑
app-toolbar is a horizontal toolbar containing items that can be used for label, navigation, search and actions.
Example¶ ↑
Add a title to the toolbar.
<app-toolbar> <div main-title>App name</div> </app-toolbar>
Add a button to the left and right side of the toolbar.
<app-toolbar> <paper-icon-button icon="menu"></paper-icon-button> <div main-title>App name</div> <paper-icon-button icon="search"></paper-icon-button> </app-toolbar>
You can use the attributes top-item
or bottom-item
to completely fit an element to the top or bottom of the toolbar respectively.
Content attributes¶ ↑
Attribute | Description ———————|——————————————————— main-title
| The main title element. condensed-title
| The title element if used inside a condensed app-header. spacer
| Adds a left margin of 64px
. bottom-item
| Sticks the element to the bottom of the toolbar. top-item
| Sticks the element to the top of the toolbar.
Styling¶ ↑
Custom property | Description | Default —————————–|——————————|———————– --app-toolbar-font-size
| Toolbar font size | 20px