| OLD | NEW |
| 1 paper-toolbar | 1 paper-toolbar |
| 2 ============ | 2 ============ |
| 3 | 3 |
| 4 `paper-toolbar` is a horizontal bar containing items that can be used for | 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 | 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 | 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' | 7 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items' |
| 8 sizing. | 8 sizing. |
| 9 | 9 |
| 10 Example: | 10 Example: |
| 11 | 11 |
| 12 ```html | 12 ```html |
| 13 <paper-toolbar> | 13 <paper-toolbar> |
| 14 <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button> | 14 <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button> |
| 15 <div title>Title</div> | 15 <div class="title">Title</div> |
| 16 <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button> | 16 <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button> |
| 17 </paper-toolbar> | 17 </paper-toolbar> |
| 18 ``` | 18 ``` |
| 19 | 19 |
| 20 `paper-toolbar` has a standard height, but can made be taller by setting `tall` | 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. | 21 class on the `paper-toolbar`. This will make the toolbar 3x the normal height. |
| 22 | 22 |
| 23 ```html | 23 ```html |
| 24 <paper-toolbar class="tall"> | 24 <paper-toolbar class="tall"> |
| 25 <paper-icon-button icon="menu"></paper-icon-button> | 25 <paper-icon-button icon="menu"></paper-icon-button> |
| 26 </paper-toolbar> | 26 </paper-toolbar> |
| 27 ``` | 27 ``` |
| 28 | 28 |
| 29 Apply `medium-tall` class to make the toolbar medium tall. This will make the | 29 Apply `medium-tall` class to make the toolbar medium tall. This will make the |
| 30 toolbar 2x the normal height. | 30 toolbar 2x the normal height. |
| 31 | 31 |
| 32 ```html | 32 ```html |
| 33 <paper-toolbar class="medium-tall"> | 33 <paper-toolbar class="medium-tall"> |
| 34 <paper-icon-button icon="menu"></paper-icon-button> | 34 <paper-icon-button icon="menu"></paper-icon-button> |
| 35 </paper-toolbar> | 35 </paper-toolbar> |
| 36 ``` | 36 ``` |
| 37 | 37 |
| 38 When `tall`, items can pin to either the top (default), middle or bottom. Use | 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. | 39 `middle` class for middle content and `bottom` class for bottom content. |
| 40 | 40 |
| 41 ```html | 41 ```html |
| 42 <paper-toolbar class="tall"> | 42 <paper-toolbar class="tall"> |
| 43 <paper-icon-button icon="menu"></paper-icon-button> | 43 <paper-icon-button icon="menu"></paper-icon-button> |
| 44 <div title class="middle">Middle Title</div> | 44 <div class="title middle">Middle Title</div> |
| 45 <div title class="bottom">Bottom Title</div> | 45 <div class="title bottom">Bottom Title</div> |
| 46 </paper-toolbar> | 46 </paper-toolbar> |
| 47 ``` | 47 ``` |
| 48 | 48 |
| 49 For `medium-tall` toolbar, the middle and bottom contents overlap and are | 49 For `medium-tall` toolbar, the middle and bottom contents overlap and are |
| 50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are | 50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are |
| 51 still honored separately. | 51 still honored separately. |
| OLD | NEW |