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 |