| Index: third_party/polymer/v1_0/components-chromium/paper-toolbar/README.md
|
| diff --git a/third_party/polymer/v1_0/components-chromium/paper-toolbar/README.md b/third_party/polymer/v1_0/components-chromium/paper-toolbar/README.md
|
| index 997c345c558ad5118a4b1834e0325448e3b04c18..2f6d370570d0146b37dd29ec8ac22a6eaa406520 100644
|
| --- a/third_party/polymer/v1_0/components-chromium/paper-toolbar/README.md
|
| +++ b/third_party/polymer/v1_0/components-chromium/paper-toolbar/README.md
|
| @@ -1,5 +1,23 @@
|
| -paper-toolbar
|
| -============
|
| +
|
| +<!---
|
| +
|
| +This README is automatically generated from the comments in these files:
|
| +paper-toolbar.html
|
| +
|
| +Edit those files, and our readme bot will duplicate them over here!
|
| +Edit this file, and the bot will squash your changes :)
|
| +
|
| +-->
|
| +
|
| +[](https://travis-ci.org/PolymerElements/paper-toolbar)
|
| +
|
| +_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-toolbar)_
|
| +
|
| +
|
| +##<paper-toolbar>
|
| +
|
| +
|
| +Material design: [Toolbars](https://www.google.com/design/spec/components/toolbars.html)
|
|
|
| `paper-toolbar` is a horizontal bar containing items that can be used for
|
| label, navigation, search and actions. The items place inside the
|
| @@ -9,42 +27,34 @@ sizing.
|
|
|
| Example:
|
|
|
| -```html
|
| -<paper-toolbar>
|
| - <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button>
|
| - <div class="title">Title</div>
|
| - <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button>
|
| -</paper-toolbar>
|
| -```
|
| + <paper-toolbar>
|
| + <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
|
| + <div class="title">Title</div>
|
| + <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
|
| + </paper-toolbar>
|
|
|
| `paper-toolbar` has a standard height, but can made be taller by setting `tall`
|
| class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
|
|
|
| -```html
|
| -<paper-toolbar class="tall">
|
| - <paper-icon-button icon="menu"></paper-icon-button>
|
| -</paper-toolbar>
|
| -```
|
| + <paper-toolbar class="tall">
|
| + <paper-icon-button icon="menu"></paper-icon-button>
|
| + </paper-toolbar>
|
|
|
| Apply `medium-tall` class to make the toolbar medium tall. This will make the
|
| toolbar 2x the normal height.
|
|
|
| -```html
|
| -<paper-toolbar class="medium-tall">
|
| - <paper-icon-button icon="menu"></paper-icon-button>
|
| -</paper-toolbar>
|
| -```
|
| + <paper-toolbar class="medium-tall">
|
| + <paper-icon-button icon="menu"></paper-icon-button>
|
| + </paper-toolbar>
|
|
|
| When `tall`, items can pin to either the top (default), middle or bottom. Use
|
| `middle` class for middle content and `bottom` class for bottom content.
|
|
|
| -```html
|
| -<paper-toolbar class="tall">
|
| - <paper-icon-button icon="menu"></paper-icon-button>
|
| - <div class="title middle">Middle Title</div>
|
| - <div class="title bottom">Bottom Title</div>
|
| -</paper-toolbar>
|
| -```
|
| + <paper-toolbar class="tall">
|
| + <paper-icon-button icon="menu"></paper-icon-button>
|
| + <div class="middle title">Middle Title</div>
|
| + <div class="bottom title">Bottom Title</div>
|
| + </paper-toolbar>
|
|
|
| For `medium-tall` toolbar, the middle and bottom contents overlap and are
|
| pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
|
| @@ -53,8 +63,27 @@ still honored separately.
|
| To make an element completely fit at the bottom of the toolbar, use `fit` along
|
| with `bottom`.
|
|
|
| -```html
|
| -<paper-toolbar class="tall">
|
| - <div id="progressBar" class="bottom fit"></div>
|
| -</paper-toolbar>
|
| -```
|
| + <paper-toolbar class="tall">
|
| + <div id="progressBar" class="bottom fit"></div>
|
| + </paper-toolbar>
|
| +
|
| +### Styling
|
| +
|
| +The following custom properties and mixins are available for styling:
|
| +
|
| +Custom property | Description | Default
|
| +----------------|-------------|----------
|
| +`--paper-toolbar-background` | Toolbar background color | `--default-primary-color`
|
| +`--paper-toolbar-color` | Toolbar foreground color | `--text-primary-color`
|
| +`--paper-toolbar-height` | Custom height for toolbar | `64px`
|
| +`--paper-toolbar-sm-height` | Custom height for small screen toolbar | `56px`
|
| +`--paper-toolbar` | Mixin applied to the toolbar | `{}`
|
| +`--paper-toolbar-medium` | Mixin applied to medium height toolbar | `{}`
|
| +`--paper-toolbar-tall` | Mixin applied to tall height toolbar | `{}`
|
| +
|
| +### Accessibility
|
| +
|
| +`<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
|
| +be used as the label of the toolbar via `aria-labelledby`.
|
| +
|
| +
|
|
|