4
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8
Code distributed by Google as part of the polymer project is also
9
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
15
<title>paper-tabs demo</title>
17
<meta charset="utf-8">
18
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
20
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
22
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
23
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
24
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
25
<link rel="import" href="../../iron-pages/iron-pages.html">
26
<link rel="import" href="../../paper-toolbar/paper-toolbar.html">
27
<link rel="import" href="../paper-tab.html">
28
<link rel="import" href="../paper-tabs.html">
30
<style is="custom-style" include="demo-pages-shared-styles">
35
paper-tabs, paper-toolbar {
36
background-color: var(--paper-blue-900);
44
<div id="container" class="vertical-section-container centered">
46
<h3>Plain <code>paper-tabs</code>.</h3>
49
<paper-tabs selected="0">
50
<paper-tab>ITEM ONE</paper-tab>
51
<paper-tab>ITEM TWO</paper-tab>
52
<paper-tab>ITEM THREE</paper-tab>
57
<h3>The <code>no-bar</code> attribute disables the selection bar.</h3>
60
<style is="custom-style">
61
paper-tabs[no-bar] paper-tab.iron-selected {
66
<paper-tabs id="plain-tabs" selected="0" no-bar>
67
<paper-tab>ITEM ONE</paper-tab>
68
<paper-tab>ITEM TWO</paper-tab>
69
<paper-tab>ITEM THREE</paper-tab>
75
The <code>no-slide</code> attribute prevents the selection bar from
76
animating when the selection changes.
80
<paper-tabs selected="0" no-slide>
81
<paper-tab>ITEM ONE</paper-tab>
82
<paper-tab>ITEM TWO</paper-tab>
83
<paper-tab>ITEM THREE</paper-tab>
89
The <code>noink</code> attribute disables the ink ripple animation seen
90
when the user activates a tab (by clicking, tapping, etc.).
94
<paper-tabs selected="0" noink>
95
<paper-tab>ITEM ONE</paper-tab>
96
<paper-tab>ITEM TWO</paper-tab>
97
<paper-tab>ITEM THREE</paper-tab>
103
The <code>scrollable</code> attribute causes the tabs to scroll, rather
104
than compress, when there is not enough space. Arrow buttons appear when
105
any of the tabs are not completely visible.
109
<paper-tabs selected="0" scrollable>
110
<paper-tab>NUMBER ONE ITEM</paper-tab>
111
<paper-tab>ITEM TWO</paper-tab>
112
<paper-tab>THE THIRD ITEM</paper-tab>
113
<paper-tab>THE ITEM FOUR</paper-tab>
114
<paper-tab>FIFTH</paper-tab>
115
<paper-tab>THE SIXTH TAB</paper-tab>
116
<paper-tab>NUMBER SEVEN</paper-tab>
117
<paper-tab>EIGHT</paper-tab>
118
<paper-tab>NUMBER NINE</paper-tab>
119
<paper-tab>THE TENTH</paper-tab>
120
<paper-tab>THE ITEM ELEVEN</paper-tab>
121
<paper-tab>TWELFTH ITEM</paper-tab>
127
Tab layout is effected by the writing direction of the surrounding area.
132
<paper-tabs selected="0">
133
<paper-tab>ITEM ONE</paper-tab>
134
<paper-tab>ITEM TWO</paper-tab>
135
<paper-tab>ITEM THREE</paper-tab>
138
<paper-tabs selected="0" scrollable>
139
<paper-tab>NUMBER ONE ITEM</paper-tab>
140
<paper-tab>ITEM TWO</paper-tab>
141
<paper-tab>THE THIRD ITEM</paper-tab>
142
<paper-tab>THE ITEM FOUR</paper-tab>
143
<paper-tab>FIFTH</paper-tab>
144
<paper-tab>THE SIXTH TAB</paper-tab>
145
<paper-tab>NUMBER SEVEN</paper-tab>
146
<paper-tab>EIGHT</paper-tab>
147
<paper-tab>NUMBER NINE</paper-tab>
148
<paper-tab>THE TENTH</paper-tab>
149
<paper-tab>THE ITEM ELEVEN</paper-tab>
150
<paper-tab>TWELFTH ITEM</paper-tab>
157
Use the <code>align-bottom</code> attribute when your tabs are
158
positioned below the content they control. The selection bar will be
159
shown at the top of the tabs.
163
<paper-tabs selected="0" align-bottom>
164
<paper-tab>ITEM ONE</paper-tab>
165
<paper-tab>ITEM TWO</paper-tab>
166
<paper-tab>ITEM THREE</paper-tab>
172
Use the <code>link</code> attribute when a <code>paper-tab</code>
173
contains a link. The link will fill the entire tab. <code>paper-tabs</code>
174
implements its own tabindexing and keyboard focus patterns so an anchor
175
placed inside should set <code>tabindex="-1"</code>.
179
<style is="custom-style">
181
/* These mixins (from iron-flex-layout) center the link text. */
182
@apply(--layout-horizontal);
183
@apply(--layout-center-center);
185
text-decoration: none;
189
<paper-tabs selected="0">
191
<a href="#item1" tabindex="-1">ITEM ONE</a>
194
<a href="#item2" tabindex="-1">ITEM TWO</a>
197
<a href="#item3" tabindex="-1">ITEM THREE</a>
204
Tabs can be used in a <code>paper-toolbar</code>.
208
<style is="custom-style">
210
--paper-toolbar-background: var(--paper-blue-900);
214
/* This mixin (from iron-flex-layout) aligns the tabs to the
215
bottom of the toolbar. */
216
@apply(--layout-self-end);
220
<paper-toolbar class="tall">
221
<paper-tabs selected="0" class="bottom self-end" style="width: 300px;">
222
<paper-tab>ITEM ONE</paper-tab>
223
<paper-tab>ITEM TWO</paper-tab>
230
Use <code>autoselect</code> to enable automatic tab selection.
234
<paper-tabs selected="0" autoselect>
235
<paper-tab>ITEM ONE</paper-tab>
236
<paper-tab>ITEM TWO</paper-tab>
237
<paper-tab>ITEM THREE</paper-tab>
243
Use <code>autoselect-delay</code> to adjust the delay between the last
244
keyup event and when the tab is automatically selected (when
245
<code>autoselect</code> is true).
250
<code>autoselect-delay="0"</code>
252
<paper-tabs selected="0" no-slide autoselect autoselect-delay="0">
253
<paper-tab>ITEM ONE</paper-tab>
254
<paper-tab>ITEM TWO</paper-tab>
255
<paper-tab>ITEM THREE</paper-tab>
259
<code>autoselect-delay="1000"</code>
261
<paper-tabs selected="0" autoselect autoselect-delay="1000">
262
<paper-tab>ITEM ONE</paper-tab>
263
<paper-tab>ITEM TWO</paper-tab>
264
<paper-tab>ITEM THREE</paper-tab>
270
Nested templates are not supported in IE, meaning they can't be used in a
271
demo-snippet. See Polymer/polymer#2495 for more details.
274
<h3>J. Bound Selection</h3>
277
<template is="dom-bind">
278
<h2>Current Tab: <span>[[selected]]</span></h2>
279
<paper-tabs selected="{{selected}}">
280
<paper-tab>ITEM ONE</paper-tab>
281
<paper-tab>ITEM TWO</paper-tab>
282
<paper-tab>ITEM THREE</paper-tab>
288
<h3>K. Controlling content</h3>
291
<style is="custom-style">
293
border: 1px solid #ccc;
299
<template is="dom-bind">
300
<paper-tabs selected="{{selected}}">
301
<paper-tab>ITEM ONE</paper-tab>
302
<paper-tab>ITEM TWO</paper-tab>
303
<paper-tab>ITEM THREE</paper-tab>
305
<iron-pages selected="{{selected}}">
306
<div>CONTENT ONE</div>
307
<div>CONTENT TWO</div>
308
<div>CONTENT THREE</div>