<!-- @license 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="../iron-flex-layout/classes/iron-flex-layout.html"> <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../iron-behaviors/iron-control-state.html"> <link rel="import" href="../iron-behaviors/iron-button-state.html"> <link rel="import" href="../paper-ripple/paper-ripple.html"> <!-- `paper-tab` is styled to look like a tab. It should be used in conjunction with `paper-tabs`. Example: <paper-tabs selected="0"> <paper-tab>TAB 1</paper-tab> <paper-tab>TAB 2</paper-tab> <paper-tab>TAB 3</paper-tab> </paper-tabs> ### Styling The following custom properties and mixins are available for styling: Custom property | Description | Default ----------------|-------------|---------- `--paper-tab-ink` | Ink color | `--paper-yellow-a100` `--paper-tab` | Mixin applied to the tab | `{}` `--paper-tab-content` | Mixin applied to the tab content | `{}` --> <dom-module id="paper-tab"> <style> :host { @apply(--layout-inline); @apply(--layout-center); @apply(--layout-center-justified); @apply(--layout-flex); position: relative; padding: 0 12px; overflow: hidden; cursor: pointer; @apply(--paper-tab); } :host(:focus) { outline: none; } :host([link]) { padding: 0; } .tab-content { height: 100%; -webkit-transform: translateZ(0); transform: translateZ(0); transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1); @apply(--paper-tab-content); } :host(:not(.iron-selected)) > .tab-content { opacity: 0.8; } :host(:focus) .tab-content { opacity: 1; font-weight: 700; } #ink { color: var(--paper-tab-ink, --paper-yellow-a100); pointer-events: none; } .tab-content > ::content > a { height: 100%; /* flex */ -ms-flex: 1 1 0.000000001px; -webkit-flex: 1; flex: 1; -webkit-flex-basis: 0.000000001px; flex-basis: 0.000000001px; } </style> <template> <div class="tab-content flex-auto center-center horizontal layout"> <content></content> </div> <template is="dom-if" if="[[!noink]]"> <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98"></paper-ripple> </template> </template> </dom-module> <script> Polymer({ is: 'paper-tab', behaviors: [ Polymer.IronControlState, Polymer.IronButtonState ], properties: { /** * If true, ink ripple effect is disabled. * * @attribute noink */ noink: { type: Boolean, value: false } }, hostAttributes: { role: 'tab' }, listeners: { down: '_updateNoink' }, attached: function() { this._updateNoink(); }, get _parentNoink () { var parent = Polymer.dom(this).parentNode; return !!parent && !!parent.noink; }, _updateNoink: function() { this.noink = !!this.noink || !!this._parentNoink; } }); </script>