| <!-- |
| @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-behaviors/iron-button-state.html"> |
| <link rel="import" href="../iron-behaviors/iron-control-state.html"> |
| <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| <link rel="import" href="../paper-behaviors/paper-ripple-behavior.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 | `{}` |
| `--paper-tab-content-unselected` | Mixin applied to the tab content when the tab is not selected | `{}` |
| |
| This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`. |
| In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`. |
| |
| --> |
| |
| <dom-module id="paper-tab"> |
| <template> |
| <style> |
| :host { |
| @apply(--layout-inline); |
| @apply(--layout-center); |
| @apply(--layout-center-justified); |
| @apply(--layout-flex-auto); |
| |
| position: relative; |
| padding: 0 12px; |
| overflow: hidden; |
| cursor: pointer; |
| vertical-align: middle; |
| |
| @apply(--paper-font-common-base); |
| @apply(--paper-tab); |
| } |
| |
| :host(:focus) { |
| outline: none; |
| } |
| |
| :host([link]) { |
| padding: 0; |
| } |
| |
| .tab-content { |
| height: 100%; |
| transform: translateZ(0); |
| -webkit-transform: translateZ(0); |
| transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1); |
| @apply(--layout-horizontal); |
| @apply(--layout-center-center); |
| @apply(--layout-flex-auto); |
| @apply(--paper-tab-content); |
| } |
| |
| :host(:not(.iron-selected)) > .tab-content { |
| opacity: 0.8; |
| |
| @apply(--paper-tab-content-unselected); |
| } |
| |
| :host(:focus) .tab-content { |
| opacity: 1; |
| font-weight: 700; |
| } |
| |
| paper-ripple { |
| color: var(--paper-tab-ink, --paper-yellow-a100); |
| } |
| |
| .tab-content > ::content > a { |
| @apply(--layout-flex-auto); |
| |
| height: 100%; |
| } |
| </style> |
| |
| <div class="tab-content"> |
| <content></content> |
| </div> |
| </template> |
| </dom-module> |
| <script> |
| Polymer({ |
| is: 'paper-tab', |
| |
| behaviors: [ |
| Polymer.IronControlState, |
| Polymer.IronButtonState, |
| Polymer.PaperRippleBehavior |
| ], |
| |
| properties: { |
| |
| /** |
| * If true, the tab will forward keyboard clicks (enter/space) to |
| * the first anchor element found in its descendants |
| */ |
| link: { |
| type: Boolean, |
| value: false, |
| reflectToAttribute: true |
| } |
| |
| }, |
| |
| hostAttributes: { |
| role: 'tab' |
| }, |
| |
| listeners: { |
| down: '_updateNoink', |
| tap: '_onTap' |
| }, |
| |
| attached: function() { |
| this._updateNoink(); |
| }, |
| |
| get _parentNoink () { |
| var parent = Polymer.dom(this).parentNode; |
| return !!parent && !!parent.noink; |
| }, |
| |
| _updateNoink: function() { |
| this.noink = !!this.noink || !!this._parentNoink; |
| }, |
| |
| _onTap: function(event) { |
| if (this.link) { |
| var anchor = this.queryEffectiveChildren('a'); |
| |
| if (!anchor) { |
| return; |
| } |
| |
| // Don't get stuck in a loop delegating |
| // the listener from the child anchor |
| if (event.target === anchor) { |
| return; |
| } |
| |
| anchor.click(); |
| } |
| } |
| |
| }); |
| </script> |