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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-input/README.md

Issue 1468623004: Update Polymer from 1.2.1 -> 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@travis-yml
Patch Set: local-state.html Created 5 years 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 # paper-input 1
2 2 <!---
3 `<paper-input>` is a Material Design text field. 3
4 4 This README is automatically generated from the comments in these files:
5 Contains a number of different features for validation, character counting, and more. 5 paper-input-addon-behavior.html paper-input-behavior.html paper-input-char-cou nter.html paper-input-container.html paper-input-error.html paper-input.html paper-textarea.html
6
7 Edit those files, and our readme bot will duplicate them over here!
8 Edit this file, and the bot will squash your changes :)
9
10 -->
11
12 [![Build Status](https://travis-ci.org/PolymerElements/paper-input.svg?branch=ma ster)](https://travis-ci.org/PolymerElements/paper-input)
13
14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-input)_
15
16
17 ##&lt;paper-input&gt;
18
19
20 Material design: [Text fields](https://www.google.com/design/spec/components/tex t-fields.html)
21
22 `<paper-input>` is a single-line text field with Material Design styling.
23
24 <paper-input label="Input label"></paper-input>
25
26 It may include an optional error message or character counter.
27
28 <paper-input error-message="Invalid input!" label="Input label"></paper-inpu t>
29 <paper-input char-counter label="Input label"></paper-input>
30
31 It can also include custom prefix or suffix elements, which are displayed
32 before or after the text input itself. In order for an element to be
33 considered as a prefix, it must have the `prefix` attribute (and similarly
34 for `suffix`).
35
36 <paper-input label="total">
37 <div prefix>$</div>
38 <paper-icon-button suffix icon="clear"></paper-icon-button>
39 </paper-input>
40
41 A `paper-input` can use the native `type=search` or `type=file` features.
42 However, since we can't control the native styling of the input, in these cases
43 it's recommended to use a placeholder text, or `always-float-label`,
44 as to not overlap the native UI (search icon, file button, etc.).
45
46 <paper-input label="search!" type="search"
47 placeholder="search for cats" autosave="test" results="5">
48 </paper-input>
49
50 See `Polymer.PaperInputBehavior` for more API docs.
51
52 ### Styling
53
54 See `Polymer.PaperInputContainer` for a list of custom properties used to
55 style this element.
56
57
58
59 ##&lt;paper-input-char-counter&gt;
60
61
62 `<paper-input-char-counter>` is a character counter for use with `<paper-input-c ontainer>`. It
63 shows the number of characters entered in the input and the max length if it is specified.
64
65 <paper-input-container>
66 <input is="iron-input" maxlength="20">
67 <paper-input-char-counter></paper-input-char-counter>
68 </paper-input-container>
69
70 ### Styling
71
72 The following mixin is available for styling:
73
74 Custom property | Description | Default
75 ----------------|-------------|----------
76 `--paper-input-char-counter` | Mixin applied to the element | `{}`
77
78
79 ##&lt;paper-input-container&gt;
80
81
82 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in put">` or
83 `<iron-autogrow-textarea>` and optional add-on elements such as an error message or character
84 counter, used to implement Material Design text fields.
85
86 For example:
87
88 <paper-input-container>
89 <label>Your name</label>
90 <input is="iron-input">
91 </paper-input-container>
92
93 ### Listening for input changes
94
95 By default, it listens for changes on the `bind-value` attribute on its children nodes and perform
96 tasks such as auto-validating and label styling when the `bind-value` changes. Y ou can configure
97 the attribute it listens to with the `attr-for-value` attribute.
98
99 ### Using a custom input element
100
101 You can use a custom input element in a `<paper-input-container>`, for example t o implement a
102 compound input field like a social security number input. The custom input eleme nt should have the
103 `paper-input-input` class, have a `notify:true` value property and optionally im plements
104 `Polymer.IronValidatableBehavior` if it is validatable.
105
106 <paper-input-container attr-for-value="ssn-value">
107 <label>Social security number</label>
108 <ssn-input class="paper-input-input"></ssn-input>
109 </paper-input-container>
110
111 ### Validation
112
113 If the `auto-validate` attribute is set, the input container will validate the i nput and update
114 the container styling when the input value changes.
115
116 ### Add-ons
117
118 Add-ons are child elements of a `<paper-input-container>` with the `add-on` attr ibute and
119 implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified whe n the input value
120 or validity changes, and may implement functionality such as error messages or c haracter counters.
121 They appear at the bottom of the input.
122
123 ### Prefixes and suffixes
124 These are child elements of a `<paper-input-container>` with the `prefix`
125 or `suffix` attribute, and are displayed inline with the input, before or after.
126
127 <paper-input-container>
128 <div prefix>$</div>
129 <label>Total</label>
130 <input is="iron-input">
131 <paper-icon-button suffix icon="clear"></paper-icon-button>
132 </paper-input-container>
133
134 ### Styling
135
136 The following custom properties and mixins are available for styling:
137
138 Custom property | Description | Default
139 ----------------|-------------|----------
140 `--paper-input-container-color` | Label and underline color when the input is no t focused | `--secondary-text-color`
141 `--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
142 `--paper-input-container-invalid-color` | Label and underline color when the inp ut is is invalid | `--google-red-500`
143 `--paper-input-container-input-color` | Input foreground color | `--primary-text -color`
144 `--paper-input-container` | Mixin applied to the container | `{}`
145 `--paper-input-container-disabled` | Mixin applied to the container when it's di sabled | `{}`
146 `--paper-input-container-label` | Mixin applied to the label | `{}`
147 `--paper-input-container-label-focus` | Mixin applied to the label when the inpu t is focused | `{}`
148 `--paper-input-container-input` | Mixin applied to the input | `{}`
149 `--paper-input-container-underline` | Mixin applied to the underline | `{}`
150 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focued | `{}`
151 `--paper-input-container-underline-disabled` | Mixin applied to the underline wh en the input is disabled | `{}`
152 `--paper-input-prefix` | Mixin applied to the input prefix | `{}`
153 `--paper-input-suffix` | Mixin applied to the input suffix | `{}`
154
155 This element is `display:block` by default, but you can set the `inline` attribu te to make it
156 `display:inline-block`.
157
158
159 ##&lt;paper-input-error&gt;
160
161
162 `<paper-input-error>` is an error message for use with `<paper-input-container>` . The error is
163 displayed when the `<paper-input-container>` is `invalid`.
164
165 <paper-input-container>
166 <input is="iron-input" pattern="[0-9]*">
167 <paper-input-error>Only numbers are allowed!</paper-input-error>
168 </paper-input-container>
169
170 ### Styling
171
172 The following custom properties and mixins are available for styling:
173
174 Custom property | Description | Default
175 ----------------|-------------|----------
176 `--paper-input-container-invalid-color` | The foreground color of the error | `- -google-red-500`
177 `--paper-input-error` | Mixin applied to the error | `{ }`
178
179
180 ##&lt;paper-textarea&gt;
181
182
183 `<paper-textarea>` is a multi-line text field with Material Design styling.
184
185 <paper-textarea label="Textarea label"></paper-textarea>
186
187 See `Polymer.PaperInputBehavior` for more API docs.
188
189 ### Validation
190
191 Currently only `required` and `maxlength` validation is supported.
192
193 ### Styling
194
195 See `Polymer.PaperInputContainer` for a list of custom properties used to
196 style this element.
197
198
199 ##Polymer.PaperInputBehavior
200
201
202 Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-containe r>`. This
203 behavior is implemented by `<paper-input>`. It exposes a number of properties fr om
204 `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your
205 template.
206
207 The input element can be accessed by the `inputElement` property if you need to access
208 properties or methods that are not exposed.
209
210
211 ##Polymer.PaperInputAddonBehavior
212
213
214 Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-c ontainer>`. A
215 add-on appears below the input, and may display information based on the input v alue and
216 validity such as a character counter or an error message.
217
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698