third_party/polymer/components/core-input/demo.html

   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://polymer.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/CONTRIBUTORS.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/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12 <head>
  13   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  14
  15   <title>core-input</title>
  16
  17   <script src="../webcomponentsjs/webcomponents.js"></script>
  18
  19   <link href="core-input.html" rel="import">
  20
  21   <style shim-shadowdom>
  22     body {
  23       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  24       font-size: 14px;
  25       margin: 0;
  26       padding: 24px;
  27       -webkit-tap-highlight-color: rgba(0,0,0,0);
  28       -webkit-touch-callout: none;
  29     }
  30
  31     section {
  32       padding: 20px 0;
  33     }
  34
  35     section > div {
  36       padding: 14px;
  37       font-size: 16px;
  38     }
  39
  40   </style>
  41
  42 </head>
  43 <body>
  44
  45 <template is="auto-binding">
  46
  47   <section>
  48
  49     <input is="core-input" placeholder="a single-line input" value="{{value1}}" committedValue="{{committedValue1}}">
  50
  51     <p>value: {{value1}}, committedValue: {{committedValue1}}</p>
  52
  53     <input is="core-input" type="number" preventInvalidInput placeholder="input type = number, preventInvalidInput" value="{{value2}}" committedValue="{{committedValue2}}">
  54
  55     <p>value: {{value2}}, committedValue: {{committedValue2}}</p>
  56
  57   </section>
  58
  59 </template>
  60
  61 </body>
  62 </html>