2015-06-26 20:27:38 -07: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" >
2015-08-04 07:26:36 -07:00
< link rel = "import" href = "../../iron-icon/iron-icon.html" >
< link rel = "import" href = "../../iron-icons/iron-icons.html" >
< link rel = "import" href = "../../paper-icon-button/paper-icon-button.html" >
2015-06-26 20:27:38 -07:00
< link rel = "import" href = "ssn-input.html" >
2015-08-04 07:26:36 -07:00
< link rel = "stylesheet" href = "../../paper-styles/color.html" >
2015-06-26 20:27:38 -07:00
< link rel = "import" href = "../../paper-styles/demo-pages.html" >
2015-08-04 07:26:36 -07:00
< style is = "custom-style" >
2015-06-26 20:27:38 -07:00
body {
padding: 40px;
}
2015-08-04 07:26:36 -07:00
paper-input.short {
width: 200px;
}
paper-icon-button {
color: var(--paper-red-300);
--paper-icon-button-ink-color: var(--paper-red-a100);
--iron-icon-width: 15px;
--iron-icon-height: 15px;
padding: 0px 4px;
}
2015-06-26 20:27:38 -07:00
< / 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" >
2015-08-22 08:54:29 -07:00
< paper-input label = "input validates on blur (required, auto-validate)" required auto-validate error-message = "needs some text!" > < / paper-input >
2015-06-26 20:27:38 -07:00
< 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 14:17:46 -07:00
2015-09-03 21:33:31 -07:00
< paper-textarea label = "text area with rows and max-rows" rows = "3" max-rows = "4" > < / paper-textarea >
2015-06-26 20:27:38 -07:00
< / div >
2015-08-04 07:26:36 -07:00
< h4 > Prefixes and Suffixes< / h4 >
< div class = "vertical-section" >
< paper-input class = "short" label = "total" type = "number" >
< div prefix > $< / div >
< / paper-input >
< paper-input class = "short" label = "username" >
< div suffix > @email.com< / div >
< / paper-input >
< paper-input class = "short" label = "icons and buttons" id = "inputWithButton" >
< iron-icon icon = "search" prefix > < / iron-icon >
< paper-icon-button suffix onclick = "clearInput()"
icon="clear" alt="clear" title="clear" tabindex="0">
< / paper-icon-button >
< / paper-input >
< / div >
2015-06-26 20:27:38 -07:00
< 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();
}
2015-08-04 07:26:36 -07:00
function clearInput() {
document.getElementById('inputWithButton').value = '';
}
2015-06-26 20:27:38 -07:00
< / script >
< / body >
< / html >
