| OLD | NEW |
| (Empty) |
| 1 | |
| 2 <!--- | |
| 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 The bot does some handling of markdown. Please file a bug if it does the wrong | |
| 11 thing! https://github.com/PolymerLabs/tedium/issues | |
| 12 | |
| 13 --> | |
| 14 | |
| 15 [](https://travis-ci.org/PolymerElements/paper-toolbar) | |
| 16 | |
| 17 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-toolbar
)_ | |
| 18 | |
| 19 | |
| 20 ##<paper-toolbar> | |
| 21 | |
| 22 Material design: [Toolbars](https://www.google.com/design/spec/components/toolba
rs.html) | |
| 23 | |
| 24 `paper-toolbar` is a horizontal bar containing items that can be used for | |
| 25 label, navigation, search and actions. The items placed inside the | |
| 26 `paper-toolbar` are projected into a `class="horizontal center layout"` containe
r inside of | |
| 27 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items' | |
| 28 sizing. | |
| 29 | |
| 30 Example: | |
| 31 | |
| 32 ```html | |
| 33 <paper-toolbar> | |
| 34 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button> | |
| 35 <div class="title">Title</div> | |
| 36 <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button> | |
| 37 </paper-toolbar> | |
| 38 ``` | |
| 39 | |
| 40 `paper-toolbar` has a standard height, but can made be taller by setting `tall` | |
| 41 class on the `paper-toolbar`. This will make the toolbar 3x the normal height. | |
| 42 | |
| 43 ```html | |
| 44 <paper-toolbar class="tall"> | |
| 45 <paper-icon-button icon="menu"></paper-icon-button> | |
| 46 </paper-toolbar> | |
| 47 ``` | |
| 48 | |
| 49 Apply `medium-tall` class to make the toolbar medium tall. This will make the | |
| 50 toolbar 2x the normal height. | |
| 51 | |
| 52 ```html | |
| 53 <paper-toolbar class="medium-tall"> | |
| 54 <paper-icon-button icon="menu"></paper-icon-button> | |
| 55 </paper-toolbar> | |
| 56 ``` | |
| 57 | |
| 58 When `tall`, items can pin to either the top (default), middle or bottom. Use | |
| 59 `middle` class for middle content and `bottom` class for bottom content. | |
| 60 | |
| 61 ```html | |
| 62 <paper-toolbar class="tall"> | |
| 63 <paper-icon-button icon="menu"></paper-icon-button> | |
| 64 <div class="middle title">Middle Title</div> | |
| 65 <div class="bottom title">Bottom Title</div> | |
| 66 </paper-toolbar> | |
| 67 ``` | |
| 68 | |
| 69 For `medium-tall` toolbar, the middle and bottom contents overlap and are | |
| 70 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are | |
| 71 still honored separately. | |
| 72 | |
| 73 To make an element completely fit at the bottom of the toolbar, use `fit` along | |
| 74 with `bottom`. | |
| 75 | |
| 76 ```html | |
| 77 <paper-toolbar class="tall"> | |
| 78 <div id="progressBar" class="bottom fit"></div> | |
| 79 </paper-toolbar> | |
| 80 ``` | |
| 81 | |
| 82 When inside a `paper-header-panel` element, the class `.animate` is toggled to a
nimate | |
| 83 the height change in the toolbar. | |
| 84 | |
| 85 ### Styling | |
| 86 | |
| 87 The following custom properties and mixins are available for styling: | |
| 88 | |
| 89 | Custom property | Description | Default | | |
| 90 | --- | --- | --- | | |
| 91 | `--paper-toolbar-title` | Mixin applied to the title of the toolbar | `{}` | | |
| 92 | `--paper-toolbar-background` | Toolbar background color | `--primary-color` | | |
| 93 | `--paper-toolbar-color` | Toolbar foreground color | `--primary-text-color` | | |
| 94 | `--paper-toolbar-height` | Custom height for toolbar | `64px` | | |
| 95 | `--paper-toolbar-sm-height` | Custom height for small screen toolbar | `56px`
| | |
| 96 | `--paper-toolbar` | Mixin applied to the toolbar | `{}` | | |
| 97 | `--paper-toolbar-content` | Mixin applied to the content section of the toolba
r | `{}` | | |
| 98 | `--paper-toolbar-medium` | Mixin applied to medium height toolbar | `{}` | | |
| 99 | `--paper-toolbar-tall` | Mixin applied to tall height toolbar | `{}` | | |
| 100 | `--paper-toolbar-transition` | Transition applied to the `.animate` class | `h
eight 0.18s ease-in` | | |
| 101 | |
| 102 ### Accessibility | |
| 103 | |
| 104 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `
title` will | |
| 105 be used as the label of the toolbar via `aria-labelledby`. | |
| 106 | |
| 107 | |
| OLD | NEW |