third_party/polymer/v1_0/components-chromium/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 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
  11 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  12 <link rel="import" href="../iron-behaviors/iron-control-state.html">
  13 <link rel="import" href="../paper-ripple/paper-ripple.html">
  14
  15 <!--
  16 `paper-tab` is styled to look like a tab.  It should be used in conjunction with
  17 `paper-tabs`.
  18
  19 Example:
  20
  21     <paper-tabs selected="0">
  22       <paper-tab>TAB 1</paper-tab>
  23       <paper-tab>TAB 2</paper-tab>
  24       <paper-tab>TAB 3</paper-tab>
  25     </paper-tabs>
  26
  27 ### Styling
  28
  29 The following custom properties and mixins are available for styling:
  30
  31 Custom property | Description | Default
  32 ----------------|-------------|----------
  33 `--paper-tab-ink` | Ink color | `--paper-yellow-a100`
  34 `--paper-tab` | Mixin applied to the tab | `{}`
  35 `--paper-tab-content` | Mixin applied to the tab content | `{}`
  36
  37 -->
  38
  39 </head><body><dom-module id="paper-tab">
  40
  41   <style>
  42
  43     :host {
  44       @apply(--layout-inline);
  45       @apply(--layout-center);
  46       @apply(--layout-center-justified);
  47       @apply(--layout-flex);
  48
  49       position: relative;
  50       padding: 0 12px;
  51       overflow: hidden;
  52       cursor: pointer;
  53
  54       @apply(--paper-tab);
  55     }
  56
  57     :host(:focus) {
  58       outline: none;
  59     }
  60
  61     :host([link]) {
  62       padding: 0;
  63     }
  64
  65     .tab-content {
  66       height: 100%;
  67       -webkit-transform: translateZ(0);
  68       transform: translateZ(0);
  69       transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
  70
  71       @apply(--paper-tab-content);
  72     }
  73
  74     :host(:not(.iron-selected)) > .tab-content {
  75       opacity: 0.8;
  76     }
  77
  78     :host(:focus) .tab-content {
  79       opacity: 1;
  80       font-weight: 700;
  81     }
  82
  83     #ink {
  84       color: var(--paper-tab-ink, --paper-yellow-a100);
  85       pointer-events: none;
  86     }
  87
  88     .tab-content > ::content > a {
  89       height: 100%;
  90       /* flex */
  91       -ms-flex: 1 1 0.000000001px;
  92       -webkit-flex: 1;
  93       flex: 1;
  94       -webkit-flex-basis: 0.000000001px;
  95       flex-basis: 0.000000001px;
  96     }
  97
  98   </style>
  99
 100   <template>
 101
 102     <div class="tab-content flex-auto center-center horizontal layout">
 103       <content></content>
 104     </div>
 105
 106     <template is="dom-if" if="[[!noink]]">
 107       <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98"></paper-ripple>
 108     </template>
 109
 110   </template>
 111
 112 </dom-module>
 113
 114 <script src="paper-tab-extracted.js"></script></body></html>