| 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 |