OLD | NEW |
1 paper-toolbar | 1 |
2 ============ | 2 <!--- |
3 | 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-toolbar.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [](https://travis-ci.org/PolymerElements/paper-toolbar) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-toolbar
)_ |
| 15 |
| 16 |
| 17 ##<paper-toolbar> |
| 18 |
| 19 |
| 20 Material design: [Toolbars](https://www.google.com/design/spec/components/toolba
rs.html) |
| 21 |
4 `paper-toolbar` is a horizontal bar containing items that can be used for | 22 `paper-toolbar` is a horizontal bar containing items that can be used for |
5 label, navigation, search and actions. The items place inside the | 23 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 | 24 `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' | 25 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items' |
8 sizing. | 26 sizing. |
9 | 27 |
10 Example: | 28 Example: |
11 | 29 |
12 ```html | 30 <paper-toolbar> |
13 <paper-toolbar> | 31 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button> |
14 <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button> | 32 <div class="title">Title</div> |
15 <div class="title">Title</div> | 33 <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-butto
n> |
16 <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button> | 34 </paper-toolbar> |
17 </paper-toolbar> | |
18 ``` | |
19 | 35 |
20 `paper-toolbar` has a standard height, but can made be taller by setting `tall` | 36 `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. | 37 class on the `paper-toolbar`. This will make the toolbar 3x the normal height. |
22 | 38 |
23 ```html | 39 <paper-toolbar class="tall"> |
24 <paper-toolbar class="tall"> | 40 <paper-icon-button icon="menu"></paper-icon-button> |
25 <paper-icon-button icon="menu"></paper-icon-button> | 41 </paper-toolbar> |
26 </paper-toolbar> | |
27 ``` | |
28 | 42 |
29 Apply `medium-tall` class to make the toolbar medium tall. This will make the | 43 Apply `medium-tall` class to make the toolbar medium tall. This will make the |
30 toolbar 2x the normal height. | 44 toolbar 2x the normal height. |
31 | 45 |
32 ```html | 46 <paper-toolbar class="medium-tall"> |
33 <paper-toolbar class="medium-tall"> | 47 <paper-icon-button icon="menu"></paper-icon-button> |
34 <paper-icon-button icon="menu"></paper-icon-button> | 48 </paper-toolbar> |
35 </paper-toolbar> | |
36 ``` | |
37 | 49 |
38 When `tall`, items can pin to either the top (default), middle or bottom. Use | 50 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. | 51 `middle` class for middle content and `bottom` class for bottom content. |
40 | 52 |
41 ```html | 53 <paper-toolbar class="tall"> |
42 <paper-toolbar class="tall"> | 54 <paper-icon-button icon="menu"></paper-icon-button> |
43 <paper-icon-button icon="menu"></paper-icon-button> | 55 <div class="middle title">Middle Title</div> |
44 <div class="title middle">Middle Title</div> | 56 <div class="bottom title">Bottom Title</div> |
45 <div class="title bottom">Bottom Title</div> | 57 </paper-toolbar> |
46 </paper-toolbar> | |
47 ``` | |
48 | 58 |
49 For `medium-tall` toolbar, the middle and bottom contents overlap and are | 59 For `medium-tall` toolbar, the middle and bottom contents overlap and are |
50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are | 60 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are |
51 still honored separately. | 61 still honored separately. |
52 | 62 |
53 To make an element completely fit at the bottom of the toolbar, use `fit` along | 63 To make an element completely fit at the bottom of the toolbar, use `fit` along |
54 with `bottom`. | 64 with `bottom`. |
55 | 65 |
56 ```html | 66 <paper-toolbar class="tall"> |
57 <paper-toolbar class="tall"> | 67 <div id="progressBar" class="bottom fit"></div> |
58 <div id="progressBar" class="bottom fit"></div> | 68 </paper-toolbar> |
59 </paper-toolbar> | 69 |
60 ``` | 70 ### Styling |
| 71 |
| 72 The following custom properties and mixins are available for styling: |
| 73 |
| 74 Custom property | Description | Default |
| 75 ----------------|-------------|---------- |
| 76 `--paper-toolbar-background` | Toolbar background color | `--default-primary
-color` |
| 77 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co
lor` |
| 78 `--paper-toolbar-height` | Custom height for toolbar | `64px` |
| 79 `--paper-toolbar-sm-height` | Custom height for small screen toolbar | `56px` |
| 80 `--paper-toolbar` | Mixin applied to the toolbar | `{}` |
| 81 `--paper-toolbar-medium` | Mixin applied to medium height toolbar | `{}` |
| 82 `--paper-toolbar-tall` | Mixin applied to tall height toolbar | `{}` |
| 83 |
| 84 ### Accessibility |
| 85 |
| 86 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `
title` will |
| 87 be used as the label of the toolbar via `aria-labelledby`. |
| 88 |
| 89 |
OLD | NEW |