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

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

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 6 months 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 paper-toolbar
2 ============ 2 ============
3 3
4 `paper-toolbar` is a horizontal bar containing items that can be used for 4 `paper-toolbar` is a horizontal bar containing items that can be used for
5 label, navigation, search and actions. The items place inside the 5 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 6 `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' 7 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
8 sizing. 8 sizing.
9 9
10 Example: 10 Example:
11 11
12 ```html 12 ```html
13 <paper-toolbar> 13 <paper-toolbar>
14 <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button> 14 <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button>
15 <div title>Title</div> 15 <div class="title">Title</div>
16 <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button> 16 <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button>
17 </paper-toolbar> 17 </paper-toolbar>
18 ``` 18 ```
19 19
20 `paper-toolbar` has a standard height, but can made be taller by setting `tall` 20 `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. 21 class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
22 22
23 ```html 23 ```html
24 <paper-toolbar class="tall"> 24 <paper-toolbar class="tall">
25 <paper-icon-button icon="menu"></paper-icon-button> 25 <paper-icon-button icon="menu"></paper-icon-button>
26 </paper-toolbar> 26 </paper-toolbar>
27 ``` 27 ```
28 28
29 Apply `medium-tall` class to make the toolbar medium tall. This will make the 29 Apply `medium-tall` class to make the toolbar medium tall. This will make the
30 toolbar 2x the normal height. 30 toolbar 2x the normal height.
31 31
32 ```html 32 ```html
33 <paper-toolbar class="medium-tall"> 33 <paper-toolbar class="medium-tall">
34 <paper-icon-button icon="menu"></paper-icon-button> 34 <paper-icon-button icon="menu"></paper-icon-button>
35 </paper-toolbar> 35 </paper-toolbar>
36 ``` 36 ```
37 37
38 When `tall`, items can pin to either the top (default), middle or bottom. Use 38 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. 39 `middle` class for middle content and `bottom` class for bottom content.
40 40
41 ```html 41 ```html
42 <paper-toolbar class="tall"> 42 <paper-toolbar class="tall">
43 <paper-icon-button icon="menu"></paper-icon-button> 43 <paper-icon-button icon="menu"></paper-icon-button>
44 <div title class="middle">Middle Title</div> 44 <div class="title middle">Middle Title</div>
45 <div title class="bottom">Bottom Title</div> 45 <div class="title bottom">Bottom Title</div>
46 </paper-toolbar> 46 </paper-toolbar>
47 ``` 47 ```
48 48
49 For `medium-tall` toolbar, the middle and bottom contents overlap and are 49 For `medium-tall` toolbar, the middle and bottom contents overlap and are
50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are 50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
51 still honored separately. 51 still honored separately.
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698