third_party/polymer/components/paper-input/paper-input.html - Issue 1215543002: Remove Polymer 0.5.

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

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 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:

« no previous file with comments | « third_party/polymer/components/paper-input/paper-autogrow-textarea.html ('k') | third_party/polymer/components/paper-input/paper-input-decorator.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE

4 The complete set of authors may be found at http://polymer.github.io/AUTHORS

5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS

6 Code distributed by Google as part of the polymer project is also

7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS

8 -->

9

10 <!--

11

12 Material Design: <a href="http://www.google.com/design/spec/components/text-fiel ds.html#text-fields-single-line-text-field">Single line text field</a>

13

14 `paper-input` is a single-line text field for user input. It is a convenience el ement composed of

15 a `paper-input-decorator` and a `input is="core-input"`.

16

17 Example:

18

19 <paper-input label="Your Name"></paper-input>

20

21 If you need more control over the `input` element, use `paper-input-decorator`.

22

23 Theming

24 -------

25

26 `paper-input` can be styled similarly to `paper-input-decorator`.

27

28 Form submission

29 ---------------

30

31 Unlike inputs using `paper-input-decorator` directly, `paper-input` does not wor k out of

32 the box with the native `form` element. This is because the native `form` is not aware of

33 shadow DOM and does not treat `paper-input` as a form element.

34

35 Use `paper-input-decorator` directly, or see

36 <a href="https://github.com/garstasio/ajax-form">`ajax-form`</a> for a possible solution

37 to submitting a `paper-input`.

38

39 Validation

40 ----------

41

42 Use `paper-input-decorator` if you would like to implement validation.

43

44 @group Paper Elements

45 @element paper-input

46 @homepage github.io

47 -->

48 <link href="../polymer/polymer.html" rel="import">

49 <link href="../core-input/core-input.html" rel="import">

50

51 <link href="paper-input-decorator.html" rel="import">

52

53 <polymer-element name="paper-input">

54

55 <template>

56

57 <style>

58 :host {

59 display: inline-block;

60 }

61 </style>

62

63 <paper-input-decorator id="decorator" label="{{label}}" floatingLabel="{{float ingLabel}}" value="{{value}}" disabled?="{{disabled}}">

64 <input is="core-input" value="{{value}}" committedValue="{{committedValue}}" on-change="{{changeAction}}" disabled?="{{disabled}}">

65 </paper-input-decorator>

66

67 </template>

68

69 <script>

70

71 Polymer('paper-input', {

72

73 publish: {

74 /**

75 * The label for this input. It normally appears as grey text inside

76 * the text input and disappears once the user enters text.

77 *

78 * @attribute label

79 * @type string

80 * @default ''

81 */

82 label: '',

83

84 /**

85 * If true, the label will "float" above the text input once the

86 * user enters text instead of disappearing.

87 *

88 * @attribute floatingLabel

89 * @type boolean

90 * @default false

91 */

92 floatingLabel: false,

93

94 /**

95 * Set to true to style the element as disabled.

96 *

97 * @attribute disabled

98 * @type boolean

99 * @default false

100 */

101 disabled: {value: false, reflect: true},

102

103 /**

104 * The current value of the input.

105 *

106 * @attribute value

107 * @type String

108 * @default ''

109 */

110 value: '',

111

112 /**

113 * The most recently committed value of the input.

114 *

115 * @attribute committedValue

116 * @type String

117 * @default ''

118 */

119 committedValue: ''

120

121 },

122

123 valueChanged: function() {

124 this.$.decorator.updateLabelVisibility(this.value);

125 },

126

127 changeAction: function(e) {

128 if (!window.ShadowDOMPolyfill) {

129 // re-fire event that does not bubble across shadow roots

130 this.fire('change', null, this);

131 }

132 }

133

134 });

135

136 </script>

137

138 </polymer-element>

OLD	NEW