Skip to content

Latest commit

 

History

History
 
 

app-toolbar

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

##<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 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 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
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