api-console-assets
Version:
This repo only exists to publish api console components to npm
44 lines (32 loc) • 1.33 kB
Markdown
##<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.
```html
<app-toolbar>
<div main-title>App name</div>
</app-toolbar>
```
Add a button to the left and right side of the toolbar.
```html
<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