• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html>
12<head>
13
14  <meta charset="utf-8">
15  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17
18  <title>paper-menu demo</title>
19
20  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21
22  <link rel="import" href="../../paper-item/paper-item.html">
23  <link rel="import" href="../../paper-styles/demo-pages.html">
24  <link rel="import" href="../paper-menu.html">
25  <link rel="import" href="../paper-submenu.html">
26
27  <style is="custom-style">
28    .horizontal-section {
29      padding: 0 !important;
30    }
31
32    .avatar {
33      display: inline-block;
34      width: 40px;
35      height: 40px;
36      border-radius: 50%;
37      overflow: hidden;
38      background: #ccc;
39    }
40
41    paper-item {
42      --paper-item: {
43        cursor: pointer;
44      };
45    }
46
47    .sublist paper-item {
48      padding-left: 30px;
49    }
50
51    .sublist2 paper-item {
52      padding-left: 50px;
53    }
54  </style>
55</head>
56<body unresolved>
57  <div class="horizontal-section-container">
58    <div>
59      <h4>Standard</h4>
60      <div class="horizontal-section">
61        <paper-menu>
62          <paper-item>Inbox</paper-item>
63          <paper-item>Starred</paper-item>
64          <paper-item>Sent mail</paper-item>
65          <paper-item>Drafts</paper-item>
66        </paper-menu>
67      </div>
68    </div>
69
70    <div>
71      <h4>Pre-selected</h4>
72      <div class="horizontal-section">
73        <paper-menu selected="0">
74          <paper-item>Inbox</paper-item>
75          <paper-item disabled>Starred</paper-item>
76          <paper-item>Sent mail</paper-item>
77          <paper-item>Drafts</paper-item>
78        </paper-menu>
79      </div>
80    </div>
81
82    <div>
83      <h4>Multi-select</h4>
84      <div class="horizontal-section">
85        <paper-menu multi>
86          <paper-item>Bold</paper-item>
87          <paper-item>Italic</paper-item>
88          <paper-item>Underline</paper-item>
89          <paper-item>Strikethrough</paper-item>
90        </paper-menu>
91      </div>
92    </div>
93
94    <div>
95      <h4>Sub-menu</h4>
96      <div class="horizontal-section">
97        <paper-menu attr-for-item-title="label" multi>
98          <paper-submenu label="paper-menu">
99            <paper-item class="menu-trigger">paper-menu</paper-item>
100            <paper-menu class="menu-content sublist" multi>
101              <paper-submenu label="Properties">
102                <paper-item class="menu-trigger">Properties</paper-item>
103                <paper-menu class="menu-content sublist2">
104                  <paper-item>focusedItem</paper-item>
105                  <paper-item>attrForItemTitle</paper-item>
106                </paper-menu>
107              </paper-submenu>
108              <paper-submenu label="Methods">
109                <paper-item class="menu-trigger">Methods</paper-item>
110                <paper-menu class="menu-content sublist2">
111                  <paper-item>select(value)</paper-item>
112                </paper-menu>
113              </paper-submenu>
114          </paper-menu>
115        </paper-submenu>
116
117        <paper-submenu label="paper-submenu">
118          <paper-item class="menu-trigger">paper-submenu</paper-item>
119          <paper-menu class="menu-content sublist">
120            <paper-submenu label="Properties">
121              <paper-item class="menu-trigger">Properties</paper-item>
122              <paper-menu class="menu-content sublist2">
123                <paper-item>opened</paper-item>
124              </paper-menu>
125              </paper-submenu>
126              <paper-submenu label="Methods">
127                <paper-item class="menu-trigger">Methods</paper-item>
128                <paper-menu class="menu-content sublist2">
129                  <paper-item>open()</paper-item>
130                  <paper-item>close()</paper-item>
131                  <paper-item>toggle()</paper-item>
132                </paper-menu>
133            </paper-submenu>
134          </paper-menu>
135        </paper-submenu>
136
137          <paper-submenu label="Unavailable" disabled>
138            <paper-item class="menu-trigger">Unavailable</paper-item>
139            <paper-menu class="menu-content sublist">
140              <paper-item>Unavailable 1</paper-item>
141              <paper-item>Unavailable 2</paper-item>
142            </paper-menu>
143          </paper-submenu>
144        </paper-menu>
145      </div>
146    </div>
147  </div>
148</body>
149</html>
150