<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../../polymer/polymer.html”> <link rel=“import” href=“../../iron-flex-layout/iron-flex-layout.html”>

<!– app-toolbar is a horizontal toolbar containing items that can be used for label, navigation, search and actions.

### Example

Add a title to the toolbar.

“`html <app-toolbar>

<div main-title>App name</div>

</app-toolbar> “`

Add a button to the left and right side of the toolbar.

“`html <app-toolbar>

<paper-icon-button icon="menu"></paper-icon-button>
<div main-title>App name</div>
<paper-icon-button icon="search"></paper-icon-button>

</app-toolbar> “`

You can use the attributes `top-item` or `bottom-item` to completely fit an element to the top or bottom of the toolbar respectively.

### Content attributes

Attribute | Description ———————|——————————————————— `main-title` | The main title element. `condensed-title` | The title element if used inside a condensed app-header. `spacer` | Adds a left margin of `64px`. `bottom-item` | Sticks the element to the bottom of the toolbar. `top-item` | Sticks the element to the top of the toolbar.

### Styling

Custom property | Description | Default —————————–|——————————|———————– `–app-toolbar-font-size` | Toolbar font size | 20px

@group App Elements @element app-toolbar @demo app-toolbar/demo/index.html –>

<dom-module id=“app-toolbar”>

<template>
  <style>
    :host {
      @apply(--layout-horizontal);
      @apply(--layout-center);
      position: relative;
      height: 64px;
      padding: 0 16px;
      pointer-events: none;
      font-size: var(--app-toolbar-font-size, 20px);
    }

    ::content > * {
      pointer-events: auto;
    }

    ::content > paper-icon-button {
      /* paper-icon-button/issues/33 */
      font-size: 0;
    }

    ::content > [main-title],
    ::content > [condensed-title] {
      pointer-events: none;
      @apply(--layout-flex);
    }

    ::content > [bottom-item] {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
    }

    ::content > [top-item] {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
    }

    ::content > [spacer] {
      margin-left: 64px;
    }
  </style>

  <content></content>
</template>

<script>
  Polymer({
    is: 'app-toolbar'
  });
</script>

</dom-module>