1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 <head> 13 <meta charset="utf-8"> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 15 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 16 17 <title>paper-input demo</title> 18 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 20 21 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 22 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 23 <link rel="import" href="../../iron-icon/iron-icon.html"> 24 <link rel="import" href="../../iron-icons/iron-icons.html"> 25 <link rel="import" href="../../iron-input/iron-input.html"> 26 <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> 27 <link rel="import" href="../../paper-styles/color.html"> 28 <link rel="import" href="../paper-input-container.html"> 29 <link rel="import" href="../paper-input-error.html"> 30 <link rel="import" href="../paper-input.html"> 31 <link rel="import" href="../paper-textarea.html"> 32 <link rel="import" href="ssn-input.html"> 33 34 <style is="custom-style" include="demo-pages-shared-styles"> 35 paper-input { 36 display: block; 37 } 38 39 demo-snippet.horizontal { 40 --demo-snippet-demo: { 41 @apply(--layout-horizontal); 42 @apply(--layout-justified); 43 @apply(--layout-wrap); 44 } 45 } 46 demo-snippet.horizontal paper-input { 47 display: inline-block; 48 } 49 50 button { 51 width: 70px; 52 } 53 54 #inputForValidation { 55 display: inline-block; 56 width: calc(100% - 75px); 57 } 58 59 .vertical-section-container { 60 max-width: 600px; 61 } 62 63 paper-icon-button { 64 color: var(--paper-red-300); 65 --paper-icon-button-ink-color: var(--paper-red-a100); 66 width: 23px; /* 15px + 2*4px for padding */ 67 height: 23px; 68 padding: 0px 4px; 69 } 70 71 iron-icon { 72 padding-right: 5px; 73 } 74 </style> 75 </head> 76 <body unresolved> 77 <div class="vertical-section-container centered"> 78 <h3>Inputs can have different types, and be disabled</h3> 79 <demo-snippet> 80 <template> 81 <paper-input label="text input"></paper-input> 82 <paper-textarea label="autoresizing textarea input"></paper-textarea> 83 <paper-input label="password input" type="password"></paper-input> 84 <paper-input label="disabled input" disabled></paper-input> 85 </template> 86 </demo-snippet> 87 88 <h3>Inputs can have character counters</h3> 89 <demo-snippet> 90 <template> 91 <paper-input label="simple character counter" char-counter></paper-input> 92 <paper-input label="input with at most 10 characters" char-counter maxlength="10"></paper-input> 93 </template> 94 </demo-snippet> 95 96 <h3>The label can have different floating states</h3> 97 <demo-snippet> 98 <template> 99 <paper-input label="this label floats after typing"></paper-input> 100 <paper-input label="this label is always floating" always-float-label></paper-input> 101 <paper-input label="this label never floats" no-label-float></paper-input> 102 <paper-input label="this label is always floating" always-float-label placeholder="placeholder text"></paper-input> 103 </template> 104 </demo-snippet> 105 106 <h3>Inputs can validate automatically or on demand, and can have custom error messages</h3> 107 <demo-snippet> 108 <template> 109 <paper-input label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input> 110 <paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input> 111 <paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input> 112 <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input> 113 <button onclick="validate()">Validate!</button> 114 </template> 115 </demo-snippet> 116 117 <h3>Inputs can have prefixes and suffixes</h3> 118 <demo-snippet class="horizontal"> 119 <template> 120 <paper-input label="total" type="number"> 121 <div prefix>$</div> 122 </paper-input> 123 <paper-input label="username" id="inputWithButton"> 124 <iron-icon icon="mail" prefix></iron-icon> 125 <div suffix>@email.com</div> 126 <paper-icon-button suffix onclick="clearInput()" 127 icon="clear" alt="clear" title="clear"> 128 </paper-icon-button> 129 </paper-input> 130 </template> 131 </demo-snippet> 132 133 <h3>Inputs can have custom logic</h3> 134 <demo-snippet> 135 <template> 136 <paper-input-container always-float-label auto-validate attr-for-value="value"> 137 <label>Social Security Number</label> 138 <ssn-input class="paper-input-input"></ssn-input> 139 <paper-input-error>SSN invalid!</paper-input-error> 140 </paper-input-container> 141 </template> 142 </demo-snippet> 143 </div> 144 145 <script> 146 function validate() { 147 document.getElementById('inputForValidation').validate(); 148 } 149 150 function clearInput() { 151 document.getElementById('inputWithButton').value = ''; 152 } 153 </script> 154 </body> 155 </html> 156
