changing-toolbar-size.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
# Changing the core-toolbar Size

The `core-toolbar` element has a few built-in styles for sizing. Adding a class
of either `medium-tall` or `tall` expands the `core-toolbar`. When using `tall`,
elements can pin to either the top (default), middle, or bottom.

    <core-toolbar class="tall">
      <core-icon-button icon="menu"></core-icon-button>
      <div class="middle indent">My App</div>
      <div class="bottom indent">Even more of my app</div>
    </core-toolbar>

Read the
[official documentation for core-toolbar]
(http://www.polymer-project.org/docs/elements/core-elements.html#core-toolbar).

[jsbin](http://jsbin.com/wewogi/edit)
-->

<link rel="import" href="../../../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../../../components/core-icons/core-icons.html">
<link rel="import" href="../../../components/core-icon-button/core-icon-button.html">

<core-toolbar>
  <core-icon-button icon="menu"></core-icon-button>
  <div>My App</div>
</core-toolbar>

<core-toolbar class="medium-tall">
  <core-icon-button icon="menu"></core-icon-button>
  <div class="bottom indent">My Medium App</div>
</core-toolbar>

<core-toolbar class="tall">
  <core-icon-button icon="menu"></core-icon-button>
  <div class="middle indent">My Tall App</div>
  <div class="bottom indent">Even more of my app</div>
</core-toolbar>