src/third_party/polymer/components-chromium/core-item/demo.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4
   5   <title>core-item</title>
   6
   7   <script src="../platform/platform.js"></script>
   8
   9   <link rel="import" href="../core-icons/core-icons.html">
  10   <link rel="import" href="core-item.html">
  11
  12   <style>
  13
  14     body {
  15       font-family: sans-serif;
  16       font-size: 16px;
  17       margin: 20px;
  18     }
  19
  20     core-item {
  21       width: 300px;
  22     }
  23
  24     core-item.big {
  25       font-size: 24px;
  26     }
  27
  28     core-item.small {
  29       font-size: 12px;
  30     }
  31
  32     core-item.contact-item {
  33       height: 50px;
  34       background-color: #efefef;
  35       border: 1px solid #ddd;
  36     }
  37
  38     core-item.contact-item .name {
  39       font-size: 1.125em;
  40     }
  41
  42     core-item.contact-item .address {
  43       font-size: 0.75em;
  44     }
  45
  46   </style>
  47
  48 </head>
  49 <body unresolved>
  50
  51     <h2>items with icon and label:</h2>
  52
  53     <core-item icon="settings" label="Settings"></core-item>
  54     <core-item icon="account-box" label="Account"></core-item>
  55
  56     <h2>items with label only:</h2>
  57
  58     <core-item label="Settings"></core-item>
  59     <core-item label="Account"></core-item>
  60
  61     <h2>links (via &lt;a&gt;):</h2>
  62
  63     <core-item icon="settings" label="Settings"><a href="#settings" target="_self"></a></core-item>
  64     <core-item icon="account-box" label="Account"><a href="#account" target="_self"></a></core-item>
  65
  66     <h2>items sized with CSS:</h2>
  67     <core-item icon="settings" label="Settings" class="font-scalable big"></core-item>
  68     <core-item icon="account-box" label="Account" class="font-scalable big"></core-item>
  69     <core-item icon="settings" label="Settings" class="font-scalable small"></core-item>
  70     <core-item icon="account-box" label="Account" class="font-scalable small"></core-item>
  71
  72     <h2>custom item:</h2>
  73
  74     <core-item icon="account-circle" class="contact-item">
  75       <div flex>
  76         <div class="name">John Doe</div>
  77         <div class="address">123 A Street, San Francisco, CA</div>
  78       </div>
  79       <core-icon icon="more-vert"></core-icon>
  80     </core-item>
  81
  82 </body>
  83 </html>