Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1047)

Side by Side Diff: polymer_1.2.3/bower_components/paper-menu/paper-menu.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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-flex-layout/iron-flex-layout.html">
12 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html"> 13 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
13 <link rel="import" href="../paper-styles/paper-styles.html"> 14 <link rel="import" href="../paper-styles/default-theme.html">
15 <link rel="import" href="../paper-styles/color.html">
16 <link rel="import" href="paper-menu-shared-styles.html">
14 17
15 <!-- 18 <!--
19 Material design: [Menus](https://www.google.com/design/spec/components/menus.htm l)
20
16 `<paper-menu>` implements an accessible menu control with Material Design stylin g. The focused item 21 `<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. 22 is highlighted, and the selected item has bolded text.
18 23
19 <paper-menu> 24 <paper-menu>
20 <paper-item>Item 1</paper-item> 25 <paper-item>Item 1</paper-item>
21 <paper-item>Item 2</paper-item> 26 <paper-item>Item 2</paper-item>
22 </paper-menu> 27 </paper-menu>
23 28
29 An initial selection can be specified with the `selected` attribute.
30
31 <paper-menu selected="0">
32 <paper-item>Item 1</paper-item>
33 <paper-item>Item 2</paper-item>
34 </paper-menu>
35
24 Make a multi-select menu with the `multi` attribute. Items in a multi-select men u can be deselected, 36 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. 37 and multiple items can be selected.
26 38
27 <paper-menu multi> 39 <paper-menu multi>
28 <paper-item>Item 1</paper-item> 40 <paper-item>Item 1</paper-item>
29 <paper-item>Item 2</paper-item> 41 <paper-item>Item 2</paper-item>
30 </paper-menu> 42 </paper-menu>
31 43
32 ### Styling 44 ### Styling
33 45
34 The following custom properties and mixins are available for styling: 46 The following custom properties and mixins are available for styling:
35 47
36 Custom property | Description | Default 48 Custom property | Description | Default
37 ----------------|-------------|---------- 49 ----------------|-------------|----------
38 `--paper-menu-background-color` | Menu background color | `--primary-background-color` 50 `--paper-menu-background-color` | Menu background color | `--primary-background-color`
39 `-paper-menu-color` | Menu foreground color | `--primary-text-color` 51 `--paper-menu-color` | Menu foreground color | `--primary-text-color`
40 `--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color` 52 `--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color`
41 `--paper-menu` | Mixin applied to the menu | `{}` 53 `--paper-menu` | Mixin applied to the menu | `{}`
42 `--paper-menu-selected-item` | Mixin applied to the selected item | `{}` 54 `--paper-menu-selected-item` | Mixin applied to the selected item | `{}`
43 `--paper-menu-focused-item` | Mixin applied to the focused item | `{}` 55 `--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 | `{}` 56 `--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}`
45 57
46 ### Accessibility 58 ### Accessibility
47 59
48 `<paper-menu>` has `role="menu"` by default. A multi-select menu will also have 60 `<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 61 `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 62 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. 63 of a menu item will also focus it.
52 64
53 @group Paper Elements 65 @group Paper Elements
54 @element paper-menu 66 @element paper-menu
55 @hero hero.svg 67 @hero hero.svg
56 @demo demo/index.html 68 @demo demo/index.html
57 --> 69 -->
58 70
59 <dom-module id="paper-menu"> 71 <dom-module id="paper-menu">
72 <template>
73 <style include="paper-menu-shared-styles"></style>
74 <style>
75 :host {
76 display: block;
77 padding: 8px 0;
60 78
61 <style> 79 background: var(--paper-menu-background-color, --primary-background-colo r);
80 color: var(--paper-menu-color, --primary-text-color);
62 81
63 :host { 82 @apply(--paper-menu);
64 display: block; 83 }
65 padding: 8px 0; 84 </style>
66 85
67 background: var(--paper-menu-background-color, --primary-background-color) ; 86 <div class="selectable-content">
68 color: var(--paper-menu-color, --primary-text-color);
69
70 @apply(--paper-menu);
71 }
72
73 /* need a wrapper element to make this higher specificity than the :host rul e in paper-item */
74 .content > ::content > .iron-selected {
75 font-weight: bold;
76
77 @apply(--paper-menu-selected-item);
78 }
79
80 .content > ::content > [disabled] {
81 color: var(--paper-menu-disabled-color, --disabled-text-color);
82 }
83
84 .content > ::content > *:focus {
85 position: relative;
86 outline: 0;
87
88 @apply(--paper-menu-colored-focused-item);
89 }
90
91 .content > ::content > *:focus:after {
92 @apply(--layout-fit);
93 background: currentColor;
94 /* FIXME move to paper-styles for next widget */
95 opacity: 0.12;
96 content: '';
97
98 @apply(--paper-menu-colored-focused-item-after);
99 }
100
101 .content > ::content > *[colored]:focus:after {
102 opacity: 0.26;
103 }
104
105 </style>
106
107 <template>
108
109 <div class="content">
110 <content></content> 87 <content></content>
111 </div> 88 </div>
112
113 </template> 89 </template>
114 90
91 <script>
92 (function() {
93 Polymer({
94 is: 'paper-menu',
95
96 behaviors: [
97 Polymer.IronMenuBehavior
98 ]
99 });
100 })();
101 </script>
115 </dom-module> 102 </dom-module>
116
117 <script>
118
119 (function() {
120
121 Polymer({
122
123 is: 'paper-menu',
124
125 behaviors: [
126 Polymer.IronMenuBehavior
127 ]
128
129 });
130
131 })();
132
133 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698