diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-form/demo/cats-only.html')
-rw-r--r-- | catapult/third_party/polymer/components/iron-form/demo/cats-only.html | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-form/demo/cats-only.html b/catapult/third_party/polymer/components/iron-form/demo/cats-only.html new file mode 100644 index 00000000..116df8b8 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-form/demo/cats-only.html @@ -0,0 +1,65 @@ +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<link rel="import" href="../../polymer/polymer.html"> +<link rel="import" href="../../iron-validatable-behavior/iron-validatable-behavior.html"> + +<dom-module id="cats-only"> + <template> + <style> + :host { + display: inline-block; + } + input { + width: 250px; + } + :host([invalid]) input { + border-color: red; + } + </style> + <input value="{{value}}" id="input" placeholder="Type 'cats' to prove you like cats"> + </template> +</dom-module> + +<script> + + Polymer({ + is: 'cats-only', + + properties: { + value: { + type: String + }, + + name: { + type: String + } + }, + + behaviors: [ + Polymer.IronValidatableBehavior + ], + + listeners: { + 'input': '_onInput' + }, + + _onInput: function() { + this.value = this.$.input.value; + }, + + // Overidden from Polymer.IronValidatableBehavior. Will set the `invalid` + // attribute automatically, which should be used for styling. + _getValidity: function() { + return this.value === 'cats'; + } + + }); + +</script> |