139 lines
3.6 KiB
HTML
139 lines
3.6 KiB
HTML
<!--
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
|
-->
|
|
|
|
<!--
|
|
|
|
Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field">Single line text field</a>
|
|
|
|
`paper-input` is a single-line text field for user input. It is a convenience element composed of
|
|
a `paper-input-decorator` and a `input is="core-input"`.
|
|
|
|
Example:
|
|
|
|
<paper-input label="Your Name"></paper-input>
|
|
|
|
If you need more control over the `input` element, use `paper-input-decorator`.
|
|
|
|
Theming
|
|
-------
|
|
|
|
`paper-input` can be styled similarly to `paper-input-decorator`.
|
|
|
|
Form submission
|
|
---------------
|
|
|
|
Unlike inputs using `paper-input-decorator` directly, `paper-input` does not work out of
|
|
the box with the native `form` element. This is because the native `form` is not aware of
|
|
shadow DOM and does not treat `paper-input` as a form element.
|
|
|
|
Use `paper-input-decorator` directly, or see
|
|
<a href="https://github.com/garstasio/ajax-form">`ajax-form`</a> for a possible solution
|
|
to submitting a `paper-input`.
|
|
|
|
Validation
|
|
----------
|
|
|
|
Use `paper-input-decorator` if you would like to implement validation.
|
|
|
|
@group Paper Elements
|
|
@element paper-input
|
|
@homepage github.io
|
|
-->
|
|
<link href="../polymer/polymer.html" rel="import">
|
|
<link href="../core-input/core-input.html" rel="import">
|
|
|
|
<link href="paper-input-decorator.html" rel="import">
|
|
|
|
<polymer-element name="paper-input">
|
|
|
|
<template>
|
|
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
|
|
<paper-input-decorator id="decorator" label="{{label}}" floatingLabel="{{floatingLabel}}" value="{{value}}" disabled?="{{disabled}}">
|
|
<input is="core-input" value="{{value}}" committedValue="{{committedValue}}" on-change="{{changeAction}}" disabled?="{{disabled}}">
|
|
</paper-input-decorator>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
Polymer('paper-input', {
|
|
|
|
publish: {
|
|
/**
|
|
* The label for this input. It normally appears as grey text inside
|
|
* the text input and disappears once the user enters text.
|
|
*
|
|
* @attribute label
|
|
* @type string
|
|
* @default ''
|
|
*/
|
|
label: '',
|
|
|
|
/**
|
|
* If true, the label will "float" above the text input once the
|
|
* user enters text instead of disappearing.
|
|
*
|
|
* @attribute floatingLabel
|
|
* @type boolean
|
|
* @default false
|
|
*/
|
|
floatingLabel: false,
|
|
|
|
/**
|
|
* Set to true to style the element as disabled.
|
|
*
|
|
* @attribute disabled
|
|
* @type boolean
|
|
* @default false
|
|
*/
|
|
disabled: {value: false, reflect: true},
|
|
|
|
/**
|
|
* The current value of the input.
|
|
*
|
|
* @attribute value
|
|
* @type String
|
|
* @default ''
|
|
*/
|
|
value: '',
|
|
|
|
/**
|
|
* The most recently committed value of the input.
|
|
*
|
|
* @attribute committedValue
|
|
* @type String
|
|
* @default ''
|
|
*/
|
|
committedValue: ''
|
|
|
|
},
|
|
|
|
valueChanged: function() {
|
|
this.$.decorator.updateLabelVisibility(this.value);
|
|
},
|
|
|
|
changeAction: function(e) {
|
|
if (!window.ShadowDOMPolyfill) {
|
|
// re-fire event that does not bubble across shadow roots
|
|
this.fire('change', null, this);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</polymer-element>
|