OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 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://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 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/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 <html> | 10 <html> |
11 <head> | 11 <head> |
12 | 12 |
13 <title>core-menu</title> | 13 <title>core-menu</title> |
14 | 14 |
15 <script src="../webcomponentsjs/webcomponents.js"></script> | 15 <script src="../webcomponentsjs/webcomponents.js"></script> |
16 | 16 |
17 <link rel="import" href="../core-icons/core-icons.html"> | 17 <link rel="import" href="../core-icons/core-icons.html"> |
18 <link rel="import" href="core-menu.html"> | 18 <link rel="import" href="core-menu.html"> |
19 <link rel="import" href="core-submenu.html"> | 19 <link rel="import" href="core-submenu.html"> |
20 <link rel="import" href="../core-item/core-item.html"> | 20 <link rel="import" href="../core-item/core-item.html"> |
21 | 21 |
22 <style> | 22 <style> |
23 | 23 |
24 body { | 24 body { |
25 font-family: sans-serif; | 25 font-family: sans-serif; |
26 margin: 20px; | 26 margin: 20px; |
27 } | 27 } |
28 | 28 |
29 section { | 29 section { |
30 width: 300px; | 30 width: 300px; |
31 } | 31 } |
32 | 32 |
33 .dark { | 33 .dark { |
34 background-color: #333; | 34 background-color: #333; |
35 } | 35 } |
36 | 36 |
37 .dark core-item { | 37 .dark core-item { |
38 color: #fafafa; | 38 color: #fafafa; |
39 fill: #fafafa; | 39 fill: #fafafa; |
40 } | 40 } |
41 | 41 |
42 </style> | 42 </style> |
43 | 43 |
44 </head> | 44 </head> |
45 <body> | 45 <body> |
46 | 46 |
47 <h2>simple menu:</h2> | 47 <h2>simple menu:</h2> |
48 | 48 |
49 <section> | 49 <section> |
50 | 50 |
51 <core-menu selected="0"> | 51 <core-menu selected="0"> |
52 | 52 |
53 <core-item icon="settings" label="Settings"></core-item> | 53 <core-item icon="settings" label="Settings"></core-item> |
54 <core-item icon="favorite" label="Favorite"></core-item> | 54 <core-item icon="favorite" label="Favorite"></core-item> |
55 <core-item icon="account-box" label="Account"></core-item> | 55 <core-item icon="account-box" label="Account"></core-item> |
56 | 56 |
57 </core-menu> | 57 </core-menu> |
58 | 58 |
59 </section> | 59 </section> |
60 | 60 |
61 <h2>simple menu:</h2> | 61 <h2>simple menu:</h2> |
62 | 62 |
63 <section class="dark"> | 63 <section class="dark"> |
64 | 64 |
65 <core-menu selected="0"> | 65 <core-menu selected="0"> |
66 | 66 |
67 <core-item icon="settings" label="Settings"></core-item> | 67 <core-item icon="settings" label="Settings"></core-item> |
68 <core-item icon="favorite" label="Favorite"></core-item> | 68 <core-item icon="favorite" label="Favorite"></core-item> |
69 <core-item icon="account-box" label="Account"></core-item> | 69 <core-item icon="account-box" label="Account"></core-item> |
70 | 70 |
71 </core-menu> | 71 </core-menu> |
72 | 72 |
73 </section> | 73 </section> |
74 | 74 |
75 <h2>submenu:</h2> | 75 <h2>submenu:</h2> |
76 | 76 |
77 <section> | 77 <section> |
78 | 78 |
79 <core-menu selected="0"> | 79 <core-menu selected="0"> |
80 | 80 |
81 <core-submenu icon="settings" label="Topics"> | 81 <core-submenu icon="settings" label="Topics"> |
82 | 82 |
83 <core-item label="Topic 1"></core-item> | 83 <core-item label="Topic 1"></core-item> |
84 <core-item label="Topic 2"></core-item> | 84 <core-item label="Topic 2"></core-item> |
85 | 85 |
86 </core-submenu> | 86 </core-submenu> |
87 | 87 |
88 <core-submenu icon="settings" label="Favorites"> | 88 <core-submenu icon="settings" label="Favorites"> |
89 | 89 |
90 <core-item label="Favorite 1"></core-item> | 90 <core-item label="Favorite 1"></core-item> |
91 <core-item label="Favorite 2"></core-item> | 91 <core-item label="Favorite 2"></core-item> |
92 <core-item label="Favorite 3"></core-item> | 92 <core-item label="Favorite 3"></core-item> |
93 | 93 |
94 </core-submenu> | 94 </core-submenu> |
95 | 95 |
96 </core-menu> | 96 </core-menu> |
97 | 97 |
98 </section> | 98 </section> |
99 | 99 |
100 </body> | 100 </body> |
101 </html> | 101 </html> |
OLD | NEW |