OLD | NEW |
(Empty) | |
| 1 <link rel="import" href="chrome://resources/polymer/core-input/core-input.html"> |
| 2 <link rel="import" href="chrome://resources/polymer/paper-input/paper-input-deco
rator.html"> |
| 3 <link rel="import" href="chrome://resources/polymer/polymer/layout.html"> |
| 4 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> |
| 5 |
| 6 <!-- |
| 7 Material desing input field, that supports different input types and email |
| 8 validation and matches GAIA's visual style. |
| 9 |
| 10 Examples: |
| 11 <gaia-input value="Simple text input" required></gaia-input> |
| 12 <gaia-input type="email" domain="example.com"></gaia-input> |
| 13 |
| 14 Attributes: |
| 15 'label' - same as <paper-input>'s 'label'. |
| 16 'value' - same as <input>'s 'value'. |
| 17 'type' - same as <input>'s 'type'. |
| 18 'domain' - optional attribute for email input. The domain is displayed in |
| 19 the end of input field, if user is not provided any. |
| 20 'error' - error message displayed in case if 'isInvalid' is true. |
| 21 'isInvalid' - whether input data is invalid. Note: it is not changed |
| 22 automatically. Can be changed manually or with checkValidity() |
| 23 method. |
| 24 'required' - whether empty field is invalid. |
| 25 |
| 26 Methods: |
| 27 'focus' - focuses input field. |
| 28 'checkValidity' - returns current validity state of the input form. Updates |
| 29 'isInvalid' at the end. |
| 30 --> |
| 31 <polymer-element name="gaia-input" attributes="label value type domain required |
| 32 error isInvalid"> |
| 33 <template> |
| 34 <link rel="stylesheet" href="gaia_input.css"> |
| 35 <paper-input-decorator id="decorator" error="{{error}}" label="{{label}}" |
| 36 on-tap="{{onTap}}" isInvalid="{{isInvalid}}" floatingLabel autoValidate> |
| 37 <div id="container" horizontal layout> |
| 38 <input id="input" is="core-input" on-keydown="{{onKeyDown}}" |
| 39 value="{{value}}" required?="{{required}}" flex> |
| 40 <span id="domainLabel">{{domain}}</span> |
| 41 </div> |
| 42 </paper-input-decorator> |
| 43 </template> |
| 44 </polymer-element> |
| 45 |
OLD | NEW |