third_party/polymer/v1_0/components/paper-tabs/paper-tab.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
  13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  14 <link rel="import" href="../iron-behaviors/iron-control-state.html">
  15 <link rel="import" href="../paper-ripple/paper-ripple.html">
  16
  17 <!--
  18 `paper-tab` is styled to look like a tab.  It should be used in conjunction with
  19 `paper-tabs`.
  20
  21 Example:
  22
  23     <paper-tabs selected="0">
  24       <paper-tab>TAB 1</paper-tab>
  25       <paper-tab>TAB 2</paper-tab>
  26       <paper-tab>TAB 3</paper-tab>
  27     </paper-tabs>
  28
  29 ### Styling
  30
  31 The following custom properties and mixins are available for styling:
  32
  33 Custom property | Description | Default
  34 ----------------|-------------|----------
  35 `--paper-tab-ink` | Ink color | `--paper-yellow-a100`
  36 `--paper-tab` | Mixin applied to the tab | `{}`
  37 `--paper-tab-content` | Mixin applied to the tab content | `{}`
  38
  39 -->
  40
  41 <dom-module id="paper-tab">
  42
  43   <style>
  44
  45     :host {
  46       @apply(--layout-inline);
  47       @apply(--layout-center);
  48       @apply(--layout-center-justified);
  49       @apply(--layout-flex);
  50
  51       position: relative;
  52       padding: 0 12px;
  53       overflow: hidden;
  54       cursor: pointer;
  55
  56       @apply(--paper-tab);
  57     }
  58
  59     :host(:focus) {
  60       outline: none;
  61     }
  62
  63     :host([link]) {
  64       padding: 0;
  65     }
  66
  67     .tab-content {
  68       height: 100%;
  69       -webkit-transform: translateZ(0);
  70       transform: translateZ(0);
  71       transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
  72
  73       @apply(--paper-tab-content);
  74     }
  75
  76     :host(:not(.iron-selected)) > .tab-content {
  77       opacity: 0.8;
  78     }
  79
  80     :host(:focus) .tab-content {
  81       opacity: 1;
  82       font-weight: 700;
  83     }
  84
  85     #ink {
  86       color: var(--paper-tab-ink, --paper-yellow-a100);
  87       pointer-events: none;
  88     }
  89
  90     .tab-content > ::content > a {
  91       height: 100%;
  92       /* flex */
  93       -ms-flex: 1 1 0.000000001px;
  94       -webkit-flex: 1;
  95       flex: 1;
  96       -webkit-flex-basis: 0.000000001px;
  97       flex-basis: 0.000000001px;
  98     }
  99
 100   </style>
 101
 102   <template>
 103
 104     <div class="tab-content flex-auto center-center horizontal layout">
 105       <content></content>
 106     </div>
 107
 108     <template is="dom-if" if="[[!noink]]">
 109       <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98"></paper-ripple>
 110     </template>
 111
 112   </template>
 113
 114 </dom-module>
 115
 116 <script>
 117
 118   Polymer({
 119
 120     is: 'paper-tab',
 121
 122     behaviors: [
 123       Polymer.IronControlState
 124     ],
 125
 126     properties: {
 127
 128       /**
 129        * If true, ink ripple effect is disabled.
 130        *
 131        * @attribute noink
 132        */
 133       noink: {
 134         type: Boolean,
 135         value: false
 136       }
 137
 138     },
 139
 140     hostAttributes: {
 141       role: 'tab'
 142     },
 143
 144     listeners: {
 145       down: '_onDown'
 146     },
 147
 148     get _parentNoink () {
 149       var parent = Polymer.dom(this).parentNode;
 150       return !!parent && !!parent.noink;
 151     },
 152
 153     _onDown: function(e) {
 154       this.noink = !!this.noink || !!this._parentNoink;
 155     }
 156   });
 157
 158 </script>