core-toolbar.html revision 1320f92c476a1ad9d19dba2a48c72b75566198e9 
1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject 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 elements that can be used for
12label, navigation, search and actions.
13
14    <core-toolbar>
15      <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
16      <div flex>Title</div>
17      <core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>
18    </core-toolbar>
19
20`core-toolbar` has a standard height, but can made be taller by setting `tall`
21class on the `core-toolbar`.  This will make the toolbar 3x the normal height.
22
23    <core-toolbar class="tall">
24      <core-icon-button icon="menu"></core-icon-button>
25    </core-toolbar>
26    
27Apply `medium-tall` class to make the toolbar medium tall.  This will make the 
28toolbar 2x the normal height.
29
30    <core-toolbar class="medium-tall">
31      <core-icon-button icon="menu"></core-icon-button>
32    </core-toolbar>
33
34When taller, elements can pin to either the top (default), middle or bottom.
35
36    <core-toolbar class="tall">
37      <core-icon-button icon="menu"></core-icon-button>
38      <div class="middle indent">Middle Title</div>
39      <div class="bottom indent">Bottom Title</div>
40    </core-toolbar>
41    
42To make an element completely fit at the bottom of the toolbar, use `fit` along
43with `bottom`.
44
45    <core-toolbar class="tall">
46      <div id="progressBar" class="bottom fit"></div>
47    </core-toolbar>
48
49@group Polymer Core Elements
50@element core-toolbar
51@homepage github.io
52-->
53
54<link rel="import" href="/polymer/polymer.html">
55
56<polymer-element name="core-toolbar" noscript>
57<template>
58
59  <link rel="stylesheet" href="core-toolbar.css">
60
61  <div id="bottomBar" class="toolbar-tools" center horizontal layout>
62    <content select=".bottom"></content>
63  </div>
64  
65  <div id="middleBar" class="toolbar-tools" center horizontal layout>
66    <content select=".middle"></content>
67  </div>
68
69  <div id="topBar" class="toolbar-tools" center horizontal layout>
70    <content></content>
71  </div>
72
73</template>
74</polymer-element>
75