third_party/polymer/components-chromium/paper-item/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright 2013 The Polymer Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style
   5 license that can be found in the LICENSE file.
   6 -->
   7 <html>
   8 <head>
   9
  10   <meta charset="utf-8">
  11   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  13
  14   <title>paper-item</title>
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17
  18   <link href="../font-roboto/roboto.html" rel="import">
  19   <link href="../core-icon/core-icon.html" rel="import">
  20   <link href="../core-icons/core-icons.html" rel="import">
  21   <link href="../core-selector/core-selector.html" rel="import">
  22   <link href="../paper-shadow/paper-shadow.html" rel="import">
  23
  24   <link href="paper-item.html" rel="import">
  25
  26   <style shim-shadowdom>
  27     body {
  28       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  29       font-size: 14px;
  30       margin: 0;
  31       padding: 24px;
  32       -webkit-tap-highlight-color: rgba(0,0,0,0);
  33       -webkit-touch-callout: none;
  34     }
  35
  36     section {
  37       padding: 20px 0;
  38     }
  39
  40     section > div {
  41       padding: 14px;
  42       font-size: 16px;
  43     }
  44
  45     html /deep/ paper-shadow {
  46       display: inline-block;
  47     }
  48
  49     core-icon {
  50       margin-right: 0.5em;
  51     }
  52   </style>
  53 </head>
  54 <body unresolved>
  55
  56   <section>
  57
  58     <div>Default</div>
  59
  60     <paper-shadow style="max-width: 10.5em;">
  61       <paper-item>Item</paper-item>
  62       <paper-item disabled>Disabled</paper-item>
  63       <paper-item noink><a href="http://www.polymer-project.org" layout horizontal center>Link</a></paper-item>
  64       <paper-item>Long items wrap by default</paper-item>
  65     </paper-shadow>
  66
  67   </section>
  68
  69   <section>
  70
  71     <div>In a core-selector</div>
  72
  73     <paper-shadow>
  74       <core-selector selected="1" selectedAttribute="">
  75         <paper-item>Item 1</paper-item>
  76         <paper-item>Item 2</paper-item>
  77         <paper-item>Item 3</paper-item>
  78       </core-selector>
  79     </paper-shadow>
  80
  81   </section>
  82
  83   <section>
  84
  85     <div>Custom Content</div>
  86
  87     <paper-shadow>
  88       <paper-item>
  89         <core-icon icon="content-cut"></core-icon>
  90         Cut
  91       </paper-item>
  92       <paper-item>
  93         <core-icon icon="content-copy"></core-icon>
  94         Copy
  95       </paper-item>
  96       <paper-item>
  97         <core-icon icon="content-paste"></core-icon>
  98         Paste
  99       </paper-item>
 100     </paper-shadow>
 101
 102   </section>
 103
 104 </body>
 105 </html>