Blame view

bower_components/paper-toolbar/README.md 1.86 KB
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>

  ```