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