| 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 592603004:
Revert "Polymer elements added to third_party/polymer." (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master