1<!doctype html> 2<!-- 3@license 4Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11 12<html> 13 <head> 14 15 <title>paper-tabs demo</title> 16 17 <meta charset="utf-8"> 18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 19 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 21 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"> 29 30 <style is="custom-style" include="demo-pages-shared-styles"> 31 #container { 32 max-width: 600px; 33 } 34 35 paper-tabs, paper-toolbar { 36 background-color: var(--paper-blue-900); 37 color: #fff; 38 } 39 </style> 40 41 </head> 42 <body unresolved> 43 44 <div id="container" class="vertical-section-container centered"> 45 46 <h3>Plain <code>paper-tabs</code>.</h3> 47 <demo-snippet> 48 <template> 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> 53 </paper-tabs> 54 </template> 55 </demo-snippet> 56 57 <h3>The <code>no-bar</code> attribute disables the selection bar.</h3> 58 <demo-snippet> 59 <template> 60 <style is="custom-style"> 61 paper-tabs[no-bar] paper-tab.iron-selected { 62 color: #ffff8d; 63 } 64 </style> 65 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> 70 </paper-tabs> 71 </template> 72 </demo-snippet> 73 74 <h3> 75 The <code>no-slide</code> attribute prevents the selection bar from 76 animating when the selection changes. 77 </h3> 78 <demo-snippet> 79 <template> 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> 84 </paper-tabs> 85 </template> 86 </demo-snippet> 87 88 <h3> 89 The <code>noink</code> attribute disables the ink ripple animation seen 90 when the user activates a tab (by clicking, tapping, etc.). 91 </h3> 92 <demo-snippet> 93 <template> 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> 98 </paper-tabs> 99 </template> 100 </demo-snippet> 101 102 <h3> 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. 106 </h3> 107 <demo-snippet> 108 <template> 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> 122 </paper-tabs> 123 </template> 124 </demo-snippet> 125 126 <h3> 127 The <code>fit-container</code> attribute causes scrollable tabs to 128 stretch to fit their container if the tabs don't need to scroll. 129 </h3> 130 <demo-snippet> 131 <template> 132 <paper-tabs selected="0" scrollable fit-container> 133 <paper-tab>NUMBER ONE ITEM</paper-tab> 134 <paper-tab>ITEM TWO</paper-tab> 135 <paper-tab>THE THIRD ITEM</paper-tab> 136 </paper-tabs> 137 <br> 138 <paper-tabs selected="0" scrollable fit-container style="width: 50%;"> 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-tabs> 143 </template> 144 </demo-snippet> 145 146 <h3> 147 Tab layout is affected by the writing direction of the surrounding area. 148 </h3> 149 <demo-snippet> 150 <template> 151 <div dir="rtl"> 152 <paper-tabs selected="0"> 153 <paper-tab>ITEM ONE</paper-tab> 154 <paper-tab>ITEM TWO</paper-tab> 155 <paper-tab>ITEM THREE</paper-tab> 156 </paper-tabs> 157 158 <paper-tabs selected="0" scrollable> 159 <paper-tab>NUMBER ONE ITEM</paper-tab> 160 <paper-tab>ITEM TWO</paper-tab> 161 <paper-tab>THE THIRD ITEM</paper-tab> 162 <paper-tab>THE ITEM FOUR</paper-tab> 163 <paper-tab>FIFTH</paper-tab> 164 <paper-tab>THE SIXTH TAB</paper-tab> 165 <paper-tab>NUMBER SEVEN</paper-tab> 166 <paper-tab>EIGHT</paper-tab> 167 <paper-tab>NUMBER NINE</paper-tab> 168 <paper-tab>THE TENTH</paper-tab> 169 <paper-tab>THE ITEM ELEVEN</paper-tab> 170 <paper-tab>TWELFTH ITEM</paper-tab> 171 </paper-tabs> 172 </div> 173 </template> 174 </demo-snippet> 175 176 <h3> 177 Use the <code>align-bottom</code> attribute when your tabs are 178 positioned below the content they control. The selection bar will be 179 shown at the top of the tabs. 180 </h3> 181 <demo-snippet> 182 <template> 183 <paper-tabs selected="0" align-bottom> 184 <paper-tab>ITEM ONE</paper-tab> 185 <paper-tab>ITEM TWO</paper-tab> 186 <paper-tab>ITEM THREE</paper-tab> 187 </paper-tabs> 188 </template> 189 </demo-snippet> 190 191 <h3> 192 Use the <code>link</code> attribute when a <code>paper-tab</code> 193 contains a link. The link will fill the entire tab. <code>paper-tabs</code> 194 implements its own tabindexing and keyboard focus patterns so an anchor 195 placed inside should set <code>tabindex="-1"</code>. 196 </h3> 197 <demo-snippet> 198 <template> 199 <style is="custom-style"> 200 paper-tab[link] a { 201 /* These mixins (from iron-flex-layout) center the link text. */ 202 @apply(--layout-horizontal); 203 @apply(--layout-center-center); 204 color: #fff; 205 text-decoration: none; 206 } 207 </style> 208 209 <paper-tabs selected="0"> 210 <paper-tab link> 211 <a href="#item1" tabindex="-1">ITEM ONE</a> 212 </paper-tab> 213 <paper-tab link> 214 <a href="#item2" tabindex="-1">ITEM TWO</a> 215 </paper-tab> 216 <paper-tab link> 217 <a href="#item3" tabindex="-1">ITEM THREE</a> 218 </paper-tab> 219 </paper-tabs> 220 </template> 221 </demo-snippet> 222 223 <h3> 224 Tabs can be used in a <code>paper-toolbar</code>. 225 </h3> 226 <demo-snippet> 227 <template> 228 <style is="custom-style"> 229 paper-toolbar { 230 --paper-toolbar-background: var(--paper-blue-900); 231 } 232 233 .self-end { 234 /* This mixin (from iron-flex-layout) aligns the tabs to the 235 bottom of the toolbar. */ 236 @apply(--layout-self-end); 237 } 238 </style> 239 240 <paper-toolbar class="tall"> 241 <paper-tabs selected="0" class="bottom self-end" style="width: 300px;"> 242 <paper-tab>ITEM ONE</paper-tab> 243 <paper-tab>ITEM TWO</paper-tab> 244 </paper-tabs> 245 </paper-toolbar> 246 </template> 247 </demo-snippet> 248 249 <h3> 250 Use <code>autoselect</code> to enable automatic tab selection. 251 </h3> 252 <demo-snippet> 253 <template> 254 <paper-tabs selected="0" autoselect> 255 <paper-tab>ITEM ONE</paper-tab> 256 <paper-tab>ITEM TWO</paper-tab> 257 <paper-tab>ITEM THREE</paper-tab> 258 </paper-tabs> 259 </template> 260 </demo-snippet> 261 262 <h3> 263 Use <code>autoselect-delay</code> to adjust the delay between the last 264 keyup event and when the tab is automatically selected (when 265 <code>autoselect</code> is true). 266 </h3> 267 <demo-snippet> 268 <template> 269 <h4> 270 <code>autoselect-delay="0"</code> 271 </h4> 272 <paper-tabs selected="0" no-slide autoselect autoselect-delay="0"> 273 <paper-tab>ITEM ONE</paper-tab> 274 <paper-tab>ITEM TWO</paper-tab> 275 <paper-tab>ITEM THREE</paper-tab> 276 </paper-tabs> 277 278 <h4> 279 <code>autoselect-delay="1000"</code> 280 </h4> 281 <paper-tabs selected="0" autoselect autoselect-delay="1000"> 282 <paper-tab>ITEM ONE</paper-tab> 283 <paper-tab>ITEM TWO</paper-tab> 284 <paper-tab>ITEM THREE</paper-tab> 285 </paper-tabs> 286 </template> 287 </demo-snippet> 288 289 <!-- 290 Nested templates are not supported in IE, meaning they can't be used in a 291 demo-snippet. See Polymer/polymer#2495 for more details. 292 --> 293 <!-- 294 <h3>J. Bound Selection</h3> 295 <demo-snippet> 296 <template> 297 <template is="dom-bind"> 298 <h2>Current Tab: <span>[[selected]]</span></h2> 299 <paper-tabs selected="{{selected}}"> 300 <paper-tab>ITEM ONE</paper-tab> 301 <paper-tab>ITEM TWO</paper-tab> 302 <paper-tab>ITEM THREE</paper-tab> 303 </paper-tabs> 304 </template> 305 </template> 306 </demo-snippet> 307 308 <h3>K. Controlling content</h3> 309 <demo-snippet> 310 <template> 311 <style is="custom-style"> 312 iron-pages { 313 border: 1px solid #ccc; 314 border-top: none; 315 padding: 8px; 316 } 317 </style> 318 319 <template is="dom-bind"> 320 <paper-tabs selected="{{selected}}"> 321 <paper-tab>ITEM ONE</paper-tab> 322 <paper-tab>ITEM TWO</paper-tab> 323 <paper-tab>ITEM THREE</paper-tab> 324 </paper-tabs> 325 <iron-pages selected="{{selected}}"> 326 <div>CONTENT ONE</div> 327 <div>CONTENT TWO</div> 328 <div>CONTENT THREE</div> 329 </iron-pages> 330 </template> 331 </template> 332 </demo-snippet> 333 --> 334 335 </div> 336 337 </body> 338</html> 339