OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
6 Code distributed by Google as part of the polymer project is also | |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
8 --> | |
9 | |
10 <!-- | |
11 `core-menu` is a selector which styles to looks like a menu. | |
12 | |
13 <core-menu selected="0"> | |
14 <core-item icon="settings" label="Settings"></core-item> | |
15 <core-item icon="dialog" label="Dialog"></core-item> | |
16 <core-item icon="search" label="Search"></core-item> | |
17 </core-menu> | |
18 | |
19 When an item is selected the `core-selected` class is added to it. The user can | |
20 use the class to add more stylings to the selected item. | |
21 | |
22 core-item.core-selected { | |
23 color: red; | |
24 } | |
25 | |
26 The `selectedItem` property references the selected item. | |
27 | |
28 <core-menu selected="0" selectedItem="{{item}}"> | |
29 <core-item icon="settings" label="Settings"></core-item> | |
30 <core-item icon="dialog" label="Dialog"></core-item> | |
31 <core-item icon="search" label="Search"></core-item> | |
32 </core-menu> | |
33 | |
34 <div>selected label: {{item.label}}</div> | |
35 | |
36 The `core-select` event signals selection change. | |
37 | |
38 <core-menu selected="0" on-core-select="{{selectAction}}"> | |
39 <core-item icon="settings" label="Settings"></core-item> | |
40 <core-item icon="dialog" label="Dialog"></core-item> | |
41 <core-item icon="search" label="Search"></core-item> | |
42 </core-menu> | |
43 | |
44 ... | |
45 | |
46 selectAction: function(e, detail) { | |
47 if (detail.isSelected) { | |
48 var selectedItem = detail.item; | |
49 ... | |
50 } | |
51 } | |
52 | |
53 @group Polymer Core Elements | |
54 @element core-menu | |
55 @extends core-selector | |
56 --> | |
57 | |
58 <link rel="import" href="../core-selector/core-selector.html"> | |
59 | |
60 <polymer-element name="core-menu" extends="core-selector" noscript> | |
61 <template> | |
62 | |
63 <link rel="stylesheet" href="core-menu.css"> | |
64 | |
65 <shadow></shadow> | |
66 | |
67 </template> | |
68 </polymer-element> | |
OLD | NEW |