aboutsummaryrefslogtreecommitdiff
path: root/catapult/third_party/polymer/components/paper-tabs/demo/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'catapult/third_party/polymer/components/paper-tabs/demo/index.html')
-rw-r--r--catapult/third_party/polymer/components/paper-tabs/demo/index.html338
1 files changed, 338 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-tabs/demo/index.html b/catapult/third_party/polymer/components/paper-tabs/demo/index.html
new file mode 100644
index 00000000..74e20df7
--- /dev/null
+++ b/catapult/third_party/polymer/components/paper-tabs/demo/index.html
@@ -0,0 +1,338 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<html>
+ <head>
+
+ <title>paper-tabs demo</title>
+
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+ <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+ <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+ <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+ <link rel="import" href="../../iron-pages/iron-pages.html">
+ <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+ <link rel="import" href="../paper-tab.html">
+ <link rel="import" href="../paper-tabs.html">
+
+ <style is="custom-style" include="demo-pages-shared-styles">
+ #container {
+ max-width: 600px;
+ }
+
+ paper-tabs, paper-toolbar {
+ background-color: var(--paper-blue-900);
+ color: #fff;
+ }
+ </style>
+
+ </head>
+ <body unresolved>
+
+ <div id="container" class="vertical-section-container centered">
+
+ <h3>Plain <code>paper-tabs</code>.</h3>
+ <demo-snippet>
+ <template>
+ <paper-tabs selected="0">
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>The <code>no-bar</code> attribute disables the selection bar.</h3>
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ paper-tabs[no-bar] paper-tab.iron-selected {
+ color: #ffff8d;
+ }
+ </style>
+
+ <paper-tabs id="plain-tabs" selected="0" no-bar>
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ The <code>no-slide</code> attribute prevents the selection bar from
+ animating when the selection changes.
+ </h3>
+ <demo-snippet>
+ <template>
+ <paper-tabs selected="0" no-slide>
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ The <code>noink</code> attribute disables the ink ripple animation seen
+ when the user activates a tab (by clicking, tapping, etc.).
+ </h3>
+ <demo-snippet>
+ <template>
+ <paper-tabs selected="0" noink>
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ The <code>scrollable</code> attribute causes the tabs to scroll, rather
+ than compress, when there is not enough space. Arrow buttons appear when
+ any of the tabs are not completely visible.
+ </h3>
+ <demo-snippet>
+ <template>
+ <paper-tabs selected="0" scrollable>
+ <paper-tab>NUMBER ONE ITEM</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>THE THIRD ITEM</paper-tab>
+ <paper-tab>THE ITEM FOUR</paper-tab>
+ <paper-tab>FIFTH</paper-tab>
+ <paper-tab>THE SIXTH TAB</paper-tab>
+ <paper-tab>NUMBER SEVEN</paper-tab>
+ <paper-tab>EIGHT</paper-tab>
+ <paper-tab>NUMBER NINE</paper-tab>
+ <paper-tab>THE TENTH</paper-tab>
+ <paper-tab>THE ITEM ELEVEN</paper-tab>
+ <paper-tab>TWELFTH ITEM</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ The <code>fit-container</code> attribute causes scrollable tabs to
+ stretch to fit their container if the tabs don't need to scroll.
+ </h3>
+ <demo-snippet>
+ <template>
+ <paper-tabs selected="0" scrollable fit-container>
+ <paper-tab>NUMBER ONE ITEM</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>THE THIRD ITEM</paper-tab>
+ </paper-tabs>
+ <br>
+ <paper-tabs selected="0" scrollable fit-container style="width: 50%;">
+ <paper-tab>NUMBER ONE ITEM</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>THE THIRD ITEM</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ Tab layout is affected by the writing direction of the surrounding area.
+ </h3>
+ <demo-snippet>
+ <template>
+ <div dir="rtl">
+ <paper-tabs selected="0">
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ &nbsp;
+ <paper-tabs selected="0" scrollable>
+ <paper-tab>NUMBER ONE ITEM</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>THE THIRD ITEM</paper-tab>
+ <paper-tab>THE ITEM FOUR</paper-tab>
+ <paper-tab>FIFTH</paper-tab>
+ <paper-tab>THE SIXTH TAB</paper-tab>
+ <paper-tab>NUMBER SEVEN</paper-tab>
+ <paper-tab>EIGHT</paper-tab>
+ <paper-tab>NUMBER NINE</paper-tab>
+ <paper-tab>THE TENTH</paper-tab>
+ <paper-tab>THE ITEM ELEVEN</paper-tab>
+ <paper-tab>TWELFTH ITEM</paper-tab>
+ </paper-tabs>
+ </div>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ Use the <code>align-bottom</code> attribute when your tabs are
+ positioned below the content they control. The selection bar will be
+ shown at the top of the tabs.
+ </h3>
+ <demo-snippet>
+ <template>
+ <paper-tabs selected="0" align-bottom>
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ Use the <code>link</code> attribute when a <code>paper-tab</code>
+ contains a link. The link will fill the entire tab. <code>paper-tabs</code>
+ implements its own tabindexing and keyboard focus patterns so an anchor
+ placed inside should set <code>tabindex="-1"</code>.
+ </h3>
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ paper-tab[link] a {
+ /* These mixins (from iron-flex-layout) center the link text. */
+ @apply(--layout-horizontal);
+ @apply(--layout-center-center);
+ color: #fff;
+ text-decoration: none;
+ }
+ </style>
+
+ <paper-tabs selected="0">
+ <paper-tab link>
+ <a href="#item1" tabindex="-1">ITEM ONE</a>
+ </paper-tab>
+ <paper-tab link>
+ <a href="#item2" tabindex="-1">ITEM TWO</a>
+ </paper-tab>
+ <paper-tab link>
+ <a href="#item3" tabindex="-1">ITEM THREE</a>
+ </paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ Tabs can be used in a <code>paper-toolbar</code>.
+ </h3>
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ paper-toolbar {
+ --paper-toolbar-background: var(--paper-blue-900);
+ }
+
+ .self-end {
+ /* This mixin (from iron-flex-layout) aligns the tabs to the
+ bottom of the toolbar. */
+ @apply(--layout-self-end);
+ }
+ </style>
+
+ <paper-toolbar class="tall">
+ <paper-tabs selected="0" class="bottom self-end" style="width: 300px;">
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ </paper-tabs>
+ </paper-toolbar>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ Use <code>autoselect</code> to enable automatic tab selection.
+ </h3>
+ <demo-snippet>
+ <template>
+ <paper-tabs selected="0" autoselect>
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <h3>
+ Use <code>autoselect-delay</code> to adjust the delay between the last
+ keyup event and when the tab is automatically selected (when
+ <code>autoselect</code> is true).
+ </h3>
+ <demo-snippet>
+ <template>
+ <h4>
+ <code>autoselect-delay="0"</code>
+ </h4>
+ <paper-tabs selected="0" no-slide autoselect autoselect-delay="0">
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+
+ <h4>
+ <code>autoselect-delay="1000"</code>
+ </h4>
+ <paper-tabs selected="0" autoselect autoselect-delay="1000">
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ </template>
+ </demo-snippet>
+
+ <!--
+ Nested templates are not supported in IE, meaning they can't be used in a
+ demo-snippet. See Polymer/polymer#2495 for more details.
+ -->
+ <!--
+ <h3>J. Bound Selection</h3>
+ <demo-snippet>
+ <template>
+ <template is="dom-bind">
+ <h2>Current Tab: <span>[[selected]]</span></h2>
+ <paper-tabs selected="{{selected}}">
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ </template>
+ </template>
+ </demo-snippet>
+
+ <h3>K. Controlling content</h3>
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ iron-pages {
+ border: 1px solid #ccc;
+ border-top: none;
+ padding: 8px;
+ }
+ </style>
+
+ <template is="dom-bind">
+ <paper-tabs selected="{{selected}}">
+ <paper-tab>ITEM ONE</paper-tab>
+ <paper-tab>ITEM TWO</paper-tab>
+ <paper-tab>ITEM THREE</paper-tab>
+ </paper-tabs>
+ <iron-pages selected="{{selected}}">
+ <div>CONTENT ONE</div>
+ <div>CONTENT TWO</div>
+ <div>CONTENT THREE</div>
+ </iron-pages>
+ </template>
+ </template>
+ </demo-snippet>
+ -->
+
+ </div>
+
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-24 01:42:51 +0000