| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 @license |
| 3 Copyright (c) 2016 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 |
| 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 |
| 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 |
| 9 --><html><head><link rel="import" href="../polymer/polymer.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-validatable-behavior/iron-validatable-behavior.
html"> |
| 15 <link rel="import" href="../paper-menu-button/paper-menu-button.html"> |
| 16 <link rel="import" href="../paper-behaviors/paper-ripple-behavior.html"> |
| 17 <link rel="import" href="../paper-styles/default-theme.html"> |
| 18 |
| 19 <link rel="import" href="paper-dropdown-menu-icons.html"> |
| 20 <link rel="import" href="paper-dropdown-menu-shared-styles.html"> |
| 21 |
| 22 <!-- |
| 23 Material design: [Dropdown menus](https://www.google.com/design/spec/components/
buttons.html#buttons-dropdown-buttons) |
| 24 |
| 25 This is a faster, lighter version of `paper-dropdown-menu`, that does not |
| 26 use a `<paper-input>` internally. Use this element if you're concerned about |
| 27 the performance of this element, i.e., if you plan on using many dropdowns on |
| 28 the same page. Note that this element has a slightly different styling API |
| 29 than `paper-dropdown-menu`. |
| 30 |
| 31 `paper-dropdown-menu-light` is similar to a native browser select element. |
| 32 `paper-dropdown-menu-light` works with selectable content. The currently selecte
d |
| 33 item is displayed in the control. If no item is selected, the `label` is |
| 34 displayed instead. |
| 35 |
| 36 Example: |
| 37 |
| 38 <paper-dropdown-menu-light label="Your favourite pastry"> |
| 39 <paper-listbox class="dropdown-content"> |
| 40 <paper-item>Croissant</paper-item> |
| 41 <paper-item>Donut</paper-item> |
| 42 <paper-item>Financier</paper-item> |
| 43 <paper-item>Madeleine</paper-item> |
| 44 </paper-listbox> |
| 45 </paper-dropdown-menu-light> |
| 46 |
| 47 This example renders a dropdown menu with 4 options. |
| 48 |
| 49 The child element with the class `dropdown-content` is used as the dropdown |
| 50 menu. This can be a [`paper-listbox`](paper-listbox), or any other or |
| 51 element that acts like an [`iron-selector`](iron-selector). |
| 52 |
| 53 Specifically, the menu child must fire an |
| 54 [`iron-select`](iron-selector#event-iron-select) event when one of its |
| 55 children is selected, and an [`iron-deselect`](iron-selector#event-iron-deselect
) |
| 56 event when a child is deselected. The selected or deselected item must |
| 57 be passed as the event's `detail.item` property. |
| 58 |
| 59 Applications can listen for the `iron-select` and `iron-deselect` events |
| 60 to react when options are selected and deselected. |
| 61 |
| 62 ### Styling |
| 63 |
| 64 The following custom properties and mixins are also available for styling: |
| 65 |
| 66 Custom property | Description | Default |
| 67 ----------------|-------------|---------- |
| 68 `--paper-dropdown-menu` | A mixin that is applied to the element host | `{}` |
| 69 `--paper-dropdown-menu-disabled` | A mixin that is applied to the element host w
hen disabled | `{}` |
| 70 `--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple
| `{}` |
| 71 `--paper-dropdown-menu-button` | A mixin that is applied to the internal menu bu
tton | `{}` |
| 72 `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{
}` |
| 73 `--paper-dropdown-menu-disabled-opacity` | The opacity of the dropdown when disa
bled | `0.33` |
| 74 `--paper-dropdown-menu-color` | The color of the input/label/underline when the
dropdown is unfocused | `--primary-text-color` |
| 75 `--paper-dropdown-menu-focus-color` | The color of the label/underline when the
dropdown is focused | `--primary-color` |
| 76 `--paper-dropdown-error-color` | The color of the label/underline when the dropd
own is invalid | `--error-color` |
| 77 `--paper-dropdown-menu-label` | Mixin applied to the label | `{}` |
| 78 `--paper-dropdown-menu-input` | Mixin appled to the input | `{}` |
| 79 |
| 80 Note that in this element, the underline is just the bottom border of the "input
". |
| 81 To style it: |
| 82 |
| 83 <style is=custom-style> |
| 84 paper-dropdown-menu-light.custom { |
| 85 --paper-dropdown-menu-input: { |
| 86 border-bottom: 2px dashed lavender; |
| 87 }; |
| 88 </style> |
| 89 |
| 90 @group Paper Elements |
| 91 @element paper-dropdown-menu-light |
| 92 @hero hero.svg |
| 93 @demo demo/index.html |
| 94 --> |
| 95 |
| 96 </head><body><dom-module id="paper-dropdown-menu-light"> |
| 97 <template> |
| 98 <style include="paper-dropdown-menu-shared-styles"> |
| 99 /** |
| 100 * All of these styles below are for styling the fake-input display |
| 101 */ |
| 102 .dropdown-trigger { |
| 103 box-sizing: border-box; |
| 104 position: relative; |
| 105 width: 100%; |
| 106 padding: 16px 0 8px 0; |
| 107 } |
| 108 |
| 109 :host([disabled]) .dropdown-trigger { |
| 110 pointer-events: none; |
| 111 opacity: var(--paper-dropdown-menu-disabled-opacity, 0.33); |
| 112 } |
| 113 |
| 114 :host([no-label-float]) .dropdown-trigger { |
| 115 padding-top: 8px; /* If there's no label, we need less space up top. *
/ |
| 116 } |
| 117 |
| 118 #input { |
| 119 @apply(--paper-font-subhead); |
| 120 @apply(--paper-font-common-nowrap); |
| 121 border-bottom: 1px solid var(--paper-dropdown-menu-color, --secondary-te
xt-color); |
| 122 color: var(--paper-dropdown-menu-color, --primary-text-color); |
| 123 width: 200px; /* Default size of an <input> */ |
| 124 min-height: 24px; |
| 125 box-sizing: border-box; |
| 126 padding: 12px 20px 0 0; /* Right padding so that text doesn't overlap
the icon */ |
| 127 outline: none; |
| 128 @apply(--paper-dropdown-menu-input); |
| 129 } |
| 130 |
| 131 :host-context([dir="rtl"]) #input { |
| 132 padding-right: 0px; |
| 133 padding-left: 20px; |
| 134 } |
| 135 |
| 136 :host([disabled]) #input { |
| 137 border-bottom: 1px dashed var(--paper-dropdown-menu-color, --secondary-t
ext-color); |
| 138 } |
| 139 |
| 140 :host([invalid]) #input { |
| 141 border-bottom: 2px solid var(--paper-dropdown-error-color, --error-color
); |
| 142 } |
| 143 |
| 144 :host([no-label-float]) #input { |
| 145 padding-top: 0; /* If there's no label, we need less space up top. */ |
| 146 } |
| 147 |
| 148 label { |
| 149 @apply(--paper-font-subhead); |
| 150 @apply(--paper-font-common-nowrap); |
| 151 display: block; |
| 152 position: absolute; |
| 153 bottom: 0; |
| 154 left: 0; |
| 155 right: 0; |
| 156 /** |
| 157 * The container has a 16px top padding, and there's 12px of padding |
| 158 * between the input and the label (from the input's padding-top) |
| 159 */ |
| 160 top: 28px; |
| 161 box-sizing: border-box; |
| 162 width: 100%; |
| 163 padding-right: 20px; /* Right padding so that text doesn't overlap th
e icon */ |
| 164 text-align: left; |
| 165 transition-duration: .2s; |
| 166 transition-timing-function: cubic-bezier(.4,0,.2,1); |
| 167 color: var(--paper-dropdown-menu-color, --secondary-text-color); |
| 168 @apply(--paper-dropdown-menu-label); |
| 169 } |
| 170 |
| 171 :host-context([dir="rtl"]) label { |
| 172 padding-right: 0px; |
| 173 padding-left: 20px; |
| 174 } |
| 175 |
| 176 :host([no-label-float]) label { |
| 177 top: 8px; |
| 178 } |
| 179 |
| 180 label.label-is-floating { |
| 181 font-size: 12px; |
| 182 top: 8px; |
| 183 } |
| 184 |
| 185 label.label-is-hidden { |
| 186 display: none; |
| 187 } |
| 188 |
| 189 :host([focused]) label.label-is-floating { |
| 190 color: var(--paper-dropdown-menu-focus-color, --primary-color); |
| 191 } |
| 192 |
| 193 :host([invalid]) label.label-is-floating { |
| 194 color: var(--paper-dropdown-error-color, --error-color); |
| 195 } |
| 196 |
| 197 /** |
| 198 * Sets up the focused underline. It's initially hidden, and becomes |
| 199 * visible when it's focused. |
| 200 */ |
| 201 label:after { |
| 202 background-color: var(--paper-dropdown-menu-focus-color, --primary-color
); |
| 203 bottom: 8px; /* The container has an 8px bottom padding */ |
| 204 content: ''; |
| 205 height: 2px; |
| 206 left: 45%; |
| 207 position: absolute; |
| 208 transition-duration: .2s; |
| 209 transition-timing-function: cubic-bezier(.4,0,.2,1); |
| 210 visibility: hidden; |
| 211 width: 8px; |
| 212 z-index: 10; |
| 213 } |
| 214 |
| 215 :host([invalid]) label:after { |
| 216 background-color: var(--paper-dropdown-error-color, --error-color); |
| 217 } |
| 218 |
| 219 :host([no-label-float]) label:after { |
| 220 bottom: 8px; /* The container has a 8px bottom padding */ |
| 221 } |
| 222 |
| 223 :host([focused]:not([disabled])) label:after { |
| 224 left: 0; |
| 225 visibility: visible; |
| 226 width: 100%; |
| 227 } |
| 228 |
| 229 iron-icon { |
| 230 position: absolute; |
| 231 right: 0px; |
| 232 bottom: 8px; /* The container has an 8px bottom padding */ |
| 233 @apply(--paper-font-subhead); |
| 234 margin-top: 12px; |
| 235 color: var(--disabled-text-color); |
| 236 @apply(--paper-dropdown-menu-icon); |
| 237 } |
| 238 |
| 239 :host-context([dir="rtl"]) iron-icon { |
| 240 left: 0; |
| 241 right: auto; |
| 242 } |
| 243 |
| 244 :host([no-label-float]) iron-icon { |
| 245 margin-top: 0px; |
| 246 } |
| 247 |
| 248 .error { |
| 249 display: inline-block; |
| 250 visibility: hidden; |
| 251 color: var(--paper-dropdown-error-color, --error-color); |
| 252 @apply(--paper-font-caption); |
| 253 position: absolute; |
| 254 left:0; |
| 255 right:0; |
| 256 bottom: -12px; |
| 257 } |
| 258 |
| 259 :host([invalid]) .error { |
| 260 visibility: visible; |
| 261 } |
| 262 </style> |
| 263 |
| 264 <!-- this div fulfills an a11y requirement for combobox, do not remove --> |
| 265 <div role="button"></div> |
| 266 <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}}"> |
| 267 <div class="dropdown-trigger"> |
| 268 <label hidden$="[[!label]]" class$="[[_computeLabelClass(noLabelFloat,al
waysFloatLabel,hasContent)]]">[[label]]</label> |
| 269 <div id="input" tabindex="-1"> </div> |
| 270 <iron-icon icon="paper-dropdown-menu:arrow-drop-down"></iron-icon> |
| 271 <span class="error">[[errorMessage]]</span> |
| 272 </div> |
| 273 <content id="content" select=".dropdown-content"></content> |
| 274 </paper-menu-button> |
| 275 </template> |
| 276 |
| 277 </dom-module> |
| 278 <script src="paper-dropdown-menu-light-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1862213002:
Roll third_party/polymer. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master