WebCompDev / COMPONENTS

Blame view

bower_components/paper-tabs/demo/index.html 4.48 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.
c5169e0e   Renato De Donato   a new hope 
5
6
7
 
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
  The complete set of authors may be found at http://polymer.github.io/AUTHORS
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
73bcce88   luigser   COMPONENTS 
8
 
  Code distributed by Google as part of the polymer project is also
c5169e0e   Renato De Donato   a new hope 
9
 
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
73bcce88   luigser   COMPONENTS 
10
11
12
13
14
 
  -->
  
  <html>
    <head>
c5169e0e   Renato De Donato   a new hope 
15
 
      <title>paper-tabs</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>
c5169e0e   Renato De Donato   a new hope 
22
23
 
      <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
73bcce88   luigser   COMPONENTS 
24
25
26
27
 
      <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  
      <link rel="import" href="../paper-tabs.html">
      <link rel="import" href="../paper-tab.html">
c5169e0e   Renato De Donato   a new hope 
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
      <style is="custom-style">
        :root {
          --paper-toolbar-background: #00bcd4;
        }
  
        body {
          font-family: sans-serif;
          margin: 0;
          padding: 24px;
          color: #333;
        }
  
        paper-tabs, paper-toolbar {
          background-color: #00bcd4;
          color: #fff;
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
        }
  
        paper-toolbar paper-tabs {
          box-shadow: none;
        }
  
        paper-tabs[noink][no-bar] paper-tab.iron-selected {
          color: #ffff8d;
        }
  
        paper-tabs[align-bottom] {
          box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
        }
  
        h3 {
          font-size: 16px;
          font-weight: 400;
          padding-top: 20px;
        }
  
      </style>
73bcce88   luigser   COMPONENTS 
65
66
 
  
    </head>
73bcce88   luigser   COMPONENTS 
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
    <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>
c5169e0e   Renato De Donato   a new hope 
128
 
      <h3>F. Link Tabs</h3>
73bcce88   luigser   COMPONENTS 
129
130
131
 
  
      <paper-tabs selected="0">
c5169e0e   Renato De Donato   a new hope 
132
133
134
 
        <paper-tab link><a href="#item1" class="horizontal center-center layout">ITEM ONE</a></paper-tab>
        <paper-tab link><a href="#item2" class="horizontal center-center layout">ITEM TWO</a></paper-tab>
        <paper-tab link><a href="#item3" class="horizontal center-center layout">ITEM THREE</a></paper-tab>
73bcce88   luigser   COMPONENTS 
135
136
137
 
  
      </paper-tabs>
c5169e0e   Renato De Donato   a new hope 
138
 
      <h3>G. 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>
c5169e0e   Renato De Donato   a new hope 
153
 
      <h3>H. 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>
c5169e0e   Renato De Donato   a new hope 
163
 
      <h3>I. 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>
73bcce88   luigser   COMPONENTS 
176
177
 
    </body>
  </html>