OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 --> | 8 --> |
9 | 9 |
10 <!-- | 10 <!-- |
11 `core-menu` is a selector which styles to looks like a menu. | 11 `core-menu` is a selector which styles to looks like a menu. |
12 | 12 |
13 <core-menu selected="0"> | 13 <core-menu selected="0"> |
14 <core-item icon="settings" label="Settings"></core-item> | 14 <core-item icon="settings" label="Settings"></core-item> |
15 <core-item icon="dialog" label="Dialog"></core-item> | 15 <core-item icon="dialog" label="Dialog"></core-item> |
16 <core-item icon="search" label="Search"></core-item> | 16 <core-item icon="search" label="Search"></core-item> |
17 </core-menu> | 17 </core-menu> |
18 | 18 |
19 When an item is selected the `core-selected` class is added to it. The user can | 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. | 20 use the class to add more stylings to the selected item. |
21 | 21 |
22 core-item.core-selected { | 22 core-item.core-selected { |
23 color: red; | 23 color: red; |
24 } | 24 } |
25 | 25 |
26 The `selectedItem` property references the selected item. | 26 The `selectedItem` property references the selected item. |
27 | 27 |
28 <core-menu selected="0" selectedItem="{{item}}"> | 28 <core-menu selected="0" selectedItem="{{item}}"> |
(...skipping 20 matching lines...) Expand all Loading... |
49 ... | 49 ... |
50 } | 50 } |
51 } | 51 } |
52 | 52 |
53 @group Polymer Core Elements | 53 @group Polymer Core Elements |
54 @element core-menu | 54 @element core-menu |
55 @extends core-selector | 55 @extends core-selector |
56 --> | 56 --> |
57 | 57 |
58 <link rel="import" href="../core-selector/core-selector.html"> | 58 <link rel="import" href="../core-selector/core-selector.html"> |
| 59 <link rel="import" href="../core-a11y-keys/core-a11y-keys.html"> |
59 | 60 |
60 <polymer-element name="core-menu" extends="core-selector" noscript> | 61 <polymer-element name="core-menu" extends="core-selector" noscript> |
61 <template> | 62 <template> |
62 | 63 |
63 <link rel="stylesheet" href="core-menu.css"> | 64 <link rel="stylesheet" href="core-menu.css"> |
64 | 65 |
| 66 <core-a11y-keys target="{{}}" keys="up" on-keys-pressed="{{ selectPrevious }}"
></core-a11y-keys> |
| 67 <core-a11y-keys target="{{}}" keys="down" on-keys-pressed="{{ selectNext }}"><
/core-a11y-keys> |
| 68 <core-a11y-keys target="{{}}" keys="enter" on-keys-pressed="{{ validateSelecte
d }}"></core-a11y-keys> |
| 69 |
65 <shadow></shadow> | 70 <shadow></shadow> |
66 | 71 |
67 </template> | 72 </template> |
68 </polymer-element> | 73 </polymer-element> |
OLD | NEW |