1<!doctype html>
2<!--
3Copyright 2013 The Polymer Authors. All rights reserved.
4Use of this source code is governed by a BSD-style
5license 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