Home | History | Annotate | Download | only in paper-input 
      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.github.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/CONTRIBUTORS
      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/PATENTS
      8 -->
      9 
     10 <!--
     11 
     12 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>
     13 
     14 `paper-input` is a single-line text field for user input. It is a convenience element 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 work 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="{{floatingLabel}}" value="{{value}}" disabled?="{{disabled}}">
     64     <input is="core-input" id="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     /**
    124      * Focuses the `input`.
    125      *
    126      * @method focus
    127      */
    128     focus: function() {
    129       this.$.input.focus();
    130     },
    131 
    132     valueChanged: function() {
    133       this.$.decorator.updateLabelVisibility(this.value);
    134     },
    135 
    136     changeAction: function(e) {
    137       // re-fire event that does not bubble across shadow roots
    138       this.fire('change', null, this);
    139     }
    140 
    141   });
    142 
    143 </script>
    144 
    145 </polymer-element>
    146