| OLD | NEW |
| (Empty) |
| 1 paper-tabs | |
| 2 ============ | |
| 3 | |
| 4 `paper-tabs` makes it easy to explore and switch between different views or func
tional 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 ``` | |
| OLD | NEW |