Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(154)

Side by Side Diff: lib/src/paper-input/paper-input.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 <link rel="import" href="../polymer/polymer.html"> 10 <link rel="import" href="../polymer/polymer.html">
11 <link rel="import" href="../iron-input/iron-input.html"> 11 <link rel="import" href="../iron-input/iron-input.html">
12 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html"> 12 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html">
13 <link rel="import" href="paper-input-behavior.html"> 13 <link rel="import" href="paper-input-behavior.html">
14 <link rel="import" href="paper-input-container.html"> 14 <link rel="import" href="paper-input-container.html">
15 <link rel="import" href="paper-input-error.html"> 15 <link rel="import" href="paper-input-error.html">
16 <link rel="import" href="paper-input-char-counter.html"> 16 <link rel="import" href="paper-input-char-counter.html">
17 17
18 <!-- 18 <!--
19 Material design: [Text fields](https://www.google.com/design/spec/components/tex t-fields.html)
20
19 `<paper-input>` is a single-line text field with Material Design styling. 21 `<paper-input>` is a single-line text field with Material Design styling.
20 22
21 <paper-input label="Input label"></paper-input> 23 <paper-input label="Input label"></paper-input>
22 24
23 It may include an optional error message or character counter. 25 It may include an optional error message or character counter.
24 26
25 <paper-input error-message="Invalid input!" label="Input label"></paper-inpu t> 27 <paper-input error-message="Invalid input!" label="Input label"></paper-inpu t>
26 <paper-input char-counter label="Input label"></paper-input> 28 <paper-input char-counter label="Input label"></paper-input>
27 29
28 It can also include custom prefix or suffix elements, which are displayed 30 It can also include custom prefix or suffix elements, which are displayed
29 before or after the text input itself. In order for an element to be 31 before or after the text input itself. In order for an element to be
30 considered as a prefix, it must have the `prefix` attribute (and similarly 32 considered as a prefix, it must have the `prefix` attribute (and similarly
31 for `suffix`). 33 for `suffix`).
32 34
33 <paper-input label="total"> 35 <paper-input label="total">
34 <div prefix>$</div> 36 <div prefix>$</div>
35 <paper-icon-button suffix icon="clear"></paper-icon-button> 37 <paper-icon-button suffix icon="clear"></paper-icon-button>
36 </paper-input> 38 </paper-input>
37 39
40 A `paper-input` can use the native `type=search` or `type=file` features.
41 However, since we can't control the native styling of the input, in these cases
42 it's recommended to use a placeholder text, or `always-float-label`,
43 as to not overlap the native UI (search icon, file button, etc.).
44
45 <paper-input label="search!" type="search"
46 placeholder="search for cats" autosave="test" results="5">
47 </paper-input>
48
38 See `Polymer.PaperInputBehavior` for more API docs. 49 See `Polymer.PaperInputBehavior` for more API docs.
39 50
40 ### Styling 51 ### Styling
41 52
42 See `Polymer.PaperInputContainer` for a list of custom properties used to 53 See `Polymer.PaperInputContainer` for a list of custom properties used to
43 style this element. 54 style this element.
44 55
45 @group Paper Elements 56 @group Paper Elements
46 @element paper-input 57 @element paper-input
47 @hero hero.svg 58 @hero hero.svg
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after
99 min$="[[min]]" 110 min$="[[min]]"
100 max$="[[max]]" 111 max$="[[max]]"
101 step$="[[step]]" 112 step$="[[step]]"
102 name$="[[name]]" 113 name$="[[name]]"
103 placeholder$="[[placeholder]]" 114 placeholder$="[[placeholder]]"
104 readonly$="[[readonly]]" 115 readonly$="[[readonly]]"
105 list$="[[list]]" 116 list$="[[list]]"
106 size$="[[size]]" 117 size$="[[size]]"
107 autocapitalize$="[[autocapitalize]]" 118 autocapitalize$="[[autocapitalize]]"
108 autocorrect$="[[autocorrect]]" 119 autocorrect$="[[autocorrect]]"
109 on-change="_onChange"> 120 on-change="_onChange"
121 autosave$="[[autosave]]"
122 results$="[[results]]"
123 accept$="[[accept]]"
124 multiple$="[[multiple]]">
110 125
111 <content select="[suffix]"></content> 126 <content select="[suffix]"></content>
112 127
113 <template is="dom-if" if="[[errorMessage]]"> 128 <template is="dom-if" if="[[errorMessage]]">
114 <paper-input-error>[[errorMessage]]</paper-input-error> 129 <paper-input-error>[[errorMessage]]</paper-input-error>
115 </template> 130 </template>
116 131
117 <template is="dom-if" if="[[charCounter]]"> 132 <template is="dom-if" if="[[charCounter]]">
118 <paper-input-char-counter></paper-input-char-counter> 133 <paper-input-char-counter></paper-input-char-counter>
119 </template> 134 </template>
120 135
121 </paper-input-container> 136 </paper-input-container>
122 137
123 </template> 138 </template>
124 </dom-module> 139 </dom-module>
125 140
126 <script> 141 <script>
127 Polymer({ 142 Polymer({
128 is: 'paper-input', 143 is: 'paper-input',
129 144
130 behaviors: [ 145 behaviors: [
131 Polymer.IronFormElementBehavior, 146 Polymer.IronFormElementBehavior,
132 Polymer.PaperInputBehavior, 147 Polymer.PaperInputBehavior,
133 Polymer.IronControlState 148 Polymer.IronControlState
134 ] 149 ]
135 }); 150 });
136 </script> 151 </script>
OLDNEW
« no previous file with comments | « lib/src/paper-icon-button/paper-icon-button.html ('k') | lib/src/paper-input/paper-input-behavior.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698