Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(243)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-toolbar/README.md

Issue 1468623004: Update Polymer from 1.2.1 -> 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@travis-yml
Patch Set: local-state.html Created 5 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 [![Build Status](https://travis-ci.org/PolymerElements/paper-toolbar.svg?branch= master)](https://travis-ci.org/PolymerElements/paper-toolbar)
13
14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-toolbar )_
15
16
17 ##&lt;paper-toolbar&gt;
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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698