OLD | NEW |
1 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> | 1 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/polymer/layout.html"> | 2 <link rel="import" href="chrome://resources/polymer/polymer/layout.html"> |
3 <link rel="import" href="chrome://resources/polymer/paper-input/paper-input-deco
rator.html"> | |
4 | 3 |
5 <!-- | 4 <!-- |
6 A simple input form with a button. Being used for typing email or password. | 5 A simple input form with a button. Being used for typing email or password. |
| 6 User should put one or more <gaia-input>s inside. |
7 | 7 |
8 Example: | 8 Example: |
9 <gaia-input-form id="emailInput" inputType="email" | 9 <gaia-input-form buttonText="Submit"> |
| 10 <gaia-input label="Email" type="email"></gaia-input> |
| 11 <gaia-input label="Password" type="password"></gaia-input> |
| 12 <gaia-input label="OTP"></gaia-input> |
10 </gaia-input-form> | 13 </gaia-input-form> |
11 | 14 |
12 Attributes: | 15 Attributes: |
13 'inputType' - type of the input (e.g. email, password). | |
14 'inputLabel' - label displayed on the input. (e.g. Enter you email). | |
15 'errorMsg' - error message which should be displayed when input is | |
16 incorrect. | |
17 'buttonText' - text on the button. | 16 'buttonText' - text on the button. |
18 'emailDomain' - autocomplete domain for the inputType="email". | |
19 | 17 |
20 Events: | 18 Events: |
21 'buttonclick' - fired on button click. | 19 'submit' - fired on button click or "Enter" press inside input field. |
22 | 20 |
23 Methods: | 21 Methods: |
24 'focus' - focuses input field. | 22 'focus' - focuses input field. |
25 'setValid' - accept boolean argument |isValid|. Set validity state on | |
26 the form. | |
27 'checkValidity' - returns current validity state of the input form. Calls | |
28 setValid at the end. | |
29 --> | 23 --> |
30 <polymer-element name="gaia-input-form" vertical start-justified layout | 24 <polymer-element name="gaia-input-form" vertical start-justified layout |
31 attributes="inputType errorMsg inputLabel buttonText emailDomain"> | 25 attributes="buttonText" |
| 26 on-keydown="{{onKeyDown}}"> |
32 <template> | 27 <template> |
33 <link rel="stylesheet" href="gaia_input_form.css"> | 28 <link rel="stylesheet" href="gaia_input_form.css"> |
34 <paper-input-decorator id="paperInputDecorator" error="{{errorMsg}}" | 29 <content id="inputs" select="gaia-input"></content> |
35 label="{{inputLabel}}" on-tap="{{onTap}}" | |
36 floatingLabel autoValidate> | |
37 <div id="inputContainer" horizontal layout> | |
38 <input id="inputForm" is="core-input" on-keydown="{{onKeyDown}}" | |
39 value="{{inputValue}}" required type="{{inputType}}" flex> | |
40 <span id="emailDomain" hidden?="{{!emailDomain}}">{{emailDomain}}</span> | |
41 </div> | |
42 </paper-input-decorator> | |
43 <div horizontal justified layout center reverse> | 30 <div horizontal justified layout center reverse> |
44 <gaia-raised-on-focus-button id="button" class="blue-button" | 31 <gaia-raised-on-focus-button id="button" class="blue-button" |
45 on-tap="{{onButtonClicked}}" self-end> | 32 on-tap="{{onButtonClicked}}" self-end> |
46 {{buttonText}} | 33 {{buttonText}} |
47 </gaia-raised-on-focus-button> | 34 </gaia-raised-on-focus-button> |
48 <content> </content> | 35 <content> </content> |
49 </div> | 36 </div> |
50 </template> | 37 </template> |
51 </polymer-element> | 38 </polymer-element> |
OLD | NEW |