| <!-- |
| @license |
| Copyright (c) 2014 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 |
| --> |
| <!doctype html> |
| <html> |
| <head> |
| |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
| |
| <title>paper-input</title> |
| |
| <script src="../platform/platform.js"></script> |
| |
| <link href="../font-roboto/roboto.html" rel="import"> |
| <link href="paper-input.html" rel="import"> |
| |
| <style shim-shadowdom> |
| |
| body { |
| font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; |
| margin: 0; |
| padding: 24px; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| -webkit-tap-highlight-color: rgba(0,0,0,0); |
| -webkit-touch-callout: none; |
| } |
| |
| paper-input.narrow { |
| width: 150px; |
| } |
| |
| </style> |
| |
| </head> |
| <body unresolved> |
| <section> |
| |
| <paper-input label="Type something"></paper-input> |
| |
| <br> |
| |
| <paper-input label="Type something" value="Prefilled value"></paper-input> |
| |
| <br> |
| |
| <paper-input class="narrow" label="Long labels get truncated"></paper-input> |
| |
| <br> |
| |
| <paper-input label="Type only numbers" type="number" error="Input is not a number!"></paper-input> |
| |
| <br> |
| |
| <paper-input label="Type something" required error="This input requires a value!"></paper-input> |
| |
| <br> |
| |
| <paper-input disabled label="I'm disabled"></paper-input> |
| |
| <br> |
| |
| <paper-input floatingLabel label="Floating label"></paper-input> |
| |
| <br> |
| |
| <paper-input floatingLabel label="Type an email here (floating label)" type="email" error="Input is not an email!"></paper-input> |
| |
| <br> |
| |
| <paper-input multiline label="Type multiple lines here"></paper-input> |
| |
| <br> |
| |
| <paper-input floatingLabel multiline label="Type multiple lines here" value="Prefilled multiline input value"></paper-input> |
| |
| <br> |
| |
| <paper-input multiline rows="3" label="This input is 3 rows high"></paper-input> |
| |
| <br> |
| |
| <paper-input multiline maxRows="3" label="This input is at most 3 rows high"></paper-input> |
| |
| <br> |
| |
| <paper-input multiline label="Sized with CSS, height: 150px;" style="height: 150px;"></paper-input> |
| |
| <br> |
| |
| <paper-input multiline floatingLabel label="Multiple lines and a floating label"></paper-input> |
| |
| <br> |
| |
| <paper-input label="Becomes visible after polymer-ready" hidden></paper-input> |
| |
| <paper-input multiline floatingLabel rows="2" label="Becomes visible after polymer-ready, min 2 rows" value="Some prefilled value" hidden></paper-input> |
| |
| <br> |
| |
| </section> |
| |
| <script> |
| |
| document.addEventListener('polymer-ready', function() { |
| |
| setTimeout(function() { |
| Array.prototype.forEach.call(document.querySelectorAll('paper-input[hidden]'), function(node) { |
| node.removeAttribute('hidden'); |
| }); |
| }, 500); |
| |
| }); |
| |
| </script> |
| </body> |
