| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <html> |
| 3 <head> |
| 4 <meta name="viewport" content="width=device-width, initial-scale=1, user-scala
ble=no"> |
| 5 |
| 6 <title>core-input</title> |
| 7 |
| 8 <script src="../platform/platform.js"></script> |
| 9 |
| 10 <link href="core-input.html" rel="import"> |
| 11 |
| 12 <style> |
| 13 body { |
| 14 padding: 24px; |
| 15 margin: 0; |
| 16 -webkit-transform: translateZ(0); |
| 17 font-family: sans-serif; |
| 18 font-size: 16px; |
| 19 } |
| 20 |
| 21 section { |
| 22 margin: 2em 0; |
| 23 } |
| 24 |
| 25 aside { |
| 26 background: #ccc; |
| 27 padding: 1em; |
| 28 margin-right: 2em; |
| 29 font-size: 12px; |
| 30 width: 250px; |
| 31 border-radius: 3px; |
| 32 } |
| 33 |
| 34 core-input { |
| 35 margin: 1em; |
| 36 } |
| 37 |
| 38 core-input[multiline] { |
| 39 border: 1px dotted #ccc; |
| 40 } |
| 41 |
| 42 core-input.sized { |
| 43 width: 500px; |
| 44 height: 200px; |
| 45 } |
| 46 |
| 47 .validation core-input, |
| 48 .validation core-input[multiline] { |
| 49 border: solid 1px lime; |
| 50 } |
| 51 |
| 52 .validation core-input.invalid, |
| 53 .validation core-input[multiline].invalid { |
| 54 border: solid 1px red; |
| 55 } |
| 56 |
| 57 </style> |
| 58 |
| 59 </head> |
| 60 <body> |
| 61 |
| 62 <section horizontal start layout> |
| 63 <aside>A single-line text input. See console for committed values.</aside> |
| 64 <core-input id="single" placeholder="Type something..."></core-input> |
| 65 <script> |
| 66 var single = document.getElementById('single'); |
| 67 single.addEventListener('change', function() { |
| 68 console.log('single: value committed: ', single.value); |
| 69 }); |
| 70 </script> |
| 71 </section> |
| 72 |
| 73 <section horizontal start layout> |
| 74 <aside>The <code>type</code> attribute is supported. This is a single-line i
nput with <code>type = password</code>. See console for committed values.</aside
> |
| 75 <core-input id="password" type="password" placeholder="Enter password..."></
core-input> |
| 76 <script> |
| 77 var password = document.getElementById('password'); |
| 78 password.addEventListener('change', function() { |
| 79 console.log('password: value committed: ', password.value); |
| 80 }); |
| 81 </script> |
| 82 </section> |
| 83 |
| 84 <section horizontal start layout> |
| 85 <aside>A multi-line text input with 3 rows. The input is normally unstyled b
ut here is styled with a dotted border to show its size.</aside> |
| 86 <core-input multiline rows="3" placeholder="Type many lines here..."></core-
input> |
| 87 </section> |
| 88 |
| 89 <section horizontal start layout> |
| 90 <aside>A multi-line text input sized with CSS. The input is normally unstyle
d but here is styled with a dotted border to show its size.</aside> |
| 91 <core-input class="sized" multiline rows="fit" placeholder="This input is 50
0px * 200px"></core-input> |
| 92 </section> |
| 93 |
| 94 <section horizontal start layout> |
| 95 <aside>Inputs with the <code>tabindex</code> attribute.</aside> |
| 96 <div> |
| 97 <core-input tabindex="2" placeholder="tabindex = 2"></core-input> |
| 98 <br> |
| 99 <core-input tabindex="3" placeholder="tabindex = 3"></core-input> |
| 100 <br> |
| 101 <core-input tabindex="1" placeholder="tabindex = 1"></core-input> |
| 102 </div> |
| 103 </section> |
| 104 |
| 105 <section horizontal start layout> |
| 106 <aside>Validation examples. The border color reflects the current validation
state. See console for validation events.</aside> |
| 107 <div class="validation"> |
| 108 <core-input id="validate-number" type="number" placeholder="type = number"
></core-input> |
| 109 <br> |
| 110 <core-input id="validate-email" type="email" placeholder="type = email"></
core-input> |
| 111 <br> |
| 112 <core-input id="validate-required" required placeholder="required"></core-
input> |
| 113 <br> |
| 114 <core-input id="validate-ml-required" multiline rows="3" required placehol
der="required (multiline)"></core-input> |
| 115 <br> |
| 116 <core-input id="validate-pattern" pattern="a*bc" placeholder="with pattern
= a*bc"></core-input> |
| 117 <br> |
| 118 <core-input id="validate-min-max" type="number" min="5" max="10" placehold
er="type = number, min = 5, max = 10"></core-input> |
| 119 <br> |
| 120 <core-input id="validate-step" type="number" step="2" placeholder="type =
number, step = 2"></core-input> |
| 121 </div> |
| 122 <script> |
| 123 document.querySelector('.validation').addEventListener('input-invalid', fu
nction(e, value, s) { |
| 124 console.log(e.target.id, 'invalid, inputValue:', e.detail.value, e.targe
t.validity); |
| 125 }); |
| 126 document.querySelector('.validation').addEventListener('input-valid', func
tion(e, value, s) { |
| 127 console.log(e.target.id, 'valid, inputValue:', e.detail.value, e.target.
validity); |
| 128 }); |
| 129 </script> |
| 130 </section> |
| 131 |
| 132 |
| 133 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 592593002:
Inline scripts were extracted from Polymer elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master