third_party/polymer/v1_0/components-chromium/paper-tabs/README.md

   1 paper-tabs
   2 ============
   3
   4 `paper-tabs` makes it easy to explore and switch between different views or functional aspects of
   5 an app, or to browse categorized data sets.
   6
   7 Use `selected` property to get or set the selected tab.
   8
   9 Example:
  10
  11 ```html
  12 <paper-tabs selected="0">
  13   <paper-tab>TAB 1</paper-tab>
  14   <paper-tab>TAB 2</paper-tab>
  15   <paper-tab>TAB 3</paper-tab>
  16 </paper-tabs>
  17 ```
  18
  19 See <a href="#paper-tab">paper-tab</a> for more information about
  20 `paper-tab`.
  21
  22 A common usage for `paper-tabs` is to use it along with `iron-pages` to switch
  23 between different views.
  24
  25 ```html
  26 <paper-tabs selected="{{selected}}">
  27   <paper-tab>Tab 1</paper-tab>
  28   <paper-tab>Tab 2</paper-tab>
  29   <paper-tab>Tab 3</paper-tab>
  30 </paper-tabs>
  31
  32 <iron-pages selected="{{selected}}">
  33   <div>Page 1</div>
  34   <div>Page 2</div>
  35   <div>Page 3</div>
  36 </iron-pages>
  37 ```
  38
  39 To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>`
  40 element in `paper-tab`.
  41
  42 Example:
  43
  44 ```html
  45 <paper-tabs selected="0">
  46   <paper-tab link>
  47     <a href="#link1" class="horizontal center-center layout">TAB ONE</a>
  48   </paper-tab>
  49   <paper-tab link>
  50     <a href="#link2" class="horizontal center-center layout">TAB TWO</a>
  51   </paper-tab>
  52   <paper-tab link>
  53     <a href="#link3" class="horizontal center-center layout">TAB THREE</a>
  54   </paper-tab>
  55 </paper-tabs>
  56 ```