OLD | NEW |
1 | 1 |
2 <!--- | 2 <!--- |
3 | 3 |
4 This README is automatically generated from the comments in these files: | 4 This README is automatically generated from the comments in these files: |
5 paper-input-addon-behavior.html paper-input-behavior.html paper-input-char-cou
nter.html paper-input-container.html paper-input-error.html paper-input.html
paper-textarea.html | 5 paper-input-addon-behavior.html paper-input-behavior.html paper-input-char-cou
nter.html paper-input-container.html paper-input-error.html paper-input.html
paper-textarea.html |
6 | 6 |
7 Edit those files, and our readme bot will duplicate them over here! | 7 Edit those files, and our readme bot will duplicate them over here! |
8 Edit this file, and the bot will squash your changes :) | 8 Edit this file, and the bot will squash your changes :) |
9 | 9 |
10 The bot does some handling of markdown. Please file a bug if it does the wrong | 10 The bot does some handling of markdown. Please file a bug if it does the wrong |
11 thing! https://github.com/PolymerLabs/tedium/issues | 11 thing! https://github.com/PolymerLabs/tedium/issues |
12 | 12 |
13 --> | 13 --> |
14 | 14 |
15 [](https://travis-ci.org/PolymerElements/paper-input) | 15 [](https://travis-ci.org/PolymerElements/paper-input) |
16 | 16 |
17 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-input)_ | 17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-input)_ |
18 | 18 |
19 | 19 |
20 ##<paper-input> | 20 ##<paper-input> |
21 | 21 |
22 Material design: [Text fields](https://www.google.com/design/spec/components/tex
t-fields.html) | 22 Material design: [Text fields](https://www.google.com/design/spec/components/tex
t-fields.html) |
23 | 23 |
24 `<paper-input>` is a single-line text field with Material Design styling. | 24 `<paper-input>` is a single-line text field with Material Design styling. |
25 | 25 |
26 ```html | 26 ```html |
27 <paper-input label="Input label"></paper-input> | 27 <paper-input label="Input label"></paper-input> |
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
155 </paper-input-container> | 155 </paper-input-container> |
156 ``` | 156 ``` |
157 | 157 |
158 ### Styling | 158 ### Styling |
159 | 159 |
160 The following custom properties and mixins are available for styling: | 160 The following custom properties and mixins are available for styling: |
161 | 161 |
162 | Custom property | Description | Default | | 162 | Custom property | Description | Default | |
163 | --- | --- | --- | | 163 | --- | --- | --- | |
164 | `--paper-input-container-color` | Label and underline color when the input is
not focused | `--secondary-text-color` | | 164 | `--paper-input-container-color` | Label and underline color when the input is
not focused | `--secondary-text-color` | |
165 | `--paper-input-container-focus-color` | Label and underline color when the inp
ut is focused | `--default-primary-color` | | 165 | `--paper-input-container-focus-color` | Label and underline color when the inp
ut is focused | `--primary-color` | |
166 | `--paper-input-container-invalid-color` | Label and underline color when the i
nput is is invalid | `--google-red-500` | | 166 | `--paper-input-container-invalid-color` | Label and underline color when the i
nput is is invalid | `--error-color` | |
167 | `--paper-input-container-input-color` | Input foreground color | `--primary-te
xt-color` | | 167 | `--paper-input-container-input-color` | Input foreground color | `--primary-te
xt-color` | |
168 | `--paper-input-container` | Mixin applied to the container | `{}` | | 168 | `--paper-input-container` | Mixin applied to the container | `{}` | |
169 | `--paper-input-container-disabled` | Mixin applied to the container when it's
disabled | `{}` | | 169 | `--paper-input-container-disabled` | Mixin applied to the container when it's
disabled | `{}` | |
170 | `--paper-input-container-label` | Mixin applied to the label | `{}` | | 170 | `--paper-input-container-label` | Mixin applied to the label | `{}` | |
171 | `--paper-input-container-label-focus` | Mixin applied to the label when the in
put is focused | `{}` | | 171 | `--paper-input-container-label-focus` | Mixin applied to the label when the in
put is focused | `{}` | |
172 | `--paper-input-container-label-floating` | Mixin applied to the label when flo
ating | `{}` | | 172 | `--paper-input-container-label-floating` | Mixin applied to the label when flo
ating | `{}` | |
173 | `--paper-input-container-input` | Mixin applied to the input | `{}` | | 173 | `--paper-input-container-input` | Mixin applied to the input | `{}` | |
174 | `--paper-input-container-underline` | Mixin applied to the underline | `{}` | | 174 | `--paper-input-container-underline` | Mixin applied to the underline | `{}` | |
175 | `--paper-input-container-underline-focus` | Mixin applied to the underline whe
n the input is focused | `{}` | | 175 | `--paper-input-container-underline-focus` | Mixin applied to the underline whe
n the input is focused | `{}` | |
176 | `--paper-input-container-underline-disabled` | Mixin applied to the underline
when the input is disabled | `{}` | | 176 | `--paper-input-container-underline-disabled` | Mixin applied to the underline
when the input is disabled | `{}` | |
(...skipping 16 matching lines...) Expand all Loading... |
193 <paper-input-error>Only numbers are allowed!</paper-input-error> | 193 <paper-input-error>Only numbers are allowed!</paper-input-error> |
194 </paper-input-container> | 194 </paper-input-container> |
195 ``` | 195 ``` |
196 | 196 |
197 ### Styling | 197 ### Styling |
198 | 198 |
199 The following custom properties and mixins are available for styling: | 199 The following custom properties and mixins are available for styling: |
200 | 200 |
201 | Custom property | Description | Default | | 201 | Custom property | Description | Default | |
202 | --- | --- | --- | | 202 | --- | --- | --- | |
203 | `--paper-input-container-invalid-color` | The foreground color of the error |
`--google-red-500` | | 203 | `--paper-input-container-invalid-color` | The foreground color of the error |
`--error-color` | |
204 | `--paper-input-error` | Mixin applied to the error | `{}` | | 204 | `--paper-input-error` | Mixin applied to the error | `{}` | |
205 | 205 |
206 | 206 |
207 | 207 |
208 ##<paper-textarea> | 208 ##<paper-textarea> |
209 | 209 |
210 `<paper-textarea>` is a multi-line text field with Material Design styling. | 210 `<paper-textarea>` is a multi-line text field with Material Design styling. |
211 | 211 |
212 ```html | 212 ```html |
213 <paper-textarea label="Textarea label"></paper-textarea> | 213 <paper-textarea label="Textarea label"></paper-textarea> |
(...skipping 24 matching lines...) Expand all Loading... |
238 | 238 |
239 Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-containe
r>`. This | 239 Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-containe
r>`. This |
240 behavior is implemented by `<paper-input>`. It exposes a number of properties fr
om | 240 behavior is implemented by `<paper-input>`. It exposes a number of properties fr
om |
241 `<paper-input-container>` and `<input is="iron-input">` and they should be bound
in your | 241 `<paper-input-container>` and `<input is="iron-input">` and they should be bound
in your |
242 template. | 242 template. |
243 | 243 |
244 The input element can be accessed by the `inputElement` property if you need to
access | 244 The input element can be accessed by the `inputElement` property if you need to
access |
245 properties or methods that are not exposed. | 245 properties or methods that are not exposed. |
246 | 246 |
247 | 247 |
OLD | NEW |