third_party/polymer/v1_0/components-chromium/paper-toolbar/README.md

   1 paper-toolbar
   2 ============
   3
   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
   6 `paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
   7 `paper-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
   8 sizing.
   9
  10 Example:
  11
  12 ```html
  13 <paper-toolbar>
  14   <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button>
  15   <div class="title">Title</div>
  16   <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button>
  17 </paper-toolbar>
  18 ```
  19
  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.
  22
  23 ```html
  24 <paper-toolbar class="tall">
  25   <paper-icon-button icon="menu"></paper-icon-button>
  26 </paper-toolbar>
  27 ```
  28
  29 Apply `medium-tall` class to make the toolbar medium tall.  This will make the
  30 toolbar 2x the normal height.
  31
  32 ```html
  33 <paper-toolbar class="medium-tall">
  34   <paper-icon-button icon="menu"></paper-icon-button>
  35 </paper-toolbar>
  36 ```
  37
  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.
  40
  41 ```html
  42 <paper-toolbar class="tall">
  43   <paper-icon-button icon="menu"></paper-icon-button>
  44   <div class="title middle">Middle Title</div>
  45   <div class="title bottom">Bottom Title</div>
  46 </paper-toolbar>
  47 ```
  48
  49 For `medium-tall` toolbar, the middle and bottom contents overlap and are
  50 pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are
  51 still honored separately.
  52
  53 To make an element completely fit at the bottom of the toolbar, use `fit` along
  54 with `bottom`.
  55
  56 ```html
  57 <paper-toolbar class="tall">
  58   <div id="progressBar" class="bottom fit"></div>
  59 </paper-toolbar>
  60 ```