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`. |
+ |
+ |