third_party/polymer/components/core-toolbar/core-toolbar.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `core-toolbar` is a horizontal bar containing items that can be used for
  12 label, navigation, search and actions.  The items place inside the
  13 `core-toolbar` are projected into a `horizontal center layout` container inside of
  14 `core-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
  15 sizing.
  16
  17 Example:
  18
  19     <core-toolbar>
  20       <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
  21       <div flex>Title</div>
  22       <core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>
  23     </core-toolbar>
  24
  25 `core-toolbar` has a standard height, but can made be taller by setting `tall`
  26 class on the `core-toolbar`.  This will make the toolbar 3x the normal height.
  27
  28     <core-toolbar class="tall">
  29       <core-icon-button icon="menu"></core-icon-button>
  30     </core-toolbar>
  31
  32 Apply `medium-tall` class to make the toolbar medium tall.  This will make the
  33 toolbar 2x the normal height.
  34
  35     <core-toolbar class="medium-tall">
  36       <core-icon-button icon="menu"></core-icon-button>
  37     </core-toolbar>
  38
  39 When `tall`, items can pin to either the top (default), middle or bottom.  Use
  40 `middle` class for middle content and `bottom` class for bottom content.
  41
  42     <core-toolbar class="tall">
  43       <core-icon-button icon="menu"></core-icon-button>
  44       <div class="middle indent">Middle Title</div>
  45       <div class="bottom indent">Bottom Title</div>
  46     </core-toolbar>
  47
  48 For `medium-tall` toolbar, the middle and bottom contents overlap and are
  49 pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are
  50 still honored separately.
  51
  52 To make an element completely fit at the bottom of the toolbar, use `fit` along
  53 with `bottom`.
  54
  55     <core-toolbar class="tall">
  56       <div id="progressBar" class="bottom fit"></div>
  57     </core-toolbar>
  58
  59 `core-toolbar` adapts to mobile/narrow layout when there is a `core-narrow` class set
  60 on itself or any of its ancestors.
  61
  62 @group Polymer Core Elements
  63 @element core-toolbar
  64 @homepage github.io
  65 -->
  66
  67 <link rel="import" href="../polymer/polymer.html">
  68
  69 <polymer-element name="core-toolbar" attributes="justify middleJustify bottomJustify">
  70 <template>
  71
  72   <link rel="stylesheet" href="core-toolbar.css">
  73
  74   <div id="bottomBar" class="toolbar-tools" center horizontal layout>
  75     <content select=".bottom"></content>
  76   </div>
  77
  78   <div id="middleBar" class="toolbar-tools" center horizontal layout>
  79     <content select=".middle"></content>
  80   </div>
  81
  82   <div id="topBar" class="toolbar-tools" center horizontal layout>
  83     <content></content>
  84   </div>
  85
  86 </template>
  87 <script>
  88
  89 (function() {
  90
  91   Polymer('core-toolbar', {
  92
  93     /**
  94      * Controls how the items are aligned horizontally.
  95      * Options are `start`, `center`, `end`, `between` and `around`.
  96      *
  97      * @attribute justify
  98      * @type string
  99      * @default ''
 100      */
 101     justify: '',
 102
 103     /**
 104      * Controls how the items are aligned horizontally when they are placed
 105      * in the middle.
 106      * Options are `start`, `center`, `end`, `between` and `around`.
 107      *
 108      * @attribute middleJustify
 109      * @type string
 110      * @default ''
 111      */
 112     middleJustify: '',
 113
 114     /**
 115      * Controls how the items are aligned horizontally when they are placed
 116      * at the bottom.
 117      * Options are `start`, `center`, `end`, `between` and `around`.
 118      *
 119      * @attribute bottomJustify
 120      * @type string
 121      * @default ''
 122      */
 123     bottomJustify: '',
 124
 125     justifyChanged: function(old) {
 126       this.updateBarJustify(this.$.topBar, this.justify, old);
 127     },
 128
 129     middleJustifyChanged: function(old) {
 130       this.updateBarJustify(this.$.middleBar, this.middleJustify, old);
 131     },
 132
 133     bottomJustifyChanged: function(old) {
 134       this.updateBarJustify(this.$.bottomBar, this.bottomJustify, old);
 135     },
 136
 137     updateBarJustify: function(bar, justify, old) {
 138       if (old) {
 139         bar.removeAttribute(this.toLayoutAttrName(old));
 140       }
 141       if (justify) {
 142         bar.setAttribute(this.toLayoutAttrName(justify), '');
 143       }
 144     },
 145
 146     toLayoutAttrName: function(value) {
 147       return value === 'between' ? 'justified' : value + '-justified';
 148     }
 149
 150   });
 151
 152 })();
 153
 154 </script>
 155 </polymer-element>