added tests with paper-slider
This commit is contained in:
138
bower_components/paper-input/paper-input.html
vendored
Normal file
138
bower_components/paper-input/paper-input.html
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
<!--
|
||||
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>
|
||||
Reference in New Issue
Block a user