third_party/polymer/v1_0/components-chromium/paper-tabs/paper-tabs.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/iron-flex-layout.html">
  11 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
  12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  13 <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
  14 <link rel="import" href="../iron-icon/iron-icon.html">
  15 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
  16 <link rel="import" href="../paper-styles/color.html">
  17 <link rel="import" href="paper-tabs-icons.html">
  18 <link rel="import" href="paper-tab.html">
  19
  20 <!--
  21 `paper-tabs` makes it easy to explore and switch between different views or functional aspects of
  22 an app, or to browse categorized data sets.
  23
  24 Use `selected` property to get or set the selected tab.
  25
  26 Example:
  27
  28     <paper-tabs selected="0">
  29       <paper-tab>TAB 1</paper-tab>
  30       <paper-tab>TAB 2</paper-tab>
  31       <paper-tab>TAB 3</paper-tab>
  32     </paper-tabs>
  33
  34 See <a href="#paper-tab">paper-tab</a> for more information about
  35 `paper-tab`.
  36
  37 A common usage for `paper-tabs` is to use it along with `iron-pages` to switch
  38 between different views.
  39
  40     <paper-tabs selected="{{selected}}">
  41       <paper-tab>Tab 1</paper-tab>
  42       <paper-tab>Tab 2</paper-tab>
  43       <paper-tab>Tab 3</paper-tab>
  44     </paper-tabs>
  45
  46     <iron-pages selected="{{selected}}">
  47       <div>Page 1</div>
  48       <div>Page 2</div>
  49       <div>Page 3</div>
  50     </iron-pages>
  51
  52
  53 To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>`
  54 element in `paper-tab`.
  55
  56 Example:
  57
  58     <paper-tabs selected="0">
  59       <paper-tab link>
  60         <a href="#link1" class="horizontal center-center layout">TAB ONE</a>
  61       </paper-tab>
  62       <paper-tab link>
  63         <a href="#link2" class="horizontal center-center layout">TAB TWO</a>
  64       </paper-tab>
  65       <paper-tab link>
  66         <a href="#link3" class="horizontal center-center layout">TAB THREE</a>
  67       </paper-tab>
  68     </paper-tabs>
  69
  70 ### Styling
  71
  72 The following custom properties and mixins are available for styling:
  73
  74 Custom property | Description | Default
  75 ----------------|-------------|----------
  76 `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100`
  77 `--paper-tabs` | Mixin applied to the tabs | `{}`
  78
  79 @hero hero.svg
  80 @demo demo/index.html
  81 -->
  82
  83 </head><body><dom-module id="paper-tabs">
  84
  85   <style>
  86
  87     :host {
  88       @apply(--layout);
  89       @apply(--layout-center);
  90
  91       height: 48px;
  92       font-size: 14px;
  93       font-weight: 500;
  94       overflow: hidden;
  95       -webkit-user-select: none;
  96       -moz-user-select: none;
  97       -ms-user-select: none;
  98       user-select: none;
  99       -webkit-tap-highlight-color: rgba(0,0,0,0);
 100
 101       @apply(--paper-tabs);
 102     }
 103
 104     #tabsContainer {
 105       position: relative;
 106       height: 100%;
 107       white-space: nowrap;
 108       overflow: hidden;
 109     }
 110
 111     #tabsContent {
 112       height: 100%;
 113     }
 114
 115     #tabsContent.scrollable {
 116       position: absolute;
 117       white-space: nowrap;
 118     }
 119
 120     .hidden {
 121       display: none;
 122     }
 123
 124     .not-visible {
 125       opacity: 0;
 126     }
 127
 128     paper-icon-button {
 129       width: 24px;
 130       padding: 16px;
 131     }
 132
 133     #selectionBar {
 134       position: absolute;
 135       height: 2px;
 136       bottom: 0;
 137       left: 0;
 138       right: 0;
 139       background-color: var(--paper-tabs-selection-bar-color, --paper-yellow-a100);
 140       -webkit-transform-origin: left center;
 141       transform-origin: left center;
 142       -webkit-transform: scale(0);
 143       transform: scale(0);
 144       transition: -webkit-transform;
 145       transition: transform;
 146
 147       @apply(--paper-tabs-selection-bar);
 148     }
 149
 150     #selectionBar.align-bottom {
 151       top: 0;
 152       bottom: auto;
 153     }
 154
 155     #selectionBar.expand {
 156       transition-duration: 0.15s;
 157       transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
 158     }
 159
 160     #selectionBar.contract {
 161       transition-duration: 0.18s;
 162       transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
 163     }
 164
 165     #tabsContent > ::content > *:not(#selectionBar) {
 166       height: 100%;
 167     }
 168
 169   </style>
 170
 171   <template>
 172
 173     <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown"></paper-icon-button>
 174
 175     <div id="tabsContainer" class="flex" on-scroll="_scroll">
 176
 177       <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]">
 178
 179         <content select="*"></content>
 180
 181         <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignBottom)]]" on-transitionend="_onBarTransitionEnd"></div>
 182
 183       </div>
 184
 185     </div>
 186
 187     <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown"></paper-icon-button>
 188
 189   </template>
 190
 191 </dom-module>
 192
 193 <script src="paper-tabs-extracted.js"></script></body></html>