OLD | NEW |
| (Empty) |
1 paper-toolbar | |
2 ============ | |
3 | |
4 `paper-toolbar` is a horizontal bar containing items that can be used for | |
5 label, navigation, search and actions. The items place inside the | |
6 `paper-toolbar` are projected into a `class="horizontal center layout"` containe
r inside of | |
7 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items' | |
8 sizing. | |
9 | |
10 Example: | |
11 | |
12 ```html | |
13 <paper-toolbar> | |
14 <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button> | |
15 <div class="title">Title</div> | |
16 <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button> | |
17 </paper-toolbar> | |
18 ``` | |
19 | |
20 `paper-toolbar` has a standard height, but can made be taller by setting `tall` | |
21 class on the `paper-toolbar`. This will make the toolbar 3x the normal height. | |
22 | |
23 ```html | |
24 <paper-toolbar class="tall"> | |
25 <paper-icon-button icon="menu"></paper-icon-button> | |
26 </paper-toolbar> | |
27 ``` | |
28 | |
29 Apply `medium-tall` class to make the toolbar medium tall. This will make the | |
30 toolbar 2x the normal height. | |
31 | |
32 ```html | |
33 <paper-toolbar class="medium-tall"> | |
34 <paper-icon-button icon="menu"></paper-icon-button> | |
35 </paper-toolbar> | |
36 ``` | |
37 | |
38 When `tall`, items can pin to either the top (default), middle or bottom. Use | |
39 `middle` class for middle content and `bottom` class for bottom content. | |
40 | |
41 ```html | |
42 <paper-toolbar class="tall"> | |
43 <paper-icon-button icon="menu"></paper-icon-button> | |
44 <div class="title middle">Middle Title</div> | |
45 <div class="title bottom">Bottom Title</div> | |
46 </paper-toolbar> | |
47 ``` | |
48 | |
49 For `medium-tall` toolbar, the middle and bottom contents overlap and are | |
50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are | |
51 still honored separately. | |
52 | |
53 To make an element completely fit at the bottom of the toolbar, use `fit` along | |
54 with `bottom`. | |
55 | |
56 ```html | |
57 <paper-toolbar class="tall"> | |
58 <div id="progressBar" class="bottom fit"></div> | |
59 </paper-toolbar> | |
60 ``` | |
OLD | NEW |