third_party/polymer/v1_0/components/paper-input/paper-textarea.html

   1 <!--
   2 @license
   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.github.io/LICENSE.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/CONTRIBUTORS.txt
   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/PATENTS.txt
   9 -->
  10 <link rel="import" href="../polymer/polymer.html">
  11 <link rel="import" href="../iron-autogrow-textarea/iron-autogrow-textarea.html">
  12 <link rel="import" href="paper-input-behavior.html">
  13 <link rel="import" href="paper-input-container.html">
  14 <link rel="import" href="paper-input-error.html">
  15 <link rel="import" href="paper-input-char-counter.html">
  16
  17 <!--
  18 `<paper-textarea>` is a multi-line text field with Material Design styling.
  19
  20     <paper-textarea label="Textarea label"></paper-textarea>
  21
  22 See `Polymer.PaperInputBehavior` for more API docs.
  23
  24 ### Validation
  25
  26 Currently only `required` and `maxlength` validation is supported.
  27
  28 ### Styling
  29
  30 See `Polymer.PaperInputContainer` for a list of custom properties used to
  31 style this element.
  32 -->
  33
  34 <dom-module id="paper-textarea">
  35   <template>
  36
  37     <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
  38
  39       <label hidden$="[[!label]]">[[label]]</label>
  40
  41       <iron-autogrow-textarea id="input" class="paper-input-input"
  42         bind-value="{{value}}"
  43         autocomplete$="[[autocomplete]]"
  44         autofocus$="[[autofocus]]"
  45         inputmode$="[[inputmode]]"
  46         name$="[[name]]"
  47         placeholder$="[[placeholder]]"
  48         readonly$="[[readonly]]"
  49         required$="[[required]]"
  50         maxlength$="[[maxlength]]"
  51         autocapitalize$="[[autocapitalize]]"></iron-autogrow-textarea>
  52
  53       <template is="dom-if" if="[[errorMessage]]">
  54         <paper-input-error>[[errorMessage]]</paper-input-error>
  55       </template>
  56
  57       <template is="dom-if" if="[[charCounter]]">
  58         <paper-input-char-counter></paper-input-char-counter>
  59       </template>
  60
  61     </paper-input-container>
  62
  63   </template>
  64
  65 </dom-module>
  66
  67 <script>
  68
  69 (function() {
  70
  71   Polymer({
  72
  73     is: 'paper-textarea',
  74
  75     behaviors: [
  76       Polymer.PaperInputBehavior
  77     ],
  78
  79     properties: {
  80
  81       _ariaLabelledBy: {
  82         observer: '_ariaLabelledByChanged',
  83         type: String
  84       },
  85
  86       _ariaDescribedBy: {
  87         observer: '_ariaDescribedByChanged',
  88         type: String
  89       }
  90
  91     },
  92
  93     _ariaLabelledByChanged: function(ariaLabelledBy) {
  94       this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
  95     },
  96
  97     _ariaDescribedByChanged: function(ariaDescribedBy) {
  98       this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
  99     }
 100
 101   });
 102
 103 })();
 104
 105 </script>