OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polym
er.github.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS
.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CO
NTRIBUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/P
ATENTS.txt | |
9 --> | |
10 <!doctype html> | |
11 <html> | |
12 <head> | |
13 | |
14 <title>core-item</title> | |
15 | |
16 <script src="../platform/platform.js"></script> | |
17 | |
18 <link rel="import" href="../core-icons/core-icons.html"> | |
19 <link rel="import" href="core-item.html"> | |
20 | |
21 <style> | |
22 | |
23 body { | |
24 font-family: sans-serif; | |
25 font-size: 16px; | |
26 margin: 20px; | |
27 } | |
28 | |
29 core-item { | |
30 width: 300px; | |
31 } | |
32 | |
33 core-item.big { | |
34 font-size: 24px; | |
35 } | |
36 | |
37 core-item.small { | |
38 font-size: 12px; | |
39 } | |
40 | |
41 core-item.contact-item { | |
42 height: 50px; | |
43 background-color: #efefef; | |
44 border: 1px solid #ddd; | |
45 } | |
46 | |
47 core-item.contact-item .name { | |
48 font-size: 1.125em; | |
49 } | |
50 | |
51 core-item.contact-item .address { | |
52 font-size: 0.75em; | |
53 } | |
54 | |
55 </style> | |
56 | |
57 </head> | |
58 <body unresolved> | |
59 | |
60 <h2>items with icon and label:</h2> | |
61 | |
62 <core-item icon="settings" label="Settings"></core-item> | |
63 <core-item icon="account-box" label="Account"></core-item> | |
64 | |
65 <h2>items with label only:</h2> | |
66 | |
67 <core-item label="Settings"></core-item> | |
68 <core-item label="Account"></core-item> | |
69 | |
70 <h2>links (via <a>):</h2> | |
71 | |
72 <core-item icon="settings" label="Settings"><a href="#settings" target="_sel
f"></a></core-item> | |
73 <core-item icon="account-box" label="Account"><a href="#account" target="_se
lf"></a></core-item> | |
74 | |
75 <h2>items sized with CSS:</h2> | |
76 <core-item icon="settings" label="Settings" class="font-scalable big"></core
-item> | |
77 <core-item icon="account-box" label="Account" class="font-scalable big"></co
re-item> | |
78 <core-item icon="settings" label="Settings" class="font-scalable small"></co
re-item> | |
79 <core-item icon="account-box" label="Account" class="font-scalable small"></
core-item> | |
80 | |
81 <h2>custom item:</h2> | |
82 | |
83 <core-item icon="account-circle" class="contact-item"> | |
84 <div flex> | |
85 <div class="name">John Doe</div> | |
86 <div class="address">123 A Street, San Francisco, CA</div> | |
87 </div> | |
88 <core-icon icon="more-vert"></core-icon> | |
89 </core-item> | |
90 | |
91 </body> | |
92 </html> | |
OLD | NEW |