Skip to content

Commit 0e8266d

Browse files
ricticrictic
committed
Merge pull request #310 from PolymerElements/new-readme
Automatic cleanup!
2 parents 7c89adc + 3bcb669 commit 0e8266d

File tree

1 file changed

+87
-65
lines changed

1 file changed

+87
-65
lines changed

‎README.md‎

Lines changed: 87 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ paper-input-addon-behavior.html paper-input-behavior.html paper-input-char-cou
77
Edit those files, and our readme bot will duplicate them over here!
88
Edit this file, and the bot will squash your changes :)
99
10+
The bot does some handling of markdown. Please file a bug if it does the wrong
11+
thing! https://github.com/PolymerLabs/tedium/issues
12+
1013
-->
1114

1215
[![Build Status](https://travis-ci.org/PolymerElements/paper-input.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-input)
@@ -16,37 +19,44 @@ _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-input)_
1619

1720
##<paper-input>
1821

19-
2022
Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)
2123

2224
`<paper-input>` is a single-line text field with Material Design styling.
2325

24-
<paper-input label="Input label"></paper-input>
26+
```html
27+
<paper-input label="Input label"></paper-input>
28+
```
2529

2630
It may include an optional error message or character counter.
2731

28-
<paper-input error-message="Invalid input!" label="Input label"></paper-input>
29-
<paper-input char-counter label="Input label"></paper-input>
32+
```html
33+
<paper-input error-message="Invalid input!" label="Input label"></paper-input>
34+
<paper-input char-counter label="Input label"></paper-input>
35+
```
3036

3137
It can also include custom prefix or suffix elements, which are displayed
3238
before or after the text input itself. In order for an element to be
3339
considered as a prefix, it must have the `prefix` attribute (and similarly
3440
for `suffix`).
3541

36-
<paper-input label="total">
37-
<div prefix>$</div>
38-
<paper-icon-button suffix icon="clear"></paper-icon-button>
39-
</paper-input>
42+
```html
43+
<paper-input label="total">
44+
<div prefix>$</div>
45+
<paper-icon-button suffix icon="clear"></paper-icon-button>
46+
</paper-input>
47+
```
4048

4149
A `paper-input` can use the native `type=search` or `type=file` features.
4250
However, since we can't control the native styling of the input (search icon,
4351
file button, date placeholder, etc.), in these cases the label will be
4452
automatically floated. The `placeholder` attribute can still be used for
4553
additional informational text.
4654

47-
<paper-input label="search!" type="search"
48-
placeholder="search for cats" autosave="test" results="5">
49-
</paper-input>
55+
```html
56+
<paper-input label="search!" type="search"
57+
placeholder="search for cats" autosave="test" results="5">
58+
</paper-input>
59+
```
5060

5161
See `Polymer.PaperInputBehavior` for more API docs.
5262

@@ -62,40 +72,42 @@ style this element.
6272

6373

6474

65-
6675
##&lt;paper-input-char-counter&gt;
6776

68-
6977
`<paper-input-char-counter>` is a character counter for use with `<paper-input-container>`. It
7078
shows the number of characters entered in the input and the max length if it is specified.
7179

72-
<paper-input-container>
73-
<input is="iron-input" maxlength="20">
74-
<paper-input-char-counter></paper-input-char-counter>
75-
</paper-input-container>
80+
```html
81+
<paper-input-container>
82+
<input is="iron-input" maxlength="20">
83+
<paper-input-char-counter></paper-input-char-counter>
84+
</paper-input-container>
85+
```
7686

7787
### Styling
7888

7989
The following mixin is available for styling:
8090

81-
Custom property | Description | Default
82-
----------------|-------------|----------
83-
`--paper-input-char-counter` | Mixin applied to the element | `{}`
91+
| Custom property | Description | Default |
92+
| --- | --- | --- |
93+
| `--paper-input-char-counter` | Mixin applied to the element | `{}` |
8494

8595

86-
##&lt;paper-input-container&gt;
8796

97+
##&lt;paper-input-container&gt;
8898

8999
`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or
90100
`<iron-autogrow-textarea>` and optional add-on elements such as an error message or character
91101
counter, used to implement Material Design text fields.
92102

93103
For example:
94104

95-
<paper-input-container>
96-
<label>Your name</label>
97-
<input is="iron-input">
98-
</paper-input-container>
105+
```html
106+
<paper-input-container>
107+
<label>Your name</label>
108+
<input is="iron-input">
109+
</paper-input-container>
110+
```
99111

100112
### Listening for input changes
101113

@@ -110,10 +122,12 @@ compound input field like a social security number input. The custom input eleme
110122
`paper-input-input` class, have a `notify:true` value property and optionally implements
111123
`Polymer.IronValidatableBehavior` if it is validatable.
112124

113-
<paper-input-container attr-for-value="ssn-value">
114-
<label>Social security number</label>
115-
<ssn-input class="paper-input-input"></ssn-input>
116-
</paper-input-container>
125+
```html
126+
<paper-input-container attr-for-value="ssn-value">
127+
<label>Social security number</label>
128+
<ssn-input class="paper-input-input"></ssn-input>
129+
</paper-input-container>
130+
```
117131

118132
### Validation
119133

@@ -128,69 +142,76 @@ or validity changes, and may implement functionality such as error messages or c
128142
They appear at the bottom of the input.
129143

130144
### Prefixes and suffixes
145+
131146
These are child elements of a `<paper-input-container>` with the `prefix`
132147
or `suffix` attribute, and are displayed inline with the input, before or after.
133148

134-
<paper-input-container>
135-
<div prefix>$</div>
136-
<label>Total</label>
137-
<input is="iron-input">
138-
<paper-icon-button suffix icon="clear"></paper-icon-button>
139-
</paper-input-container>
149+
```html
150+
<paper-input-container>
151+
<div prefix>$</div>
152+
<label>Total</label>
153+
<input is="iron-input">
154+
<paper-icon-button suffix icon="clear"></paper-icon-button>
155+
</paper-input-container>
156+
```
140157

141158
### Styling
142159

143160
The following custom properties and mixins are available for styling:
144161

145-
Custom property | Description | Default
146-
----------------|-------------|----------
147-
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
148-
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
149-
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500`
150-
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
151-
`--paper-input-container` | Mixin applied to the container | `{}`
152-
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
153-
`--paper-input-container-label` | Mixin applied to the label | `{}`
154-
`--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}`
155-
`--paper-input-container-label-floating` | Mixin applied to the label when floating | `{}`
156-
`--paper-input-container-input` | Mixin applied to the input | `{}`
157-
`--paper-input-container-underline` | Mixin applied to the underline | `{}`
158-
`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}`
159-
`--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`
160-
`--paper-input-prefix` | Mixin applied to the input prefix | `{}`
161-
`--paper-input-suffix` | Mixin applied to the input suffix | `{}`
162+
| Custom property | Description | Default |
163+
| --- | --- | --- |
164+
| `--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color` |
165+
| `--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color` |
166+
| `--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500` |
167+
| `--paper-input-container-input-color` | Input foreground color | `--primary-text-color` |
168+
| `--paper-input-container` | Mixin applied to the container | `{}` |
169+
| `--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}` |
170+
| `--paper-input-container-label` | Mixin applied to the label | `{}` |
171+
| `--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}` |
172+
| `--paper-input-container-label-floating` | Mixin applied to the label when floating | `{}` |
173+
| `--paper-input-container-input` | Mixin applied to the input | `{}` |
174+
| `--paper-input-container-underline` | Mixin applied to the underline | `{}` |
175+
| `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}` |
176+
| `--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}` |
177+
| `--paper-input-prefix` | Mixin applied to the input prefix | `{}` |
178+
| `--paper-input-suffix` | Mixin applied to the input suffix | `{}` |
162179

163180
This element is `display:block` by default, but you can set the `inline` attribute to make it
164181
`display:inline-block`.
165182

166183

167-
##&lt;paper-input-error&gt;
168184

185+
##&lt;paper-input-error&gt;
169186

170187
`<paper-input-error>` is an error message for use with `<paper-input-container>`. The error is
171188
displayed when the `<paper-input-container>` is `invalid`.
172189

173-
<paper-input-container>
174-
<input is="iron-input" pattern="[0-9]*">
175-
<paper-input-error>Only numbers are allowed!</paper-input-error>
176-
</paper-input-container>
190+
```html
191+
<paper-input-container>
192+
<input is="iron-input" pattern="[0-9]*">
193+
<paper-input-error>Only numbers are allowed!</paper-input-error>
194+
</paper-input-container>
195+
```
177196

178197
### Styling
179198

180199
The following custom properties and mixins are available for styling:
181200

182-
Custom property | Description | Default
183-
----------------|-------------|----------
184-
`--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
185-
`--paper-input-error` | Mixin applied to the error | `{}`
201+
| Custom property | Description | Default |
202+
| --- | --- | --- |
203+
| `--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500` |
204+
| `--paper-input-error` | Mixin applied to the error | `{}` |
186205

187206

188-
##&lt;paper-textarea&gt;
189207

208+
##&lt;paper-textarea&gt;
190209

191210
`<paper-textarea>` is a multi-line text field with Material Design styling.
192211

193-
<paper-textarea label="Textarea label"></paper-textarea>
212+
```html
213+
<paper-textarea label="Textarea label"></paper-textarea>
214+
```
194215

195216
See `Polymer.PaperInputBehavior` for more API docs.
196217

@@ -204,16 +225,16 @@ See `Polymer.PaperInputContainer` for a list of custom properties used to
204225
style this element.
205226

206227

207-
##Polymer.PaperInputAddonBehavior
208228

229+
##Polymer.PaperInputAddonBehavior
209230

210231
Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-container>`. A
211232
add-on appears below the input, and may display information based on the input value and
212233
validity such as a character counter or an error message.
213234

214235

215-
##Polymer.PaperInputBehavior
216236

237+
##Polymer.PaperInputBehavior
217238

218239
Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-container>`. This
219240
behavior is implemented by `<paper-input>`. It exposes a number of properties from
@@ -223,3 +244,4 @@ template.
223244
The input element can be accessed by the `inputElement` property if you need to access
224245
properties or methods that are not exposed.
225246

247+

0 commit comments

Comments
 (0)