OLD | NEW |
1 # paper-input | 1 |
2 | 2 <!--- |
3 `<paper-input>` is a Material Design text field. | 3 |
4 | 4 This README is automatically generated from the comments in these files: |
5 Contains a number of different features for validation, character counting, and
more. | 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 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [](https://travis-ci.org/PolymerElements/paper-input) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-input)_ |
| 15 |
| 16 |
| 17 ##<paper-input> |
| 18 |
| 19 |
| 20 Material design: [Text fields](https://www.google.com/design/spec/components/tex
t-fields.html) |
| 21 |
| 22 `<paper-input>` is a single-line text field with Material Design styling. |
| 23 |
| 24 <paper-input label="Input label"></paper-input> |
| 25 |
| 26 It may include an optional error message or character counter. |
| 27 |
| 28 <paper-input error-message="Invalid input!" label="Input label"></paper-inpu
t> |
| 29 <paper-input char-counter label="Input label"></paper-input> |
| 30 |
| 31 It can also include custom prefix or suffix elements, which are displayed |
| 32 before or after the text input itself. In order for an element to be |
| 33 considered as a prefix, it must have the `prefix` attribute (and similarly |
| 34 for `suffix`). |
| 35 |
| 36 <paper-input label="total"> |
| 37 <div prefix>$</div> |
| 38 <paper-icon-button suffix icon="clear"></paper-icon-button> |
| 39 </paper-input> |
| 40 |
| 41 A `paper-input` can use the native `type=search` or `type=file` features. |
| 42 However, since we can't control the native styling of the input, in these cases |
| 43 it's recommended to use a placeholder text, or `always-float-label`, |
| 44 as to not overlap the native UI (search icon, file button, etc.). |
| 45 |
| 46 <paper-input label="search!" type="search" |
| 47 placeholder="search for cats" autosave="test" results="5"> |
| 48 </paper-input> |
| 49 |
| 50 See `Polymer.PaperInputBehavior` for more API docs. |
| 51 |
| 52 ### Styling |
| 53 |
| 54 See `Polymer.PaperInputContainer` for a list of custom properties used to |
| 55 style this element. |
| 56 |
| 57 |
| 58 |
| 59 ##<paper-input-char-counter> |
| 60 |
| 61 |
| 62 `<paper-input-char-counter>` is a character counter for use with `<paper-input-c
ontainer>`. It |
| 63 shows the number of characters entered in the input and the max length if it is
specified. |
| 64 |
| 65 <paper-input-container> |
| 66 <input is="iron-input" maxlength="20"> |
| 67 <paper-input-char-counter></paper-input-char-counter> |
| 68 </paper-input-container> |
| 69 |
| 70 ### Styling |
| 71 |
| 72 The following mixin is available for styling: |
| 73 |
| 74 Custom property | Description | Default |
| 75 ----------------|-------------|---------- |
| 76 `--paper-input-char-counter` | Mixin applied to the element | `{}` |
| 77 |
| 78 |
| 79 ##<paper-input-container> |
| 80 |
| 81 |
| 82 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in
put">` or |
| 83 `<iron-autogrow-textarea>` and optional add-on elements such as an error message
or character |
| 84 counter, used to implement Material Design text fields. |
| 85 |
| 86 For example: |
| 87 |
| 88 <paper-input-container> |
| 89 <label>Your name</label> |
| 90 <input is="iron-input"> |
| 91 </paper-input-container> |
| 92 |
| 93 ### Listening for input changes |
| 94 |
| 95 By default, it listens for changes on the `bind-value` attribute on its children
nodes and perform |
| 96 tasks such as auto-validating and label styling when the `bind-value` changes. Y
ou can configure |
| 97 the attribute it listens to with the `attr-for-value` attribute. |
| 98 |
| 99 ### Using a custom input element |
| 100 |
| 101 You can use a custom input element in a `<paper-input-container>`, for example t
o implement a |
| 102 compound input field like a social security number input. The custom input eleme
nt should have the |
| 103 `paper-input-input` class, have a `notify:true` value property and optionally im
plements |
| 104 `Polymer.IronValidatableBehavior` if it is validatable. |
| 105 |
| 106 <paper-input-container attr-for-value="ssn-value"> |
| 107 <label>Social security number</label> |
| 108 <ssn-input class="paper-input-input"></ssn-input> |
| 109 </paper-input-container> |
| 110 |
| 111 ### Validation |
| 112 |
| 113 If the `auto-validate` attribute is set, the input container will validate the i
nput and update |
| 114 the container styling when the input value changes. |
| 115 |
| 116 ### Add-ons |
| 117 |
| 118 Add-ons are child elements of a `<paper-input-container>` with the `add-on` attr
ibute and |
| 119 implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified whe
n the input value |
| 120 or validity changes, and may implement functionality such as error messages or c
haracter counters. |
| 121 They appear at the bottom of the input. |
| 122 |
| 123 ### Prefixes and suffixes |
| 124 These are child elements of a `<paper-input-container>` with the `prefix` |
| 125 or `suffix` attribute, and are displayed inline with the input, before or after. |
| 126 |
| 127 <paper-input-container> |
| 128 <div prefix>$</div> |
| 129 <label>Total</label> |
| 130 <input is="iron-input"> |
| 131 <paper-icon-button suffix icon="clear"></paper-icon-button> |
| 132 </paper-input-container> |
| 133 |
| 134 ### Styling |
| 135 |
| 136 The following custom properties and mixins are available for styling: |
| 137 |
| 138 Custom property | Description | Default |
| 139 ----------------|-------------|---------- |
| 140 `--paper-input-container-color` | Label and underline color when the input is no
t focused | `--secondary-text-color` |
| 141 `--paper-input-container-focus-color` | Label and underline color when the input
is focused | `--default-primary-color` |
| 142 `--paper-input-container-invalid-color` | Label and underline color when the inp
ut is is invalid | `--google-red-500` |
| 143 `--paper-input-container-input-color` | Input foreground color | `--primary-text
-color` |
| 144 `--paper-input-container` | Mixin applied to the container | `{}` |
| 145 `--paper-input-container-disabled` | Mixin applied to the container when it's di
sabled | `{}` |
| 146 `--paper-input-container-label` | Mixin applied to the label | `{}` |
| 147 `--paper-input-container-label-focus` | Mixin applied to the label when the inpu
t is focused | `{}` |
| 148 `--paper-input-container-input` | Mixin applied to the input | `{}` |
| 149 `--paper-input-container-underline` | Mixin applied to the underline | `{}` |
| 150 `--paper-input-container-underline-focus` | Mixin applied to the underline when
the input is focued | `{}` |
| 151 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh
en the input is disabled | `{}` |
| 152 `--paper-input-prefix` | Mixin applied to the input prefix | `{}` |
| 153 `--paper-input-suffix` | Mixin applied to the input suffix | `{}` |
| 154 |
| 155 This element is `display:block` by default, but you can set the `inline` attribu
te to make it |
| 156 `display:inline-block`. |
| 157 |
| 158 |
| 159 ##<paper-input-error> |
| 160 |
| 161 |
| 162 `<paper-input-error>` is an error message for use with `<paper-input-container>`
. The error is |
| 163 displayed when the `<paper-input-container>` is `invalid`. |
| 164 |
| 165 <paper-input-container> |
| 166 <input is="iron-input" pattern="[0-9]*"> |
| 167 <paper-input-error>Only numbers are allowed!</paper-input-error> |
| 168 </paper-input-container> |
| 169 |
| 170 ### Styling |
| 171 |
| 172 The following custom properties and mixins are available for styling: |
| 173 |
| 174 Custom property | Description | Default |
| 175 ----------------|-------------|---------- |
| 176 `--paper-input-container-invalid-color` | The foreground color of the error | `-
-google-red-500` |
| 177 `--paper-input-error` | Mixin applied to the error | `{
}` |
| 178 |
| 179 |
| 180 ##<paper-textarea> |
| 181 |
| 182 |
| 183 `<paper-textarea>` is a multi-line text field with Material Design styling. |
| 184 |
| 185 <paper-textarea label="Textarea label"></paper-textarea> |
| 186 |
| 187 See `Polymer.PaperInputBehavior` for more API docs. |
| 188 |
| 189 ### Validation |
| 190 |
| 191 Currently only `required` and `maxlength` validation is supported. |
| 192 |
| 193 ### Styling |
| 194 |
| 195 See `Polymer.PaperInputContainer` for a list of custom properties used to |
| 196 style this element. |
| 197 |
| 198 |
| 199 ##Polymer.PaperInputBehavior |
| 200 |
| 201 |
| 202 Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-containe
r>`. This |
| 203 behavior is implemented by `<paper-input>`. It exposes a number of properties fr
om |
| 204 `<paper-input-container>` and `<input is="iron-input">` and they should be bound
in your |
| 205 template. |
| 206 |
| 207 The input element can be accessed by the `inputElement` property if you need to
access |
| 208 properties or methods that are not exposed. |
| 209 |
| 210 |
| 211 ##Polymer.PaperInputAddonBehavior |
| 212 |
| 213 |
| 214 Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-c
ontainer>`. A |
| 215 add-on appears below the input, and may display information based on the input v
alue and |
| 216 validity such as a character counter or an error message. |
| 217 |
OLD | NEW |