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

Side by Side Diff: polymer_1.2.3/bower_components/paper-toolbar/README.md

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 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
(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 -->
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
22 `paper-toolbar` is a horizontal bar containing items that can be used for
23 label, navigation, search and actions. The items placed inside the
24 `paper-toolbar` are projected into a `class="horizontal center layout"` containe r inside of
25 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
26 sizing.
27
28 Example:
29
30 ```html
31 <paper-toolbar>
32 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
33 <div class="title">Title</div>
34 <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
35 </paper-toolbar>
36 ```
37
38 `paper-toolbar` has a standard height, but can made be taller by setting `tall`
39 class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
40
41 ```html
42 <paper-toolbar class="tall">
43 <paper-icon-button icon="menu"></paper-icon-button>
44 </paper-toolbar>
45 ```
46
47 Apply `medium-tall` class to make the toolbar medium tall. This will make the
48 toolbar 2x the normal height.
49
50 ```html
51 <paper-toolbar class="medium-tall">
52 <paper-icon-button icon="menu"></paper-icon-button>
53 </paper-toolbar>
54 ```
55
56 When `tall`, items can pin to either the top (default), middle or bottom. Use
57 `middle` class for middle content and `bottom` class for bottom content.
58
59 ```html
60 <paper-toolbar class="tall">
61 <paper-icon-button icon="menu"></paper-icon-button>
62 <div class="middle title">Middle Title</div>
63 <div class="bottom title">Bottom Title</div>
64 </paper-toolbar>
65 ```
66
67 For `medium-tall` toolbar, the middle and bottom contents overlap and are
68 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
69 still honored separately.
70
71 To make an element completely fit at the bottom of the toolbar, use `fit` along
72 with `bottom`.
73
74 ```html
75 <paper-toolbar class="tall">
76 <div id="progressBar" class="bottom fit"></div>
77 </paper-toolbar>
78 ```
79
80 ### Styling
81
82 The following custom properties and mixins are available for styling:
83
84 Custom property | Description | Default
85 ----------------|-------------|----------
86 `--paper-toolbar-title` | Mixin applied to the title of the toolbar | `{}`
87 `--paper-toolbar-background` | Toolbar background color | `--default-primary -color`
88 `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-co lor`
89 `--paper-toolbar-height` | Custom height for toolbar | `64px`
90 `--paper-toolbar-sm-height` | Custom height for small screen toolbar | `56px`
91 `--paper-toolbar` | Mixin applied to the toolbar | `{}`
92 `--paper-toolbar-medium` | Mixin applied to medium height toolbar | `{}`
93 `--paper-toolbar-tall` | Mixin applied to tall height toolbar | `{}`
94
95 ### Accessibility
96
97 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class ` title` will
98 be used as the label of the toolbar via `aria-labelledby`.
99
100
OLDNEW
« no previous file with comments | « polymer_1.2.3/bower_components/paper-toolbar/CONTRIBUTING.md ('k') | polymer_1.2.3/bower_components/paper-toolbar/bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698