<!-- Copyright (c) 2015 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 --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../paper-styles/paper-styles.html"> <!-- `paper-toolbar` is a horizontal bar containing items that can be used for label, navigation, search and actions. The items place inside the `paper-toolbar` are projected into a `class="horizontal center layout"` container inside of `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items' sizing. Example: <paper-toolbar> <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button> <div class="title">Title</div> <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button> </paper-toolbar> `paper-toolbar` has a standard height, but can made be taller by setting `tall` class on the `paper-toolbar`. This will make the toolbar 3x the normal height. <paper-toolbar class="tall"> <paper-icon-button icon="menu"></paper-icon-button> </paper-toolbar> Apply `medium-tall` class to make the toolbar medium tall. This will make the toolbar 2x the normal height. <paper-toolbar class="medium-tall"> <paper-icon-button icon="menu"></paper-icon-button> </paper-toolbar> When `tall`, items can pin to either the top (default), middle or bottom. Use `middle` class for middle content and `bottom` class for bottom content. <paper-toolbar class="tall"> <paper-icon-button icon="menu"></paper-icon-button> <div class="middle title">Middle Title</div> <div class="bottom title">Bottom Title</div> </paper-toolbar> For `medium-tall` toolbar, the middle and bottom contents overlap and are pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are still honored separately. To make an element completely fit at the bottom of the toolbar, use `fit` along with `bottom`. <paper-toolbar class="tall"> <div id="progressBar" class="bottom fit"></div> </paper-toolbar> ### Styling The following custom properties and mixins are available for styling: Custom property | Description | Default ----------------|-------------|---------- `--paper-toolbar-background` | Toolbar background color | `--default-primary-color` `--paper-toolbar-color` | Toolbar foreground color | `--text-primary-color` `--paper-toolbar` | Mixin applied to the toolbar | `{}` ### Accessibility `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will be used as the label of the toolbar via `aria-labelledby`. @demo demo/index.html --> <dom-module id="paper-toolbar"> <style> :host { /* technical */ display: block; position: relative; box-sizing: border-box; -moz-box-sizing: border-box; /* size */ height: 64px; background: var(--paper-toolbar-background, --default-primary-color); color: var(--paper-toolbar-color, --text-primary-color); @apply(--paper-toolbar); } :host(.animate) { /* transition */ transition: height 0.18s ease-in; } :host(.medium-tall) { height: 128px; } :host(.tall) { height: 192px; } .toolbar-tools { position: relative; height: 64px; padding: 0 16px; pointer-events: none; } /* * TODO: Where should media query breakpoints live so they can be shared between elements? */ @media (max-width: 639px) { :host { height: 56px; } :host(.medium-tall) { height: 112px; } :host(.tall) { height: 168px; } .toolbar-tools { height: 56px; } } #topBar { position: relative; } /* middle bar */ #middleBar { position: absolute; top: 0; right: 0; left: 0; } :host(.tall) #middleBar, :host(.medium-tall) #middleBar { -webkit-transform: translateY(100%); transform: translateY(100%); } /* bottom bar */ #bottomBar { position: absolute; right: 0; bottom: 0; left: 0; } /* * make elements (e.g. buttons) respond to mouse/touch events * * `.toolbar-tools` disables touch events so multiple toolbars can stack and not * absorb events. All children must have pointer events re-enabled to work as * expected. */ .toolbar-tools > ::content > *:not([disabled]) { pointer-events: auto; } .toolbar-tools > ::content .title { @apply(--paper-font-title); @apply(--layout-flex); pointer-events: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; /* * Polymer/polymer/issues/1525 * --paper-font-title defines a `font-weight` * let's override its value, but we need `important!` * because all mixins are resolved in rule's selector that has higher precedence * than the current selector. */ font-weight: 400 !important; } /** * TODO: Refactor these selectors * Work in progress. */ .toolbar-tools > ::content paper-icon-button[icon=menu] { margin-right: 24px; } .toolbar-tools > ::content > .title, .toolbar-tools > ::content[select=".middle"] > .title, .toolbar-tools > ::content[select=".bottom"] > .title { margin-left: 56px; } .toolbar-tools > ::content > paper-icon-button + .title, .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title, .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title { margin-left: 0; } .toolbar-tools > ::content > .fit { position: absolute; top: auto; right: 0; bottom: 0; left: 0; width: auto; margin: 0; } </style> <template> <div id="topBar" class$="[[_computeBarClassName(justify)]]"> <content select=":not(.middle):not(.bottom)"></content> </div> <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]"> <content select=".middle"></content> </div> <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]"> <content select=".bottom"></content> </div> </template> </dom-module> <script> (function() { 'use strict'; function classNames(obj) { var classNames = []; for (var key in obj) { if (obj.hasOwnProperty(key) && obj[key]) { classNames.push(key); } } return classNames.join(' '); } Polymer({ is: 'paper-toolbar', hostAttributes: { 'role': 'toolbar' }, properties: { /** * Controls how the items are aligned horizontally when they are placed * at the bottom. * Options are `start`, `center`, `end`, `justified` and `around`. * * @attribute bottomJustify * @type string * @default '' */ bottomJustify: { type: String, value: '' }, /** * Controls how the items are aligned horizontally. * Options are `start`, `center`, `end`, `justified` and `around`. * * @attribute justify * @type string * @default '' */ justify: { type: String, value: '' }, /** * Controls how the items are aligned horizontally when they are placed * in the middle. * Options are `start`, `center`, `end`, `justified` and `around`. * * @attribute middleJustify * @type string * @default '' */ middleJustify: { type: String, value: '' } }, attached: function() { this._observer = this._observe(this); this._updateAriaLabelledBy(); }, detached: function() { if (this._observer) { this._observer.disconnect(); } }, _observe: function(node) { var observer = new MutationObserver(function() { this._updateAriaLabelledBy(); }.bind(this)); observer.observe(node, { childList: true, subtree: true }); return observer; }, _updateAriaLabelledBy: function() { var labelledBy = []; var contents = Polymer.dom(this.root).querySelectorAll('content'); for (var content, index = 0; content = contents[index]; index++) { var nodes = Polymer.dom(content).getDistributedNodes(); for (var node, jndex = 0; node = nodes[jndex]; jndex++) { if (node.classList && node.classList.contains('title')) { if (node.id) { labelledBy.push(node.id); } else { var id = 'paper-toolbar-label-' + Math.floor(Math.random() * 10000); node.id = id; labelledBy.push(id); } } } } if (labelledBy.length > 0) { this.setAttribute('aria-labelledby', labelledBy.join(' ')); } }, _computeBarClassName: function(barJustify) { var classObj = { 'center': true, 'horizontal': true, 'layout': true, 'toolbar-tools': true }; // If a blank string or any falsy value is given, no other class name is // added. if (barJustify) { var justifyClassName = (barJustify === 'justified') ? barJustify : barJustify + '-justified'; classObj[justifyClassName] = true; } return classNames(classObj); } }); }()); </script>