paper-tab.html

<!--
@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 | `{}`

-->

<dom-module id="paper-tab">
  <template>
    <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%;
        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)

        height: 100%;
      }
    </style>

    <div class="tab-content">
      <content></content>
    </div>
  </template>

  <script>
    Polymer({
      is: 'paper-tab',

      behaviors: [
        Polymer.IronControlState,
        Polymer.IronButtonState,
        Polymer.PaperRippleBehavior
      ],

      hostAttributes: {
        role: 'tab'
      },

      listeners: {
        down: '_updateNoink'
      },

      ready: function() {
        var ripple = this.getRipple();
        ripple.initialOpacity = 0.95;
        ripple.opacityDecayVelocity = 0.98;
      },

      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>
</dom-module>