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

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

Issue 1834313003: Remove unneeded files from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Restore bower.json files. Created 4 years, 8 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 The bot does some handling of markdown. Please file a bug if it does the wrong
11 thing! https://github.com/PolymerLabs/tedium/issues
12
13 -->
14
15 [![Build Status](https://travis-ci.org/PolymerElements/paper-toolbar.svg?branch= master)](https://travis-ci.org/PolymerElements/paper-toolbar)
16
17 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-toolbar )_
18
19
20 ##&lt;paper-toolbar&gt;
21
22 Material design: [Toolbars](https://www.google.com/design/spec/components/toolba rs.html)
23
24 `paper-toolbar` is a horizontal bar containing items that can be used for
25 label, navigation, search and actions. The items placed inside the
26 `paper-toolbar` are projected into a `class="horizontal center layout"` containe r inside of
27 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
28 sizing.
29
30 Example:
31
32 ```html
33 <paper-toolbar>
34 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
35 <div class="title">Title</div>
36 <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
37 </paper-toolbar>
38 ```
39
40 `paper-toolbar` has a standard height, but can made be taller by setting `tall`
41 class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
42
43 ```html
44 <paper-toolbar class="tall">
45 <paper-icon-button icon="menu"></paper-icon-button>
46 </paper-toolbar>
47 ```
48
49 Apply `medium-tall` class to make the toolbar medium tall. This will make the
50 toolbar 2x the normal height.
51
52 ```html
53 <paper-toolbar class="medium-tall">
54 <paper-icon-button icon="menu"></paper-icon-button>
55 </paper-toolbar>
56 ```
57
58 When `tall`, items can pin to either the top (default), middle or bottom. Use
59 `middle` class for middle content and `bottom` class for bottom content.
60
61 ```html
62 <paper-toolbar class="tall">
63 <paper-icon-button icon="menu"></paper-icon-button>
64 <div class="middle title">Middle Title</div>
65 <div class="bottom title">Bottom Title</div>
66 </paper-toolbar>
67 ```
68
69 For `medium-tall` toolbar, the middle and bottom contents overlap and are
70 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
71 still honored separately.
72
73 To make an element completely fit at the bottom of the toolbar, use `fit` along
74 with `bottom`.
75
76 ```html
77 <paper-toolbar class="tall">
78 <div id="progressBar" class="bottom fit"></div>
79 </paper-toolbar>
80 ```
81
82 When inside a `paper-header-panel` element, the class `.animate` is toggled to a nimate
83 the height change in the toolbar.
84
85 ### Styling
86
87 The following custom properties and mixins are available for styling:
88
89 | Custom property | Description | Default |
90 | --- | --- | --- |
91 | `--paper-toolbar-title` | Mixin applied to the title of the toolbar | `{}` |
92 | `--paper-toolbar-background` | Toolbar background color | `--primary-color` |
93 | `--paper-toolbar-color` | Toolbar foreground color | `--primary-text-color` |
94 | `--paper-toolbar-height` | Custom height for toolbar | `64px` |
95 | `--paper-toolbar-sm-height` | Custom height for small screen toolbar | `56px` |
96 | `--paper-toolbar` | Mixin applied to the toolbar | `{}` |
97 | `--paper-toolbar-content` | Mixin applied to the content section of the toolba r | `{}` |
98 | `--paper-toolbar-medium` | Mixin applied to medium height toolbar | `{}` |
99 | `--paper-toolbar-tall` | Mixin applied to tall height toolbar | `{}` |
100 | `--paper-toolbar-transition` | Transition applied to the `.animate` class | `h eight 0.18s ease-in` |
101
102 ### Accessibility
103
104 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class ` title` will
105 be used as the label of the toolbar via `aria-labelledby`.
106
107
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698