73bcce88
 luigser
COMPONENTS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
paper-toolbar
============
`paper-toolbar` is a horizontal bar containing items that can be used for
label, navigation, search and actions. The items place inside the
`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
`paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
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` 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>
```
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>
```
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>
```
For `medium-tall` toolbar, the middle and bottom contents overlap and are
pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
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>
```
|
