2015-06-26 23:27:38 -04:00
<!doctype html>
<!--
@license
Copyright (c) 2015 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.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://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 http://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 > paper-input demo< / title >
< script src = "../../webcomponentsjs/webcomponents-lite.js" > < / script >
< link rel = "import" href = "../paper-input.html" >
< link rel = "import" href = "../paper-input-container.html" >
< link rel = "import" href = "../paper-input-error.html" >
< link rel = "import" href = "../paper-input-char-counter.html" >
< link rel = "import" href = "../paper-textarea.html" >
< link rel = "import" href = "../../iron-input/iron-input.html" >
< link rel = "import" href = "ssn-input.html" >
< link rel = "stylesheet" href = "../../paper-styles/paper-styles.html" >
< link rel = "import" href = "../../paper-styles/demo-pages.html" >
< style >
body {
padding: 40px;
}
< / style >
< / head >
< body unresolved >
< div class = "vertical center-justified layout" >
< h4 > Text input< / h4 >
< div class = "vertical-section" >
< paper-input label = "label" > < / paper-input >
< paper-input label = "password" type = "password" > < / paper-input >
< paper-input no-label-float label = "label (no-label-float)" > < / paper-input >
< paper-input label = "disabled" disabled > < / paper-input >
< / div >
< h4 > Text area< / h4 >
< div class = "vertical-section" >
< paper-textarea label = "textarea label" > < / paper-textarea >
< / div >
< h4 > Validation< / h4 >
< div class = "vertical-section" >
< paper-input label = "only type letters (auto-validate)" auto-validate pattern = "[a-zA-Z]*" error-message = "letters only!" > < / paper-input >
< paper-input id = "inputForValidation" required label = "only type letters (no auto validate)" pattern = "[a-zA-Z]*" error-message = "letters only, required input!" > < / paper-input >
< br >
< button onclick = "validate()" > Validate!< / button >
< / div >
< h4 > Character counter< / h4 >
< div class = "vertical-section" >
< paper-input label = "label" char-counter > < / paper-input >
< paper-input label = "at most 10 letters" char-counter auto-validate pattern = "[a-zA-Z]*" maxlength = "10" error-message = "letters only!" > < / paper-input >
< paper-textarea label = "textarea" char-counter > < / paper-textarea >
< paper-textarea label = "textarea with maxlength" char-counter maxlength = "10" > < / paper-textarea >
2015-08-01 17:17:46 -04:00
< paper-textarea label = "text area with rows and max-rows" rows = "3" max-rows = "4" > < paper-textarea >
2015-06-26 23:27:38 -04:00
< / div >
< h4 > Complex inputs< / h4 >
< div class = "vertical-section" >
< template is = "dom-bind" >
< paper-input-container always-float-label auto-validate attr-for-value = "value" >
< label > Social Security Number< / label >
< ssn-input class = "paper-input-input" > < / ssn-input >
< paper-input-error > SSN invalid!< / paper-input-error >
< / paper-input-container >
< / template >
< / div >
< / div >
< script >
function validate() {
document.getElementById('inputForValidation').validate();
}
< / script >
< / body >
< / html >
