Home | History | Annotate | Download | only in paper-item 
      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">
     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>
    106