<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –> <html>

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <title>iron-autogrow-textarea demo</title>

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
  <link rel="import" href="../iron-autogrow-textarea.html">

  <style is="custom-style" include="demo-pages-shared-styles">
    iron-autogrow-textarea {
      display: block;
      width: 200px;
      margin: 5px 0;
    }

    textarea {
      width: 200px;
    }

    .vertical-section {
      box-sizing: border-box;
      width: 400px;
      margin: 0;
    }
  </style>
</head>
<body unresolved>
  <div class="vertical-section-container centered">
    <h3>An iron-autogrow-textarea grows automatically as more text is entered</h3>
    <demo-snippet class="centered-demo">
      <template>
        <iron-autogrow-textarea></iron-autogrow-textarea>
      </template>
    </demo-snippet>

    <h3>The maximum height can be controlled either through the <i>max-rows</i>
    property, or through a fixed max height</h3>
    <demo-snippet class="centered-demo">
      <template>
        <iron-autogrow-textarea max-rows="4" placeholder="scrolls after 4 rows"></iron-autogrow-textarea>
        <iron-autogrow-textarea style="max-height: 50px;" placeholder="scrolls after 50px"></iron-autogrow-textarea>
      </template>
    </demo-snippet>

    <h3>The initial height can also be controlled using the <i>rows</i> property,
    or through a fixed height</h3>
    <demo-snippet class="centered-demo">
      <template>
        <iron-autogrow-textarea rows="4" placeholder="start with 4 rows"></iron-autogrow-textarea>
        <iron-autogrow-textarea style="height: 50px;"></iron-autogrow-textarea>
      </template>
    </demo-snippet>

    <h3>Example of updating the value imperatively</h3>
    <!-- TODO: replace this with a demo-snippet when https://github.com/webcomponents/webcomponentsjs/issues/362
    is fixed -->
    <div class="example">
      <template is="dom-bind">
        <div class="vertical-section">
          <iron-autogrow-textarea bind-value="{{bindValue}}" id="a1"></iron-autogrow-textarea>
          <br>
          <code>bind-value</code>: <span>[[bindValue]]</span>
          <p on-click="setValue">
            Imperatively changing <code>bind-value</code> will also update
            <code>textarea.value</code>:<br>
            <textarea></textarea>
            <button value="bindValue">set</button>
            <br><br>

            Imperatively updating <code>textarea.value</code> will update
            the display, but not update <code>bind-value</code>:<br>
            <textarea></textarea>
            <button value="value">set</button>
          </p>
        </div>
      </template>
    </div>
  </div>
  <script>
    var scope = document.querySelector('template[is=dom-bind]');

    scope.setValue = function(event) {
      if (!(event.target instanceof HTMLButtonElement)) {
        return;
      }
      var inputValue = event.target.previousElementSibling.value;
      if (event.target.value == "bindValue") {
        document.querySelector('#a1').bindValue = inputValue;
      } else {
        document.querySelector('#a1').textarea.value = inputValue;
      }
    }
  </script>
</body>

</html>