third_party/polymer/v1_0/components-chromium/paper-input/README.md - Issue 1834313003: Remove unneeded files from third_party/polymer.

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

Issue 1834313003: Remove unneeded files from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Restore bower.json files. Created 4 years, 8 months 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

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-input/CONTRIBUTING.md ('k') | third_party/polymer/v1_0/components-chromium/paper-input/hero.svg » ('j') | third_party/polymer/v1_0/extract_inline_scripts.sh » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1

2 <!---

3

4 This README is automatically generated from the comments in these files:

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 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

13 -->

14

15 [![Build status](https://travis-ci.org/PolymerElements/paper-input.svg?branch=ma ster)](https://travis-ci.org/PolymerElements/paper-input)

16

17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-input)_

18

19

20 ##<paper-input>

21

22 Material design: [Text fields](https://www.google.com/design/spec/components/tex t-fields.html)

23

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

25

26 ```html

27 <paper-input label="Input label"></paper-input>

28 ```

29

30 It may include an optional error message or character counter.

31

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 ```

36

37 It can also include custom prefix or suffix elements, which are displayed

38 before or after the text input itself. In order for an element to be

39 considered as a prefix, it must have the `prefix` attribute (and similarly

40 for `suffix`).

41

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 ```

48

49 A `paper-input` can use the native `type=search` or `type=file` features.

50 However, since we can't control the native styling of the input (search icon,

51 file button, date placeholder, etc.), in these cases the label will be

52 automatically floated. The `placeholder` attribute can still be used for

53 additional informational text.

54

55 ```html

56 <paper-input label="search!" type="search"

57 placeholder="search for cats" autosave="test" results="5">

58 </paper-input>

59 ```

60

61 See `Polymer.PaperInputBehavior` for more API docs.

62

63 ### Focus

64

65 To focus a paper-input, you can call the native `focus()` method as long as the

66 paper input has a tab index.

67

68 ### Styling

69

70 See `Polymer.PaperInputContainer` for a list of custom properties used to

71 style this element.

72

73

74

75 ##<paper-input-char-counter>

76

77 `<paper-input-char-counter>` is a character counter for use with `<paper-input-c ontainer>`. It

78 shows the number of characters entered in the input and the max length if it is specified.

79

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 ```

86

87 ### Styling

88

89 The following mixin is available for styling:

90

91 \| Custom property \| Description \| Default \|

92 \| --- \| --- \| --- \|

93 \| `--paper-input-char-counter` \| Mixin applied to the element \| `{}` \|

94

95

96

97 ##<paper-input-container>

98

99 `<paper-input-container>` is a container for a `<label>`, an `<input is="iron-in put">` or

100 `<iron-autogrow-textarea>` and optional add-on elements such as an error message or character

101 counter, used to implement Material Design text fields.

102

103 For example:

104

105 ```html

106 <paper-input-container>

107 <label>Your name</label>

108 <input is="iron-input">

109 </paper-input-container>

110 ```

111

112 ### Listening for input changes

113

114 By default, it listens for changes on the `bind-value` attribute on its children nodes and perform

115 tasks such as auto-validating and label styling when the `bind-value` changes. Y ou can configure

116 the attribute it listens to with the `attr-for-value` attribute.

117

118 ### Using a custom input element

119

120 You can use a custom input element in a `<paper-input-container>`, for example t o implement a

121 compound input field like a social security number input. The custom input eleme nt should have the

122 `paper-input-input` class, have a `notify:true` value property and optionally im plements

123 `Polymer.IronValidatableBehavior` if it is validatable.

124

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 ```

131

132 ### Validation

133

134 If the `auto-validate` attribute is set, the input container will validate the i nput and update

135 the container styling when the input value changes.

136

137 ### Add-ons

138

139 Add-ons are child elements of a `<paper-input-container>` with the `add-on` attr ibute and

140 implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified whe n the input value

141 or validity changes, and may implement functionality such as error messages or c haracter counters.

142 They appear at the bottom of the input.

143

144 ### Prefixes and suffixes

145

146 These are child elements of a `<paper-input-container>` with the `prefix`

147 or `suffix` attribute, and are displayed inline with the input, before or after.

148

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 ```

157

158 ### Styling

159

160 The following custom properties and mixins are available for styling:

161

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 inp ut is focused \| `--primary-color` \|

166 \| `--paper-input-container-invalid-color` \| Label and underline color when the i nput is is invalid \| `--error-color` \|

167 \| `--paper-input-container-input-color` \| Input foreground color \| `--primary-te xt-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 in put is focused \| `{}` \|

172 \| `--paper-input-container-label-floating` \| Mixin applied to the label when flo ating \| `{}` \|

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 whe n 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 \| `{}` \|

179

180 This element is `display:block` by default, but you can set the `inline` attribu te to make it

181 `display:inline-block`.

182

183

184

185 ##<paper-input-error>

186

187 `<paper-input-error>` is an error message for use with `<paper-input-container>` . The error is

188 displayed when the `<paper-input-container>` is `invalid`.

189

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 ```

196

197 ### Styling

198

199 The following custom properties and mixins are available for styling:

200

201 \| Custom property \| Description \| Default \|

202 \| --- \| --- \| --- \|

203 \| `--paper-input-container-invalid-color` \| The foreground color of the error \| `--error-color` \|

204 \| `--paper-input-error` \| Mixin applied to the error \| `{}` \|

205

206

207

208 ##<paper-textarea>

209

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

211

212 ```html

213 <paper-textarea label="Textarea label"></paper-textarea>

214 ```

215

216 See `Polymer.PaperInputBehavior` for more API docs.

217

218 ### Validation

219

220 Currently only `required` and `maxlength` validation is supported.

221

222 ### Styling

223

224 See `Polymer.PaperInputContainer` for a list of custom properties used to

225 style this element.

226

227

228

229 ##Polymer.PaperInputAddonBehavior

230

231 Use `Polymer.PaperInputAddonBehavior` to implement an add-on for `<paper-input-c ontainer>`. A

232 add-on appears below the input, and may display information based on the input v alue and

233 validity such as a character counter or an error message.

234

235

236

237 ##Polymer.PaperInputBehavior

238

239 Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-containe r>`. This

240 behavior is implemented by `<paper-input>`. It exposes a number of properties fr om

241 `<paper-input-container>` and `<input is="iron-input">` and they should be bound in your

242 template.

243

244 The input element can be accessed by the `inputElement` property if you need to access

245 properties or methods that are not exposed.

246

247

OLD	NEW