WebCompDev / COMPONENTS

Blame view

bower_components/paper-tabs/demo/index.html 4.87 KB
Edit Raw Normal View History
73bcce88   luigser   COMPONENTS 
1
2
3
4
 
  <!doctype html>
  <!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
a1a3bc73   Luigi Serra   graphs updates 
5
6
7
 
  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
73bcce88   luigser   COMPONENTS 
8
 
  Code distributed by Google as part of the polymer project is also
a1a3bc73   Luigi Serra   graphs updates 
9
 
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
73bcce88   luigser   COMPONENTS 
10
11
12
13
14
 
  -->
  
  <html>
    <head>
a1a3bc73   Luigi Serra   graphs updates 
15
 
      <title>paper-tabs demo</title>
73bcce88   luigser   COMPONENTS 
16
17
18
19
20
21
 
  
      <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>
a1a3bc73   Luigi Serra   graphs updates 
22
 
      <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
73bcce88   luigser   COMPONENTS 
23
24
25
26
 
      <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  
      <link rel="import" href="../paper-tabs.html">
      <link rel="import" href="../paper-tab.html">
a1a3bc73   Luigi Serra   graphs updates 
27
28
29
30
31
 
  
      <link rel="import" href="tabs-with-content-example.html">
      <link rel="import" href="paper-tabs-demo-styles.html">
  
      <style is="custom-style" include="paper-tabs-demo-styles"></style>
73bcce88   luigser   COMPONENTS 
32
33
 
  
    </head>
a1a3bc73   Luigi Serra   graphs updates 
34
35
36
37
38
39
40
41
42
43
44
45
 
    <style is="custom-style">
      .link {
        @apply(--layout-horizontal);
        @apply(--layout-center-center);
      }
      .flex {
        @apply(--layout-flex);
      }
      .self-end {
        @apply(--layout-self-end);
      }
    </style>
73bcce88   luigser   COMPONENTS 
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
    <body unresolved>
  
      <h3>A. No ink effect and no sliding bar</h3>
  
      <paper-tabs selected="0" noink no-bar>
  
        <paper-tab>ITEM ONE</paper-tab>
        <paper-tab>ITEM TWO</paper-tab>
        <paper-tab>ITEM THREE</paper-tab>
  
      </paper-tabs>
  
      <h3>B. The bottom bar appears to indicate the selected tab, but without sliding effect.</h3>
  
      <paper-tabs selected="0" noink no-slide>
  
        <paper-tab>ITEM ONE</paper-tab>
        <paper-tab>ITEM TWO</paper-tab>
        <paper-tab>ITEM THREE</paper-tab>
  
      </paper-tabs>
  
      <h3>C. The bar slides to the selected tab</h3>
  
      <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>
  
      <h3>D. Inky Tabs</h3>
  
      <paper-tabs selected="0">
  
        <paper-tab>ITEM ONE</paper-tab>
        <paper-tab>ITEM TWO</paper-tab>
        <paper-tab>ITEM THREE</paper-tab>
  
      </paper-tabs>
  
      <h3>E. Scrollable Tabs</h3>
  
      <paper-tabs id="scrollableTabs" 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>
a1a3bc73   Luigi Serra   graphs updates 
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
      <h3>F. Scrollable tabs within right-to-left region</h3>
  
      <div dir="rtl">
        <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>
  
      <h3>G. Link Tabs</h3>
73bcce88   luigser   COMPONENTS 
129
130
131
 
  
      <paper-tabs selected="0">
a1a3bc73   Luigi Serra   graphs updates 
132
133
134
 
        <paper-tab link><a href="#item1" class="link">ITEM ONE</a></paper-tab>
        <paper-tab link><a href="#item2" class="link">ITEM TWO</a></paper-tab>
        <paper-tab link><a href="#item3" class="link">ITEM THREE</a></paper-tab>
73bcce88   luigser   COMPONENTS 
135
136
137
 
  
      </paper-tabs>
a1a3bc73   Luigi Serra   graphs updates 
138
 
      <h3>H. Tabs in Toolbar</h3>
73bcce88   luigser   COMPONENTS 
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
  
      <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>
  
        <div class="bottom flex"></div>
  
      </paper-toolbar>
a1a3bc73   Luigi Serra   graphs updates 
153
 
      <h3>I. Tabs aligned to bottom</h3>
73bcce88   luigser   COMPONENTS 
154
155
156
157
158
159
160
161
162
 
  
      <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>
a1a3bc73   Luigi Serra   graphs updates 
163
 
      <h3>J. Bound Selection</h3>
73bcce88   luigser   COMPONENTS 
164
165
166
167
168
169
170
171
172
173
174
175
 
  
      <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>
a1a3bc73   Luigi Serra   graphs updates 
176
177
178
179
 
      <h3>K. Controlling content</h3>
  
      <tabs-with-content-example></tabs-with-content-example>
73bcce88   luigser   COMPONENTS 
180
181
 
    </body>
  </html>