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