OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polym
er.github.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS
.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CO
NTRIBUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/P
ATENTS.txt | |
9 --> | |
10 <!doctype html> | |
11 <html> | |
12 <head> | |
13 | |
14 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-
scale=1, user-scalable=yes"> | |
15 | |
16 <title>paper-input</title> | |
17 | |
18 <script src="../platform/platform.js"></script> | |
19 | |
20 <link href="../font-roboto/roboto.html" rel="import"> | |
21 <link href="paper-input.html" rel="import"> | |
22 | |
23 <style shim-shadowdom> | |
24 | |
25 body { | |
26 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | |
27 margin: 0; | |
28 padding: 24px; | |
29 -webkit-user-select: none; | |
30 -moz-user-select: none; | |
31 -ms-user-select: none; | |
32 user-select: none; | |
33 -webkit-tap-highlight-color: rgba(0,0,0,0); | |
34 -webkit-touch-callout: none; | |
35 } | |
36 | |
37 paper-input.narrow { | |
38 width: 150px; | |
39 } | |
40 | |
41 </style> | |
42 | |
43 </head> | |
44 <body unresolved> | |
45 <section> | |
46 | |
47 <paper-input label="Type something"></paper-input> | |
48 | |
49 <br> | |
50 | |
51 <paper-input label="Type something" value="Prefilled value"></paper-input> | |
52 | |
53 <br> | |
54 | |
55 <paper-input class="narrow" label="Long labels get truncated"></paper-input> | |
56 | |
57 <br> | |
58 | |
59 <paper-input label="Type only numbers" type="number" error="Input is not a n
umber!"></paper-input> | |
60 | |
61 <br> | |
62 | |
63 <paper-input label="Type something" required error="This input requires a va
lue!"></paper-input> | |
64 | |
65 <br> | |
66 | |
67 <paper-input disabled label="I'm disabled"></paper-input> | |
68 | |
69 <br> | |
70 | |
71 <paper-input floatingLabel label="Floating label"></paper-input> | |
72 | |
73 <br> | |
74 | |
75 <paper-input floatingLabel label="Type an email here (floating label)" type=
"email" error="Input is not an email!"></paper-input> | |
76 | |
77 <br> | |
78 | |
79 <paper-input multiline label="Type multiple lines here"></paper-input> | |
80 | |
81 <br> | |
82 | |
83 <paper-input floatingLabel multiline label="Type multiple lines here" value=
"Prefilled multiline input value"></paper-input> | |
84 | |
85 <br> | |
86 | |
87 <paper-input multiline rows="3" label="This input is 3 rows high"></paper-in
put> | |
88 | |
89 <br> | |
90 | |
91 <paper-input multiline maxRows="3" label="This input is at most 3 rows high"
></paper-input> | |
92 | |
93 <br> | |
94 | |
95 <paper-input multiline label="Sized with CSS, height: 150px;" style="height:
150px;"></paper-input> | |
96 | |
97 <br> | |
98 | |
99 <paper-input multiline floatingLabel label="Multiple lines and a floating la
bel"></paper-input> | |
100 | |
101 <br> | |
102 | |
103 <paper-input label="Becomes visible after polymer-ready" hidden></paper-inpu
t> | |
104 | |
105 <paper-input multiline floatingLabel rows="2" label="Becomes visible after p
olymer-ready, min 2 rows" value="Some prefilled value" hidden></paper-input> | |
106 | |
107 <br> | |
108 | |
109 </section> | |
110 | |
111 <script> | |
112 | |
113 document.addEventListener('polymer-ready', function() { | |
114 | |
115 setTimeout(function() { | |
116 Array.prototype.forEach.call(document.querySelectorAll('paper-input[hidd
en]'), function(node) { | |
117 node.removeAttribute('hidden'); | |
118 }); | |
119 }, 500); | |
120 | |
121 }); | |
122 | |
123 </script> | |
124 </body> | |
OLD | NEW |