Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(939)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_1.0.4/bower_components/paper-tabs/demo/index.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « polymer_1.0.4/bower_components/paper-tabs/bower.json ('k') | polymer_1.0.4/bower_components/paper-tabs/hero.svg » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!doctype html>
2 <!--
3 @license
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.g ithub.io/LICENSE
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS
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/PATEN TS
10 -->
11
12 <html>
13 <head>
14
15 <title>paper-tabs</title>
16
17 <meta charset="utf-8">
18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia l-scale=1, user-scalable=yes">
19
20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21
22 <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.htm l">
23
24 <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
25
26 <link rel="import" href="../paper-tabs.html">
27 <link rel="import" href="../paper-tab.html">
28 <style is="custom-style">
29 :root {
30 --paper-toolbar-background: #00bcd4;
31 }
32
33 body {
34 font-family: sans-serif;
35 margin: 0;
36 padding: 24px;
37 color: #333;
38 }
39
40 paper-tabs, paper-toolbar {
41 background-color: #00bcd4;
42 color: #fff;
43 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
44 }
45
46 paper-toolbar paper-tabs {
47 box-shadow: none;
48 }
49
50 paper-tabs[noink][no-bar] paper-tab.iron-selected {
51 color: #ffff8d;
52 }
53
54 paper-tabs[alignBottom] {
55 box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
56 }
57
58 h3 {
59 font-size: 16px;
60 font-weight: 400;
61 padding-top: 20px;
62 }
63
64 </style>
65
66 </head>
67 <body>
68
69 <h3>A. No ink effect and no sliding bar</h3>
70
71 <paper-tabs selected="0" noink no-bar>
72
73 <paper-tab>ITEM ONE</paper-tab>
74 <paper-tab>ITEM TWO</paper-tab>
75 <paper-tab>ITEM THREE</paper-tab>
76
77 </paper-tabs>
78
79 <h3>B. The bottom bar appears to indicate the selected tab, but without slid ing effect.</h3>
80
81 <paper-tabs selected="0" noink no-slide>
82
83 <paper-tab>ITEM ONE</paper-tab>
84 <paper-tab>ITEM TWO</paper-tab>
85 <paper-tab>ITEM THREE</paper-tab>
86
87 </paper-tabs>
88
89 <h3>C. The bar slides to the selected tab</h3>
90
91 <paper-tabs selected="0" noink>
92
93 <paper-tab>ITEM ONE</paper-tab>
94 <paper-tab>ITEM TWO</paper-tab>
95 <paper-tab>ITEM THREE</paper-tab>
96
97 </paper-tabs>
98
99 <h3>D. Inky Tabs</h3>
100
101 <paper-tabs selected="0">
102
103 <paper-tab>ITEM ONE</paper-tab>
104 <paper-tab>ITEM TWO</paper-tab>
105 <paper-tab>ITEM THREE</paper-tab>
106
107 </paper-tabs>
108
109 <h3>E. Scrollable Tabs</h3>
110
111 <paper-tabs id="scrollableTabs" selected="0" scrollable>
112
113 <paper-tab>NUMBER ONE ITEM</paper-tab>
114 <paper-tab>ITEM TWO</paper-tab>
115 <paper-tab>THE THIRD ITEM</paper-tab>
116 <paper-tab>THE ITEM FOUR</paper-tab>
117 <paper-tab>FIFTH</paper-tab>
118 <paper-tab>THE SIXTH TAB</paper-tab>
119 <paper-tab>NUMBER SEVEN</paper-tab>
120 <paper-tab>EIGHT</paper-tab>
121 <paper-tab>NUMBER NINE</paper-tab>
122 <paper-tab>THE TENTH</paper-tab>
123 <paper-tab>THE ITEM ELEVEN</paper-tab>
124 <paper-tab>TWELFTH ITEM</paper-tab>
125
126 </paper-tabs>
127
128 <h3>F. Link Tabs</h3>
129
130 <paper-tabs selected="0">
131
132 <paper-tab link><a href="#item1" class="horizontal center-center layout">I TEM ONE</a></paper-tab>
133 <paper-tab link><a href="#item2" class="horizontal center-center layout">I TEM TWO</a></paper-tab>
134 <paper-tab link><a href="#item3" class="horizontal center-center layout">I TEM THREE</a></paper-tab>
135
136 </paper-tabs>
137
138 <h3>G. Tabs in Toolbar</h3>
139
140 <paper-toolbar class="tall">
141
142 <paper-tabs selected="0" class="bottom self-end" style="width: 300px;">
143
144 <paper-tab>ITEM ONE</paper-tab>
145 <paper-tab>ITEM TWO</paper-tab>
146
147 </paper-tabs>
148
149 <div class="bottom flex"></div>
150
151 </paper-toolbar>
152
153 <h3>H. Tabs aligned to bottom</h3>
154
155 <paper-tabs selected="0" alignBottom>
156
157 <paper-tab>ITEM ONE</paper-tab>
158 <paper-tab>ITEM TWO</paper-tab>
159 <paper-tab>ITEM THREE</paper-tab>
160
161 </paper-tabs>
162
163 <h3>I. Bound Selection</h3>
164
165 <template is="dom-bind">
166 <h2>Current Tab: <span>[[selected]]</span></h2>
167 <paper-tabs selected="{{selected}}">
168
169 <paper-tab>ITEM ONE</paper-tab>
170 <paper-tab>ITEM TWO</paper-tab>
171 <paper-tab>ITEM THREE</paper-tab>
172
173 </paper-tabs>
174 </template>
175
176 </body>
177 </html>
OLDNEW
« no previous file with comments | « polymer_1.0.4/bower_components/paper-tabs/bower.json ('k') | polymer_1.0.4/bower_components/paper-tabs/hero.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698