diff options
Diffstat (limited to 'chromium/third_party/catapult/third_party/polymer2/bower_components/iron-input/README.md')
| -rw-r--r-- | chromium/third_party/catapult/third_party/polymer2/bower_components/iron-input/README.md | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/iron-input/README.md b/chromium/third_party/catapult/third_party/polymer2/bower_components/iron-input/README.md new file mode 100644 index 00000000000..32a84ebe626 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/iron-input/README.md @@ -0,0 +1,80 @@ + +<!--- + +This README is automatically generated from the comments in these files: +iron-input.html + +Edit those files, and our readme bot will duplicate them over here! +Edit this file, and the bot will squash your changes :) + +The bot does some handling of markdown. Please file a bug if it does the wrong +thing! https://github.com/PolymerLabs/tedium/issues + +--> + +[](https://travis-ci.org/PolymerElements/iron-input) + +_[Demo and API docs](https://elements.polymer-project.org/elements/iron-input)_ + + +## <iron-input> + +`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior` +to `<input>`. + +### Changes in 2.0 +Since type-extensions are not available in 2.0, `<iron-input` is a wrapper against a native `input`: + +```html +<iron-input> + <input> +</iron-input> + ``` + +Other changes: +- `prevent-invalid-input` and `allowed-pattern` had to be always used together; deleted `prevent-invalid-input`, so that only +`allowed-pattern` is needed +- added an `auto-validate` property +- Note: imperatively setting the `value` attribute on the native `<input>` is not supported -- the native `input` does not fire an event in this case, so this update cannot be observed, and `bind-value` cannot be updated. + +### Two-way binding + +By default you can only get notified of changes to an `input`'s `value` due to user input: + +```html +<input value="{{myValue::input}}"> +``` + +`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used +for two-way data binding. `bind-value` will notify if it is changed either by user input or by script. + +```html +<iron-input bind-value="{{bindValue}}"> + <input value="{{value::input}}"> +</iron-input> +``` + +### Custom validators + +You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`. + +```html +<iron-input auto-validate validator="my-custom-validator"> + <input placeholder="only 'cat' is valid"> + </iron-input> +``` + +### Stopping invalid input + +It may be desirable to only allow users to enter certain characters. You can use the +`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature +is separate from validation, and `allowed-pattern` does not affect how the input is validated. + +```html +<!-- only allow characters that match [0-9] --> +<iron-input allowed-pattern="[0-9]"> + <input pattern="\d{5}"> +</iron-input> +``` + + |