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

   1 <!DOCTYPE html>
   2 <!--
   3     @license
   4     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   5     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   6     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   7     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   8     Code distributed by Google as part of the polymer project is also
   9     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 -->
  11
  12 <html lang="en">
  13 <head>
  14   <meta charset="UTF-8">
  15   <title>Core Label</title>
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17   <link rel="import" href="core-label.html">
  18   <link rel="import" href="../paper-checkbox/paper-checkbox.html">
  19   <link rel="import" href="../paper-slider/paper-slider.html">
  20   <link rel="import" href="../paper-button/paper-button.html">
  21 </head>
  22 <body>
  23
  24   <label>regular label<input type="checkbox"></label>
  25
  26   <br>
  27
  28   <label>regular label 2<input></label>
  29
  30   <br>
  31
  32   <label>
  33     a
  34     <input>
  35     b
  36   </label>
  37
  38   <br>
  39
  40   <label for="native">
  41     hi
  42   </label>
  43
  44   <button id="native">hello</button>
  45
  46   <br>
  47
  48   <label>
  49     a
  50     <button>b</button>
  51     c
  52   </label>
  53
  54   <hr>
  55
  56   <core-label>
  57     label next to checkbox
  58     <input for type="checkbox">
  59     something
  60   </core-label>
  61
  62   <br>
  63
  64   <core-label for="#quux">
  65     label for checkbox
  66   </core-label>
  67   <input id="quux" type="checkbox">
  68
  69   <br>
  70
  71   <core-label for="#foo">
  72     <img src="http://placehold.it/200x200" alt="200x200 placeholder image">
  73     image (with alt attribute) label
  74   </core-label>
  75
  76   <input id="foo" type="checkbox">
  77
  78   <br>
  79
  80   <core-label for=".bar">
  81     label for a class .bar
  82   </core-label>
  83   <input class="bar" type="checkbox">
  84
  85   <br>
  86
  87   <core-label>
  88     input label
  89     <input for>
  90   </core-label>
  91
  92   <br>
  93
  94   <core-label>
  95     paper checkbox
  96     <paper-checkbox for></paper-checkbox>
  97   </core-label>
  98
  99   <br>
 100
 101   <core-label>
 102     paper slider
 103     <paper-slider min="0" max="100" value="50" for></paper-slider>
 104   </core-label>
 105
 106   <br>
 107
 108   <core-label>
 109     input type range
 110     <input type="range" for>
 111   </core-label>
 112
 113   <br>
 114
 115   <core-label>
 116     a
 117     <input type="text" for>
 118     b
 119   </core-label>
 120
 121   <br>
 122
 123   <core-label>
 124     c
 125     <button for>hi</button>
 126     d
 127   </core-label>
 128
 129
 130   <br>
 131
 132   <core-label>
 133     label this button
 134     <paper-button for>labelled by parent</paper-button>
 135   </core-label>
 136
 137   <br>
 138
 139   <core-label for=".two">
 140     Hi!
 141   </core-label>
 142
 143   <button class="one">sup</button>
 144   <button class="two">whazzup</button>
 145
 146 </body>
 147 </html>