| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 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 | |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS | |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS | |
| 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 | |
| 8 --><!-- | |
| 9 | |
| 10 Material Design: <a href="http://www.google.com/design/spec/components/text-fiel
ds.html">Text fields</a> | |
| 11 | |
| 12 `paper-input-decorator` adds Material Design input field styling and animations
to an element. | |
| 13 | |
| 14 Example: | |
| 15 | |
| 16 <paper-input-decorator label="Your Name"> | |
| 17 <input is="core-input"> | |
| 18 </paper-input-decorator> | |
| 19 | |
| 20 <paper-input-decorator floatingLabel label="Your address"> | |
| 21 <textarea></textarea> | |
| 22 </paper-input-decorator> | |
| 23 | |
| 24 Theming | |
| 25 ------- | |
| 26 | |
| 27 `paper-input-decorator` uses `core-style` for global theming. The following opti
ons are available: | |
| 28 | |
| 29 - `CoreStyle.g.paperInput.labelColor` - The inline label, floating label, error
message and error icon color when the input does not have focus. | |
| 30 - `CoreStyle.g.paperInput.focusedColor` - The floating label and the underline c
olor when the input has focus. | |
| 31 - `CoreStyle.g.paperInput.invalidColor` - The error message, the error icon, the
floating label and the underline's color when the input is invalid and has focu
s. | |
| 32 | |
| 33 To add custom styling to only some elements, use these selectors: | |
| 34 | |
| 35 paper-input-decorator /deep/ .label-text, | |
| 36 paper-input-decorator /deep/ .error { | |
| 37 /* inline label, floating label, error message and error icon color whe
n the input is unfocused */ | |
| 38 color: green; | |
| 39 } | |
| 40 | |
| 41 paper-input-decorator /deep/ ::-webkit-input-placeholder { | |
| 42 /* platform specific rules for placeholder text */ | |
| 43 color: green; | |
| 44 } | |
| 45 paper-input-decorator /deep/ ::-moz-placeholder { | |
| 46 color: green; | |
| 47 } | |
| 48 paper-input-decorator /deep/ :-ms-input-placeholder { | |
| 49 color: green; | |
| 50 } | |
| 51 | |
| 52 paper-input-decorator /deep/ .unfocused-underline { | |
| 53 /* line color when the input is unfocused */ | |
| 54 background-color: green; | |
| 55 } | |
| 56 | |
| 57 paper-input-decorator[focused] /deep/ .floating-label .label-text { | |
| 58 /* floating label color when the input is focused */ | |
| 59 color: orange; | |
| 60 } | |
| 61 | |
| 62 paper-input-decorator /deep/ .focused-underline { | |
| 63 /* line color when the input is focused */ | |
| 64 background-color: orange; | |
| 65 } | |
| 66 | |
| 67 paper-input-decorator.invalid[focused] /deep/ .floated-label .label-text, | |
| 68 paper-input-decorator[focused] /deep/ .error { | |
| 69 /* floating label, error message nad error icon color when the input is
invalid and focused */ | |
| 70 color: salmon; | |
| 71 } | |
| 72 | |
| 73 paper-input-decorator.invalid /deep/ .focused-underline { | |
| 74 /* line and color when the input is invalid and focused */ | |
| 75 background-color: salmon; | |
| 76 } | |
| 77 | |
| 78 Form submission | |
| 79 --------------- | |
| 80 | |
| 81 You can use inputs decorated with this element in a `form` as usual. | |
| 82 | |
| 83 Validation | |
| 84 ---------- | |
| 85 | |
| 86 Because you provide the `input` element to `paper-input-decorator`, you can use
any validation library | |
| 87 or the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Co
nstraint_validation">HTML5 Constraints Validation API</a> | |
| 88 to implement validation. Set the `isInvalid` attribute when the input is validat
ed, and provide an | |
| 89 error message in the `error` attribute. | |
| 90 | |
| 91 Example: | |
| 92 | |
| 93 <paper-input-decorator id="paper1" error="Value must start with a number!"> | |
| 94 <input id="input1" is="core-input" pattern="^[0-9].*"> | |
| 95 </paper-input-decorator> | |
| 96 <button onclick="validate()"></button> | |
| 97 <script> | |
| 98 function validate() { | |
| 99 var decorator = document.getElementById('paper1'); | |
| 100 var input = document.getElementById('input1'); | |
| 101 decorator.isInvalid = !input.validity.valid; | |
| 102 } | |
| 103 </script> | |
| 104 | |
| 105 Example to validate as the user types: | |
| 106 | |
| 107 <template is="auto-binding"> | |
| 108 <paper-input-decorator id="paper2" error="Value must start with a number
!" isInvalid="{{!$.input2.validity.valid}}"> | |
| 109 <input id="input2" is="core-input" pattern="^[0-9].*"> | |
| 110 </paper-input-decorator> | |
| 111 </template> | |
| 112 | |
| 113 Accessibility | |
| 114 ------------- | |
| 115 | |
| 116 `paper-input-decorator` will automatically set the `aria-label` attribute on the
nested input | |
| 117 to the value of `label`. Do not set the `placeholder` attribute on the nested in
put, as it will | |
| 118 conflict with this element. | |
| 119 | |
| 120 @group Paper Elements | |
| 121 @element paper-input-decorator | |
| 122 @homepage github.io | |
| 123 --><html><head><link href="../polymer/polymer.html" rel="import"> | |
| 124 <link href="../core-icon/core-icon.html" rel="import"> | |
| 125 <link href="../core-icons/core-icons.html" rel="import"> | |
| 126 <link href="../core-input/core-input.html" rel="import"> | |
| 127 <link href="../core-style/core-style.html" rel="import"> | |
| 128 | |
| 129 </head><body><core-style id="paper-input-decorator"> | |
| 130 | |
| 131 .label-text, | |
| 132 .error { | |
| 133 color: {{g.paperInput.labelColor}}; | |
| 134 } | |
| 135 | |
| 136 ::-webkit-input-placeholder { | |
| 137 color: {{g.paperInput.labelColor}}; | |
| 138 } | |
| 139 | |
| 140 ::-moz-placeholder { | |
| 141 color: {{g.paperInput.labelColor}}; | |
| 142 } | |
| 143 | |
| 144 :-ms-input-placeholder { | |
| 145 color: {{g.paperInput.labelColor}}; | |
| 146 } | |
| 147 | |
| 148 .unfocused-underline { | |
| 149 background-color: {{g.paperInput.labelColor}}; | |
| 150 } | |
| 151 | |
| 152 :host([focused]) .floated-label .label-text { | |
| 153 color: {{g.paperInput.focusedColor}}; | |
| 154 } | |
| 155 | |
| 156 .focused-underline { | |
| 157 background-color: {{g.paperInput.focusedColor}}; | |
| 158 } | |
| 159 | |
| 160 :host(.invalid) .floated-label .label-text, | |
| 161 .error { | |
| 162 color: {{g.paperInput.invalidColor}}; | |
| 163 } | |
| 164 | |
| 165 :host(.invalid) .unfocused-underline, | |
| 166 :host(.invalid) .focused-underline { | |
| 167 background-color: {{g.paperInput.invalidColor}}; | |
| 168 } | |
| 169 | |
| 170 </core-style> | |
| 171 | |
| 172 <polymer-element name="paper-input-decorator" layout="" vertical="" on-transitio
nend="{{transitionEndAction}}" on-webkittransitionend="{{transitionEndAction}}"
on-input="{{inputAction}}" on-down="{{downAction}}" assetpath=""> | |
| 173 | |
| 174 <template> | |
| 175 | |
| 176 <link href="paper-input-decorator.css" rel="stylesheet"> | |
| 177 <core-style ref="paper-input-decorator"></core-style> | |
| 178 | |
| 179 <div class="floated-label" aria-hidden="true" hidden?="{{!floatingLabel}}" i
nvisible?="{{!floatingLabelVisible || labelAnimated}}"> | |
| 180 <!-- needed for floating label animation measurement --> | |
| 181 <span id="floatedLabelText" class="label-text">{{label}}</span> | |
| 182 </div> | |
| 183 | |
| 184 <div class="input-body" flex="" auto="" relative=""> | |
| 185 | |
| 186 <div class="label" fit="" invisible="" aria-hidden="true"> | |
| 187 <!-- needed for floating label animation measurement --> | |
| 188 <span id="labelText" class="label-text" invisible?="{{!_labelVisible}}"
animated?="{{labelAnimated}}">{{label}}</span> | |
| 189 </div> | |
| 190 | |
| 191 <content></content> | |
| 192 | |
| 193 </div> | |
| 194 | |
| 195 <div id="underline" class="underline" relative=""> | |
| 196 <div class="unfocused-underline" fit="" invisible?="{{disabled}}"></div> | |
| 197 <div id="focusedUnderline" class="focused-underline" fit="" invisible?="{{
!focused}}" animated?="{{underlineAnimated}}"></div> | |
| 198 </div> | |
| 199 | |
| 200 <div class="error" layout="" horizontal="" center="" hidden?="{{!isInvalid}}
"> | |
| 201 <div class="error-text" flex="" auto="" role="alert" aria-hidden="{{!isInv
alid}}">{{error}}</div> | |
| 202 <core-icon class="error-icon" icon="warning"></core-icon> | |
| 203 </div> | |
| 204 | |
| 205 </template> | |
| 206 | |
| 207 | |
| 208 | |
| 209 </polymer-element> | |
| 210 <script charset="utf-8" src="paper-input-decorator-extracted.js"></script></body
></html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1215543002:
Remove Polymer 0.5. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master