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