OLD | NEW |
1 paper-toolbar | 1 paper-toolbar |
2 ============ | 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 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 title class="middle">Middle Title</div> |
| 45 <div title class="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. |
OLD | NEW |