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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu.html

Issue 1862213002: Roll third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove obsolete appearance_browsertest.js, result of a previous bad merge. Created 4 years, 8 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
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 --><html><head><link rel="import" href="../polymer/polymer.html"> 9 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../paper-styles/default-theme.html"> 10 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
11 <link rel="import" href="../iron-behaviors/iron-button-state.html">
12 <link rel="import" href="../iron-behaviors/iron-control-state.html">
13 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html">
14 <link rel="import" href="../iron-icon/iron-icon.html">
15 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior. html">
11 <link rel="import" href="../paper-input/paper-input.html"> 16 <link rel="import" href="../paper-input/paper-input.html">
12 <link rel="import" href="../paper-menu-button/paper-menu-button.html"> 17 <link rel="import" href="../paper-menu-button/paper-menu-button.html">
13 <link rel="import" href="../paper-ripple/paper-ripple.html"> 18 <link rel="import" href="../paper-ripple/paper-ripple.html">
14 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html "> 19 <link rel="import" href="../paper-styles/default-theme.html">
15 <link rel="import" href="../iron-behaviors/iron-control-state.html"> 20
16 <link rel="import" href="../iron-behaviors/iron-button-state.html"> 21 <link rel="import" href="paper-dropdown-menu-icons.html">
17 <link rel="import" href="../iron-icons/iron-icons.html"> 22 <link rel="import" href="paper-dropdown-menu-shared-styles.html">
18 <link rel="import" href="../iron-icon/iron-icon.html">
19 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html">
20 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior. html">
21 23
22 <!-- 24 <!--
23 Material design: [Dropdown menus](https://www.google.com/design/spec/components/ buttons.html#buttons-dropdown-buttons) 25 Material design: [Dropdown menus](https://www.google.com/design/spec/components/ buttons.html#buttons-dropdown-buttons)
24 26
25 `paper-dropdown-menu` is similar to a native browser select element. 27 `paper-dropdown-menu` is similar to a native browser select element.
26 `paper-dropdown-menu` works with selectable content. The currently selected 28 `paper-dropdown-menu` works with selectable content. The currently selected
27 item is displayed in the control. If no item is selected, the `label` is 29 item is displayed in the control. If no item is selected, the `label` is
28 displayed instead. 30 displayed instead.
29 31
30 The child element with the class `dropdown-content` will be used as the dropdown
31 menu. It could be a `paper-menu` or element that triggers `iron-select` when
32 selecting its children.
33
34 Example: 32 Example:
35 33
36 <paper-dropdown-menu label="Your favourite pastry"> 34 <paper-dropdown-menu label="Your favourite pastry">
37 <paper-menu class="dropdown-content"> 35 <paper-listbox class="dropdown-content">
38 <paper-item>Croissant</paper-item> 36 <paper-item>Croissant</paper-item>
39 <paper-item>Donut</paper-item> 37 <paper-item>Donut</paper-item>
40 <paper-item>Financier</paper-item> 38 <paper-item>Financier</paper-item>
41 <paper-item>Madeleine</paper-item> 39 <paper-item>Madeleine</paper-item>
42 </paper-menu> 40 </paper-listbox>
43 </paper-dropdown-menu> 41 </paper-dropdown-menu>
44 42
45 This example renders a dropdown menu with 4 options. 43 This example renders a dropdown menu with 4 options.
46 44
47 Similarly to using `iron-select`, `iron-deselect` events will cause the 45 The child element with the class `dropdown-content` is used as the dropdown
48 current selection of the `paper-dropdown-menu` to be cleared. 46 menu. This can be a [`paper-listbox`](paper-listbox), or any other or
47 element that acts like an [`iron-selector`](iron-selector).
48
49 Specifically, the menu child must fire an
50 [`iron-select`](iron-selector#event-iron-select) event when one of its
51 children is selected, and an [`iron-deselect`](iron-selector#event-iron-deselect )
52 event when a child is deselected. The selected or deselected item must
53 be passed as the event's `detail.item` property.
54
55 Applications can listen for the `iron-select` and `iron-deselect` events
56 to react when options are selected and deselected.
49 57
50 ### Styling 58 ### Styling
51 59
52 The following custom properties and mixins are also available for styling: 60 The following custom properties and mixins are also available for styling:
53 61
54 Custom property | Description | Default 62 Custom property | Description | Default
55 ----------------|-------------|---------- 63 ----------------|-------------|----------
56 `--paper-dropdown-menu` | A mixin that is applied to the element host | `{}` 64 `--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
57 `--paper-dropdown-menu-disabled` | A mixin that is applied to the element host w hen disabled | `{}` 65 `--paper-dropdown-menu-disabled` | A mixin that is applied to the element host w hen disabled | `{}`
58 `--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}` 66 `--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
59 `--paper-dropdown-menu-button` | A mixin that is applied to the internal menu bu tton | `{}` 67 `--paper-dropdown-menu-button` | A mixin that is applied to the internal menu bu tton | `{}`
60 `--paper-dropdown-menu-input` | A mixin that is applied to the internal paper in put | `{}` 68 `--paper-dropdown-menu-input` | A mixin that is applied to the internal paper in put | `{}`
61 `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{ }` 69 `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{ }`
62 70
63 You can also use any of the `paper-input-container` and `paper-menu-button` 71 You can also use any of the `paper-input-container` and `paper-menu-button`
64 style mixins and custom properties to style the internal input and menu button 72 style mixins and custom properties to style the internal input and menu button
65 respectively. 73 respectively.
66 74
67 @group Paper Elements 75 @group Paper Elements
68 @element paper-dropdown-menu 76 @element paper-dropdown-menu
69 @hero hero.svg 77 @hero hero.svg
70 @demo demo/index.html 78 @demo demo/index.html
71 --> 79 -->
72 80
73 </head><body><dom-module id="paper-dropdown-menu"> 81 </head><body><dom-module id="paper-dropdown-menu">
74 <template> 82 <template>
75 <style> 83 <style include="paper-dropdown-menu-shared-styles"></style>
76 :host {
77 display: inline-block;
78 position: relative;
79 text-align: left;
80 cursor: pointer;
81
82 /* NOTE(cdata): Both values are needed, since some phones require the
83 * value to be `transparent`.
84 */
85 -webkit-tap-highlight-color: rgba(0,0,0,0);
86 -webkit-tap-highlight-color: transparent;
87
88 --paper-input-container-input: {
89 overflow: hidden;
90 white-space: nowrap;
91 text-overflow: ellipsis;
92 max-width: 100%;
93 box-sizing: border-box;
94 cursor: pointer;
95 };
96
97 @apply(--paper-dropdown-menu);
98 }
99
100 :host([disabled]) {
101 @apply(--paper-dropdown-menu-disabled);
102 }
103
104 :host([noink]) paper-ripple {
105 display: none;
106 }
107
108 :host([no-label-float]) paper-ripple {
109 top: 8px;
110 }
111
112 paper-ripple {
113 top: 12px;
114 left: 0px;
115 bottom: 8px;
116 right: 0px;
117
118 @apply(--paper-dropdown-menu-ripple);
119 }
120
121 paper-menu-button {
122 display: block;
123 padding: 0;
124
125 @apply(--paper-dropdown-menu-button);
126 }
127
128 paper-input {
129 @apply(--paper-dropdown-menu-input);
130 }
131
132 iron-icon {
133 color: var(--disabled-text-color);
134
135 @apply(--paper-dropdown-menu-icon);
136 }
137 </style>
138 84
139 <!-- this div fulfills an a11y requirement for combobox, do not remove --> 85 <!-- this div fulfills an a11y requirement for combobox, do not remove -->
140 <div role="button"></div> 86 <div role="button"></div>
141 <paper-menu-button id="menuButton" vertical-align="[[verticalAlign]]" horizo ntal-align="[[horizontalAlign]]" vertical-offset="[[_computeMenuVerticalOffset(n oLabelFloat)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron -select="_onIronSelect" on-iron-deselect="_onIronDeselect" opened="{{opened}}"> 87 <paper-menu-button id="menuButton" vertical-align="[[verticalAlign]]" horizo ntal-align="[[horizontalAlign]]" vertical-offset="[[_computeMenuVerticalOffset(n oLabelFloat)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron -select="_onIronSelect" on-iron-deselect="_onIronDeselect" opened="{{opened}}">
142 <div class="dropdown-trigger"> 88 <div class="dropdown-trigger">
143 <paper-ripple></paper-ripple> 89 <paper-ripple></paper-ripple>
144 <!-- paper-input has type="text" for a11y, do not remove --> 90 <!-- paper-input has type="text" for a11y, do not remove -->
145 <paper-input type="text" invalid="[[invalid]]" readonly="" disabled="[[d isabled]]" value="[[selectedItemLabel]]" placeholder="[[placeholder]]" error-mes sage="[[errorMessage]]" always-float-label="[[alwaysFloatLabel]]" no-label-float ="[[noLabelFloat]]" label="[[label]]"> 91 <paper-input type="text" invalid="[[invalid]]" readonly="" disabled="[[d isabled]]" value="[[selectedItemLabel]]" placeholder="[[placeholder]]" error-mes sage="[[errorMessage]]" always-float-label="[[alwaysFloatLabel]]" no-label-float ="[[noLabelFloat]]" label="[[label]]">
146 <iron-icon icon="arrow-drop-down" suffix=""></iron-icon> 92 <iron-icon icon="paper-dropdown-menu:arrow-drop-down" suffix=""></iron -icon>
147 </paper-input> 93 </paper-input>
148 </div> 94 </div>
149 <content id="content" select=".dropdown-content"></content> 95 <content id="content" select=".dropdown-content"></content>
150 </paper-menu-button> 96 </paper-menu-button>
151 </template> 97 </template>
152 98
153 </dom-module> 99 </dom-module>
154 <script src="paper-dropdown-menu-extracted.js"></script></body></html> 100 <script src="paper-dropdown-menu-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698