third_party/polymer/components-chromium/paper-tabs/paper-tabs.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 --><!--
   9 `paper-tabs` is a `core-selector` styled to look like tabs. Tabs make it easy to
  10 explore and switch between different views or functional aspects of an app, or
  11 to browse categorized data sets.
  12
  13 Use `selected` property to get or set the selected tab.
  14
  15 Example:
  16
  17     <paper-tabs selected="0">
  18       <paper-tab>TAB 1</paper-tab>
  19       <paper-tab>TAB 2</paper-tab>
  20       <paper-tab>TAB 3</paper-tab>
  21     </paper-tabs>
  22
  23 See <a href="#paper-tab">paper-tab</a> for more information about
  24 `paper-tab`.
  25
  26 A common usage for `paper-tabs` is to use it along with `core-pages` to switch
  27 between different views.
  28
  29     <paper-tabs selected="{{selected}}">
  30       <paper-tab>Tab 1</paper-tab>
  31       <paper-tab>Tab 2</paper-tab>
  32       <paper-tab>Tab 3</paper-tab>
  33     </paper-tabs>
  34
  35     <core-pages selected="{{selected}}">
  36       <div>Page 1</div>
  37       <div>Page 2</div>
  38       <div>Page 3</div>
  39     </core-pages>
  40
  41 `paper-tabs` adapt to mobile/narrow layout when there is a `core-narrow` class set
  42 on itself or any of its ancestors.
  43
  44 To use links in tabs, add `link` attribute to `paper-tabs` and put an `<a>`
  45 element in `paper-tab`.
  46
  47 Example:
  48
  49     <paper-tabs selected="0" link>
  50       <paper-tab>
  51         <a href="#link1" horizontal center-center layout>TAB ONE</a>
  52       </paper-tab>
  53       <paper-tab>
  54         <a href="#link2" horizontal center-center layout>TAB TWO</a>
  55       </paper-tab>
  56       <paper-tab>
  57         <a href="#link3" horizontal center-center layout>TAB THREE</a>
  58       </paper-tab>
  59     </paper-tabs>
  60
  61 Styling tabs:
  62
  63 To change the sliding bar color:
  64
  65     paper-tabs.pink::shadow #selectionBar {
  66       background-color: #ff4081;
  67     }
  68
  69 To change the ink ripple color:
  70
  71     paper-tabs.pink paper-tab::shadow #ink {
  72       color: #ff4081;
  73     }
  74
  75 @group Paper Elements
  76 @element paper-tabs
  77 @extends core-selector
  78 @homepage github.io
  79 --><html><head><link rel="import" href="../core-selector/core-selector.html">
  80 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
  81 <link rel="import" href="../core-resizable/core-resizable.html">
  82 <link rel="import" href="paper-tab.html">
  83
  84 </head><body><polymer-element name="paper-tabs" extends="core-selector" attributes="noink nobar noslide scrollable hideScrollButton" role="tablist" horizontal="" center="" layout="" assetpath="">
  85 <template>
  86
  87   <link rel="stylesheet" href="paper-tabs.css">
  88
  89   <div class="scroll-button" hidden?="{{!scrollable || hideScrollButton}}">
  90     <paper-icon-button icon="chevron-left" class="{{ {hidden: leftHidden} | tokenList }}" on-down="{{holdLeft}}" on-up="{{releaseHold}}"></paper-icon-button>
  91   </div>
  92
  93   <div id="tabsContainer" class="{{ {scrollable: scrollable} | tokenList }}" flex="" on-scroll="{{scroll}}" on-trackstart="{{trackStart}}">
  94
  95     <div id="tabsContent" horizontal="" layout?="{{!scrollable}}">
  96       <shadow></shadow>
  97       <div id="selectionBar" hidden?="{{nobar}}" on-transitionend="{{barTransitionEnd}}"></div>
  98     </div>
  99
 100   </div>
 101
 102   <div class="scroll-button" hidden?="{{!scrollable || hideScrollButton}}">
 103     <paper-icon-button icon="chevron-right" class="{{ {hidden: rightHidden} | tokenList }}" on-down="{{holdRight}}" on-up="{{releaseHold}}"></paper-icon-button>
 104   </div>
 105
 106 </template>
 107
 108 </polymer-element>
 109 <script charset="utf-8" src="paper-tabs-extracted.js"></script></body></html>