OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <!-- | 2 <!-- |
3 @license | 3 @license |
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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.txt | 5 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 7 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
8 Code distributed by Google as part of the polymer project is also | 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.txt | 9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
10 --> | 10 --> |
11 <html> | 11 <html> |
12 <head> | 12 <head> |
13 | 13 |
14 <meta charset="utf-8"> | 14 <meta charset="utf-8"> |
15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-
scale=1, user-scalable=yes"> | 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-
scale=1, user-scalable=yes"> |
17 | 17 |
18 <title>paper-item demo</title> | 18 <title>paper-item demo</title> |
19 | 19 |
20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
21 | 21 |
22 <link rel="import" href="../../iron-icon/iron-icon.html"> | 22 <link rel="import" href="../../iron-icon/iron-icon.html"> |
23 <link rel="import" href="../../iron-icons/iron-icons.html"> | 23 <link rel="import" href="../../iron-icons/iron-icons.html"> |
24 <link rel="import" href="../../iron-icons/communication-icons.html"> | 24 <link rel="import" href="../../iron-icons/communication-icons.html"> |
25 <link rel="import" href="../../paper-checkbox/paper-checkbox.html"> | 25 <link rel="import" href="../../paper-checkbox/paper-checkbox.html"> |
| 26 <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> |
26 <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html"> | 27 <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html"> |
27 <link rel="import" href="../paper-icon-item.html"> | 28 <link rel="import" href="../paper-icon-item.html"> |
28 <link rel="import" href="../paper-item.html"> | 29 <link rel="import" href="../paper-item.html"> |
29 <link rel="import" href="../paper-item-body.html"> | 30 <link rel="import" href="../paper-item-body.html"> |
30 <link rel="import" href="../../paper-styles/paper-styles.html"> | 31 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> |
31 <link rel="import" href="../../paper-styles/demo-pages.html"> | 32 <link rel="import" href="../../paper-styles/demo-pages.html"> |
32 | |
33 <style is="custom-style"> | 33 <style is="custom-style"> |
34 .list { | 34 .list { |
| 35 @apply(--layout-vertical); |
| 36 |
35 padding-top: 12px; | 37 padding-top: 12px; |
36 background-color: white; | 38 background-color: white; |
37 display: inline-block; | |
38 width: 240px; | 39 width: 240px; |
39 height: 228px; | 40 height: 228px; |
40 margin: 12px; | 41 margin: 12px; |
41 @apply(--shadow-elevation-2dp); | 42 @apply(--shadow-elevation-2dp); |
42 } | 43 } |
43 | 44 |
44 .short { | 45 .short { |
45 padding-top: 12px; | 46 padding-top: 12px; |
46 height: 216px; | 47 height: 216px; |
47 } | 48 } |
(...skipping 16 matching lines...) Expand all Loading... |
64 } | 65 } |
65 .red { | 66 .red { |
66 background-color: var(--paper-red-300); | 67 background-color: var(--paper-red-300); |
67 } | 68 } |
68 .orange { | 69 .orange { |
69 background-color: var(--paper-amber-300); | 70 background-color: var(--paper-amber-300); |
70 } | 71 } |
71 .green { | 72 .green { |
72 background-color: var(--paper-green-300); | 73 background-color: var(--paper-green-300); |
73 } | 74 } |
| 75 |
| 76 .container { |
| 77 @apply(--layout-wrap); |
| 78 @apply(--layout-center-center); |
| 79 @apply(--layout-inline); |
| 80 } |
| 81 .flex { |
| 82 @apply(--layout-flex); |
| 83 } |
74 </style> | 84 </style> |
75 </head> | 85 </head> |
76 <body> | 86 <body unresolved> |
77 <div class="layout wrap inline center-center"> | 87 <div class="container"> |
78 <div> | 88 <div> |
79 <h4>Single line items</h4> | 89 <h4>Single line items</h4> |
80 <div class="list short"> | 90 <div class="list short" role="listbox"> |
81 <paper-item>Inbox</paper-item> | 91 <paper-item>Inbox</paper-item> |
82 <paper-item>Starred</paper-item> | 92 <paper-item>Starred</paper-item> |
83 <paper-item>Sent mail</paper-item> | 93 <paper-item>Sent mail</paper-item> |
84 <paper-item>Drafts</paper-item> | 94 <paper-item>Drafts</paper-item> |
85 </div> | 95 </div> |
86 </div> | 96 </div> |
87 | 97 |
88 <div> | 98 <div> |
89 <h4>Icon with text</h4> | 99 <h4>Icon with text</h4> |
90 <div class="list short"> | 100 <div class="list short" role="listbox"> |
91 <paper-icon-item> | 101 <paper-icon-item> |
92 <iron-icon icon="inbox" item-icon></iron-icon> Inbox | 102 <iron-icon icon="inbox" item-icon></iron-icon> Inbox |
93 </paper-icon-item> | 103 </paper-icon-item> |
94 <paper-icon-item> | 104 <paper-icon-item> |
95 <iron-icon icon="send" item-icon></iron-icon> Outbox | 105 <iron-icon icon="send" item-icon></iron-icon> Outbox |
96 </paper-icon-item> | 106 </paper-icon-item> |
97 <paper-icon-item> | 107 <paper-icon-item> |
98 <iron-icon icon="delete" item-icon></iron-icon> Trash | 108 <iron-icon icon="delete" item-icon></iron-icon> Trash |
99 </paper-icon-item> | 109 </paper-icon-item> |
100 <paper-icon-item> | 110 <paper-icon-item> |
101 <iron-icon icon="report" item-icon></iron-icon> Spam | 111 <iron-icon icon="report" item-icon></iron-icon> Spam |
102 </paper-icon-item> | 112 </paper-icon-item> |
103 </div> | 113 </div> |
104 </div> | 114 </div> |
105 | 115 |
106 <div> | 116 <div> |
107 <h4>Avatar with text</h4> | 117 <h4>Avatar with text</h4> |
108 <div class="list short"> | 118 <div class="list short" role="listbox"> |
109 <paper-icon-item> | 119 <paper-icon-item> |
110 <div class="avatar blue" item-icon></div> Alphonso Engelking | 120 <div class="avatar blue" item-icon></div> Alphonso Engelking |
111 </paper-icon-item> | 121 </paper-icon-item> |
112 <paper-icon-item> | 122 <paper-icon-item> |
113 <div class="avatar red" item-icon></div> Andrews Boyd | 123 <div class="avatar red" item-icon></div> Andrews Boyd |
114 </paper-icon-item> | 124 </paper-icon-item> |
115 <paper-icon-item> | 125 <paper-icon-item> |
116 <div class="avatar orange" item-icon></div> Angela Decker | 126 <div class="avatar orange" item-icon></div> Angela Decker |
117 </paper-icon-item> | 127 </paper-icon-item> |
118 <paper-icon-item> | 128 <paper-icon-item> |
119 <div class="avatar green" item-icon></div> Lorem Ipsum | 129 <div class="avatar green" item-icon></div> Lorem Ipsum |
120 </paper-icon-item> | 130 </paper-icon-item> |
121 </div> | 131 </div> |
122 </div> | 132 </div> |
123 | 133 |
124 <div> | 134 <div> |
125 <h4>Avatar with text and icon</h4> | 135 <h4>Avatar with text and icon</h4> |
126 <div class="list short"> | 136 <div class="list short" role="listbox"> |
127 <paper-icon-item> | 137 <paper-icon-item> |
128 <div class="avatar red" item-icon></div> | 138 <div class="avatar red" item-icon></div> |
129 <div class="flex">Alphonso</div> | 139 <div class="flex">Alphonso</div> |
130 <iron-icon icon="communication:messenger"></iron-icon> | 140 <iron-icon icon="communication:chat"></iron-icon> |
131 </paper-icon-item> | 141 </paper-icon-item> |
132 <paper-icon-item> | 142 <paper-icon-item> |
133 <div class="avatar orange" item-icon></div> | 143 <div class="avatar orange" item-icon></div> |
134 <div class="flex">Andrews</div> | 144 <div class="flex">Andrews</div> |
135 <iron-icon icon="communication:messenger"></iron-icon> | 145 <iron-icon icon="communication:chat"></iron-icon> |
136 </paper-icon-item> | 146 </paper-icon-item> |
137 <paper-icon-item> | 147 <paper-icon-item> |
138 <div class="avatar green" item-icon></div> | 148 <div class="avatar green" item-icon></div> |
139 <div class="flex">Angela</div> | 149 <div class="flex">Angela</div> |
140 <iron-icon icon="communication:messenger"></iron-icon> | 150 <iron-icon icon="communication:chat"></iron-icon> |
141 </paper-icon-item> | 151 </paper-icon-item> |
142 <paper-icon-item> | 152 <paper-icon-item> |
143 <div class="avatar blue" item-icon></div> | 153 <div class="avatar blue" item-icon></div> |
144 <div class="flex">Lorem</div> | 154 <div class="flex">Lorem</div> |
145 <iron-icon icon="communication:messenger"></iron-icon> | 155 <iron-icon icon="communication:chat"></iron-icon> |
146 </paper-icon-item> | 156 </paper-icon-item> |
147 </div> | 157 </div> |
148 </div> | 158 </div> |
149 | 159 |
150 <div> | 160 <div> |
151 <h4>Avatar with text and control</h4> | 161 <h4>Avatar with text and control</h4> |
152 <div class="list short"> | 162 <div class="list short" role="listbox"> |
153 <paper-icon-item> | 163 <paper-icon-item> |
154 <div class="avatar orange" item-icon></div> | 164 <div class="avatar orange" item-icon></div> |
155 <div class="flex">Alphonso</div> | 165 <div class="flex">Alphonso</div> |
156 <paper-checkbox></paper-checkbox> | 166 <paper-checkbox></paper-checkbox> |
157 </paper-icon-item> | 167 </paper-icon-item> |
158 <paper-icon-item> | 168 <paper-icon-item> |
159 <div class="avatar green" item-icon></div> | 169 <div class="avatar green" item-icon></div> |
160 <div class="flex">Andrews</div> | 170 <div class="flex">Andrews</div> |
161 <paper-checkbox checked></paper-checkbox> | 171 <paper-checkbox checked></paper-checkbox> |
162 </paper-icon-item> | 172 </paper-icon-item> |
163 <paper-icon-item> | 173 <paper-icon-item> |
164 <div class="avatar blue" item-icon></div> | 174 <div class="avatar blue" item-icon></div> |
165 <div class="flex">Angela</div> | 175 <div class="flex">Angela</div> |
166 <paper-checkbox></paper-checkbox> | 176 <paper-checkbox></paper-checkbox> |
167 </paper-icon-item> | 177 </paper-icon-item> |
168 <paper-icon-item> | 178 <paper-icon-item> |
169 <div class="avatar red" item-icon></div> | 179 <div class="avatar red" item-icon></div> |
170 <div class="flex">Lorem</div> | 180 <div class="flex">Lorem</div> |
171 <paper-checkbox></paper-checkbox> | 181 <paper-checkbox></paper-checkbox> |
172 </paper-icon-item> | 182 </paper-icon-item> |
173 </div> | 183 </div> |
174 </div> | 184 </div> |
175 | 185 |
176 <div> | 186 <div> |
177 <h4>Control with text and icon</h4> | 187 <h4>Control with text and icon</h4> |
178 <div class="list short"> | 188 <div class="list short" role="listbox"> |
179 <paper-icon-item> | 189 <paper-icon-item> |
180 <paper-checkbox item-icon></paper-checkbox> | 190 <paper-checkbox item-icon></paper-checkbox> |
181 <div class="flex">Alphonso</div> | 191 <div class="flex">Alphonso</div> |
182 <iron-icon icon="communication:messenger"></iron-icon> | 192 <iron-icon icon="communication:chat"></iron-icon> |
183 </paper-icon-item> | 193 </paper-icon-item> |
184 <paper-icon-item> | 194 <paper-icon-item> |
185 <paper-checkbox checked item-icon></paper-checkbox> | 195 <paper-checkbox checked item-icon></paper-checkbox> |
186 <div class="flex">Andrews</div> | 196 <div class="flex">Andrews</div> |
187 <iron-icon icon="communication:messenger"></iron-icon> | 197 <iron-icon icon="communication:chat"></iron-icon> |
188 </paper-icon-item> | 198 </paper-icon-item> |
189 <paper-icon-item> | 199 <paper-icon-item> |
190 <paper-checkbox item-icon></paper-checkbox> | 200 <paper-checkbox item-icon></paper-checkbox> |
191 <div class="flex">Angela</div> | 201 <div class="flex">Angela</div> |
192 <iron-icon icon="communication:messenger"></iron-icon> | 202 <iron-icon icon="communication:chat"></iron-icon> |
193 </paper-icon-item> | 203 </paper-icon-item> |
194 <paper-icon-item> | 204 <paper-icon-item> |
195 <paper-checkbox item-icon></paper-checkbox> | 205 <paper-checkbox item-icon></paper-checkbox> |
196 <div class="flex">Lorem</div> | 206 <div class="flex">Lorem</div> |
197 <iron-icon icon="communication:messenger"></iron-icon> | 207 <iron-icon icon="communication:chat"></iron-icon> |
198 </paper-icon-item> | 208 </paper-icon-item> |
199 </div> | 209 </div> |
200 </div> | 210 </div> |
201 | 211 |
202 <div> | 212 <div> |
203 <h4>Two-line items</h4> | 213 <h4>Two-line items</h4> |
204 <div class="list"> | 214 <div class="list" role="listbox"> |
205 <paper-item> | 215 <paper-item> |
206 <paper-item-body two-line class="layout vertical"> | 216 <paper-item-body two-line class="layout vertical"> |
207 <div>Profile Photo</div> | 217 <div>Profile Photo</div> |
208 <div secondary>Change your Google+ profile photo</div> | 218 <div secondary>Change your Google+ profile photo</div> |
209 </paper-item-body> | 219 </paper-item-body> |
210 </paper-item> | 220 </paper-item> |
211 <paper-item> | 221 <paper-item> |
212 <paper-item-body two-line> | 222 <paper-item-body two-line> |
213 <div>Show your status</div> | 223 <div>Show your status</div> |
214 <div secondary>Your status is visible to everyone you use with</div> | 224 <div secondary>Your status is visible to everyone you use with</div> |
215 </paper-item-body> | 225 </paper-item-body> |
216 </paper-item> | 226 </paper-item> |
217 <paper-item> | 227 <paper-item> |
218 <paper-item-body two-line class="layout vertical"> | 228 <paper-item-body two-line class="layout vertical"> |
219 <div>Settings</div> | 229 <div>Settings</div> |
220 <div secondary>Change your account settings</div> | 230 <div secondary>Change your account settings</div> |
221 </paper-item-body> | 231 </paper-item-body> |
222 </paper-item> | 232 </paper-item> |
223 </div> | 233 </div> |
224 </div> | 234 </div> |
225 | 235 |
226 <div> | 236 <div> |
227 <h4>Icon with two-line text</h4> | 237 <h4>Icon with two-line text</h4> |
228 <div class="list"> | 238 <div class="list" role="listbox"> |
229 <paper-icon-item> | 239 <paper-icon-item> |
230 <div class="avatar green" item-icon></div> | 240 <div class="avatar green" item-icon></div> |
231 <paper-item-body two-line> | 241 <paper-item-body two-line> |
232 <div>Alphonso Engelking</div> | 242 <div>Alphonso Engelking</div> |
233 <div secondary>Change photo</div> | 243 <div secondary>Change photo</div> |
234 </paper-item-body> | 244 </paper-item-body> |
235 </paper-icon-item> | 245 </paper-icon-item> |
236 <paper-icon-item> | 246 <paper-icon-item> |
237 <iron-icon icon="communication:phone" item-icon></iron-icon> | 247 <iron-icon icon="communication:phone" item-icon></iron-icon> |
238 <paper-item-body two-line> | 248 <paper-item-body two-line> |
239 <div>(650) 555-1234</div> | 249 <div>(650) 555-1234</div> |
240 <div secondary>Mobile</div> | 250 <div secondary>Mobile</div> |
241 </paper-item-body> | 251 </paper-item-body> |
242 </paper-icon-item> | 252 </paper-icon-item> |
243 <paper-icon-item> | 253 <paper-icon-item> |
244 <iron-icon icon="communication:email" item-icon></iron-icon> | 254 <iron-icon icon="communication:email" item-icon></iron-icon> |
245 <paper-item-body two-line> | 255 <paper-item-body two-line> |
246 <div>alphonso@example.com</div> | 256 <div>alphonso@example.com</div> |
247 <div secondary>Personal</div> | 257 <div secondary>Personal</div> |
248 </paper-item-body> | 258 </paper-item-body> |
249 </paper-icon-item> | 259 </paper-icon-item> |
250 <paper-icon-item> | |
251 </div> | 260 </div> |
252 </div> | 261 </div> |
253 | 262 |
254 <div> | 263 <div> |
255 <h4>Avatar with text and icon</h4> | 264 <h4>Avatar with text and icon</h4> |
256 <div class="list"> | 265 <div class="list" role="listbox"> |
257 <paper-icon-item> | 266 <paper-icon-item> |
258 <div class="avatar blue" item-icon></div> | 267 <div class="avatar blue" item-icon></div> |
259 <paper-item-body two-line> | 268 <paper-item-body two-line> |
260 <div>Photos</div> | 269 <div>Photos</div> |
261 <div secondary>Jan 9, 2014</div> | 270 <div secondary>Jan 9, 2014</div> |
262 </paper-item-body> | 271 </paper-item-body> |
263 <iron-icon icon="star"></iron-icon> | 272 <paper-icon-button icon="star" alt="favourite this!"></paper-icon-butt
on> |
264 </paper-icon-item> | 273 </paper-icon-item> |
265 <paper-icon-item> | 274 <paper-icon-item> |
266 <div class="avatar red" item-icon></div> | 275 <div class="avatar red" item-icon></div> |
267 <paper-item-body two-line> | 276 <paper-item-body two-line> |
268 <div>Recipes</div> | 277 <div>Recipes</div> |
269 <div secondary>Jan 17, 2014</div> | 278 <div secondary>Jan 17, 2014</div> |
270 </paper-item-body> | 279 </paper-item-body> |
271 <iron-icon icon="star"></iron-icon> | 280 <paper-icon-button icon="star" alt="favourite this!"></paper-icon-butt
on> |
272 </paper-icon-item> | 281 </paper-icon-item> |
273 <paper-icon-item> | 282 <paper-icon-item> |
274 <div class="avatar orange" item-icon></div> | 283 <div class="avatar orange" item-icon></div> |
275 <paper-item-body two-line> | 284 <paper-item-body two-line> |
276 <div>Work</div> | 285 <div>Work</div> |
277 <div secondary>Jan 28, 2014</div> | 286 <div secondary>Jan 28, 2014</div> |
278 </paper-item-body> | 287 </paper-item-body> |
279 <iron-icon icon="star"></iron-icon> | 288 <paper-icon-button icon="star" alt="favourite this!"></paper-icon-butt
on> |
280 </paper-icon-item> | 289 </paper-icon-item> |
281 </div> | 290 </div> |
282 </div> | 291 </div> |
283 | 292 |
284 </body> | 293 </body> |
285 </html> | 294 </html> |
OLD | NEW |