OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 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 | 10 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html"> | 12 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html"> |
13 <link rel="import" href="../paper-styles/paper-styles.html"> | 13 <link rel="import" href="../paper-styles/paper-styles.html"> |
14 | 14 |
15 <!-- | 15 <!-- |
| 16 `<paper-menu>` implements an accessible menu control with Material Design stylin
g. The focused item |
| 17 is highlighted, and the selected item has bolded text. |
| 18 |
| 19 <paper-menu> |
| 20 <paper-item>Item 1</paper-item> |
| 21 <paper-item>Item 2</paper-item> |
| 22 </paper-menu> |
| 23 |
| 24 Make a multi-select menu with the `multi` attribute. Items in a multi-select men
u can be deselected, |
| 25 and multiple item can be selected. |
| 26 |
| 27 <paper-menu multi> |
| 28 <paper-item>Item 1</paper-item> |
| 29 <paper-item>Item 2</paper-item> |
| 30 </paper-menu> |
| 31 |
| 32 ### Styling |
| 33 |
| 34 The following custom properties and mixins are available for styling: |
| 35 |
| 36 Custom property | Description | Default |
| 37 ----------------|-------------|---------- |
| 38 `--paper-menu-background-color` | Menu background color
| `--primary-background-color` |
| 39 `-paper-menu-color` | Menu foreground color
| `--primary-text-color` |
| 40 `--paper-menu-disabled-color` | Foreground color for a disabled item
| `--disabled-text-color` |
| 41 `--paper-menu` | Mixin applied to the menu
| `{}` |
| 42 `--paper-menu-selected-item` | Mixin applied to the selected item
| `{}` |
| 43 `--paper-menu-focused-item` | Mixin applied to the focused item
| `{}` |
| 44 `--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element
for the focused item | `{}` |
| 45 |
| 46 ### Accessibility |
| 47 |
| 48 `<paper-menu>` has `role="menu"` by default. A multi-select menu will also have |
| 49 `aria-multiselectable` set. It implements key bindings to navigate through the m
enu with the up and |
| 50 down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing
the first letter |
| 51 of a menu item will also focus it. |
| 52 |
| 53 @group Paper Elements |
16 @element paper-menu | 54 @element paper-menu |
| 55 @hero hero.svg |
| 56 @demo demo/index.html |
17 --> | 57 --> |
18 | 58 |
19 <dom-module id="paper-menu"> | 59 <dom-module id="paper-menu"> |
20 | 60 |
21 <style> | 61 <style> |
22 | 62 |
23 :host { | 63 :host { |
24 display: block; | 64 display: block; |
25 padding: 8px 0; | 65 padding: 8px 0; |
26 | 66 |
27 background: var(--primary-background-color); | 67 background: var(--paper-menu-background-color, --primary-background-color)
; |
28 color: var(--primary-text-color); | 68 color: var(--paper-menu-color, --primary-text-color); |
29 | 69 |
30 mixin(--paper-menu); | 70 @apply(--paper-menu); |
31 } | 71 } |
32 | 72 |
33 :host > ::content > [disabled] { | 73 /* need a wrapper element to make this higher specificity than the :host rul
e in paper-item */ |
34 color: var(--disabled-text-color); | 74 .content > ::content > .iron-selected { |
| 75 font-weight: bold; |
| 76 |
| 77 @apply(--paper-menu-selected-item); |
35 } | 78 } |
36 | 79 |
37 :host > ::content > .iron-selected { | 80 .content > ::content > [disabled] { |
38 position: relative; | 81 color: var(--paper-menu-disabled-color, --disabled-text-color); |
39 } | 82 } |
40 | 83 |
41 :host > ::content > .iron-selected::after { | 84 .content > ::content > *:focus { |
42 mixin(--layout-fit); | 85 position: relative; |
| 86 outline: 0; |
43 | 87 |
| 88 @apply(--paper-menu-colored-focused-item); |
| 89 } |
| 90 |
| 91 .content > ::content > *:focus:after { |
| 92 @apply(--layout-fit); |
44 background: currentColor; | 93 background: currentColor; |
45 /* FIXME move to paper-styles for next widget */ | 94 /* FIXME move to paper-styles for next widget */ |
46 opacity: 0.12; | 95 opacity: 0.12; |
47 content: ''; | 96 content: ''; |
48 | 97 |
49 mixin(--paper-menu-selected-item); | 98 @apply(--paper-menu-colored-focused-item-after); |
50 } | 99 } |
51 | 100 |
52 :host > ::content > .iron-selected[colored]::after { | 101 .content > ::content > *[colored]:focus:after { |
53 opacity: 0.26; | 102 opacity: 0.26; |
54 | |
55 mixin(--paper-menu-colored-selected-item); | |
56 } | 103 } |
57 | 104 |
58 </style> | 105 </style> |
59 | 106 |
60 <template> | 107 <template> |
61 | 108 |
62 <content></content> | 109 <div class="content"> |
| 110 <content></content> |
| 111 </div> |
63 | 112 |
64 </template> | 113 </template> |
65 | 114 |
66 </dom-module> | 115 </dom-module> |
67 | 116 |
68 <script> | 117 <script> |
69 | 118 |
70 (function() { | 119 (function() { |
71 | 120 |
72 Polymer({ | 121 Polymer({ |
73 | 122 |
74 is: 'paper-menu', | 123 is: 'paper-menu', |
75 | 124 |
76 enableCustomStyleProperties: true, | |
77 | |
78 behaviors: [ | 125 behaviors: [ |
79 Polymer.IronMenuBehavior | 126 Polymer.IronMenuBehavior |
80 ] | 127 ] |
81 | 128 |
82 }); | 129 }); |
83 | 130 |
84 })(); | 131 })(); |
85 | 132 |
86 </script> | 133 </script> |
OLD | NEW |