third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html - Issue 1862213002: Roll third_party/polymer.

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container.html

Issue 1862213002: Roll third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Remove obsolete appearance_browsertest.js, result of a previous bad merge. 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/paper-input-char-counter-extracted.js ('k') | third_party/polymer/v1_0/components-chromium/paper-input/paper-input-container-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
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 --><html><head><link rel="import" href="../polymer/polymer.html">	9 --><html><head><link rel="import" href="../polymer/polymer.html">

10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">	10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

11 <link rel="import" href="../paper-styles/default-theme.html">	11 <link rel="import" href="../paper-styles/default-theme.html">

12 <link rel="import" href="../paper-styles/typography.html">	12 <link rel="import" href="../paper-styles/typography.html">

13	13

14 <!--	14 <!--

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

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

17 counter, used to implement Material Design text fields.	17 counter, used to implement Material Design text fields.

18	18

19 For example:	19 For example:

20	20

21 <paper-input-container>	21 <paper-input-container>

22 <label>Your name</label>	22 <label>Your name</label>

23 <input is="iron-input">	23 <input is="iron-input">

24 </paper-input-container>	24 </paper-input-container>

25	25

	26 Do not wrap <paper-input-contanter> around elements that already include it, suc h as <paper-input>.

	27 Doing so may cause events to bounce infintely between the container and its cont ained element.

	28

26 ### Listening for input changes	29 ### Listening for input changes

27	30

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

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

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

31	34

32 ### Using a custom input element	35 ### Using a custom input element

33	36

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

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

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

37 `Polymer.IronValidatableBehavior` if it is validatable.	40 `Polymer.IronValidatableBehavior` if it is validatable.

38	41

39 <paper-input-container attr-for-value="ssn-value">	42 <paper-input-container attr-for-value="ssn-value">

40 <label>Social security number</label>	43 <label>Social security number</label>

41 <ssn-input class="paper-input-input"></ssn-input>	44 <ssn-input class="paper-input-input"></ssn-input>

42 </paper-input-container>	45 </paper-input-container>

43	46

	47

	48 If you're using a `<paper-input-container>` imperatively, it's important to make sure

	49 that you attach its children (the `iron-input` and the optional `label`) before you

	50 attach the `<paper-input-container>` itself, so that it can be set up correctly.

	51

44 ### Validation	52 ### Validation

45	53

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

47 the container styling when the input value changes.	55 the container styling when the input value changes.

48	56

49 ### Add-ons	57 ### Add-ons

50	58

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

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

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

(...skipping 264 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
318 <div class="focused-line"></div>	326 <div class="focused-line"></div>

319 </div>	327 </div>

320	328

321 <div class$="[[_computeAddOnContentClass(focused,invalid)]]">	329 <div class$="[[_computeAddOnContentClass(focused,invalid)]]">

322 <content id="addOnContent" select="[add-on]"></content>	330 <content id="addOnContent" select="[add-on]"></content>

323 </div>	331 </div>

324 </template>	332 </template>

325 </dom-module>	333 </dom-module>

326	334

327 <script src="paper-input-container-extracted.js"></script></body></html>	335 <script src="paper-input-container-extracted.js"></script></body></html>

OLD	NEW