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 12 <html> 13 <head> 14 15 <meta charset="utf-8"> 16 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 17 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 18 19 <title>paper-menu-button</title> 20 21 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 22 23 <link rel="import" href="../../iron-icons/iron-icons.html"> 24 <link rel="import" href="../../iron-icon/iron-icon.html"> 25 <link rel="import" href="../../iron-image/iron-image.html"> 26 <link rel="import" href="../../paper-menu/paper-menu.html"> 27 <link rel="import" href="../../paper-item/paper-item.html"> 28 <link rel="import" href="../../paper-button/paper-button.html"> 29 <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> 30 <link rel="import" href="../../paper-styles/demo-pages.html"> 31 32 <link rel="import" href="../paper-menu-button.html"> 33 34 <style is="custom-style"> 35 paper-button { 36 display: block; 37 background: #4285f4; 38 color: #fff; 39 } 40 41 paper-menu { 42 display: block; 43 } 44 45 paper-menu-button { 46 margin: auto; 47 } 48 49 iron-image { 50 padding: 1em; 51 } 52 53 .item { 54 max-width: 300px; 55 } 56 57 .horizontal-section { 58 text-align: center; 59 } 60 </style> 61 62 </head> 63 <body unresolved> 64 65 66 <template id="Demo" is="dom-bind"> 67 68 <div class="horizontal-section-container"> 69 <div> 70 <h4>Paper Icon Button + Paper Menu</h4> 71 <div class="horizontal-section"> 72 <paper-menu-button> 73 <paper-icon-button icon="menu" class="dropdown-trigger" alt="menu"></paper-icon-button> 74 <paper-menu class="dropdown-content"> 75 <template is="dom-repeat" items="[[letters]]" as="letter"> 76 <paper-item>[[letter]]</paper-item> 77 </template> 78 </paper-menu> 79 </paper-menu-button> 80 </div> 81 </div> 82 </div> 83 84 <div class="horizontal-section-container"> 85 <div> 86 <h4>Paper Menu with multi selection</h4> 87 <div class="horizontal-section"> 88 <paper-menu-button ignore-select> 89 <paper-icon-button icon="menu" class="dropdown-trigger" alt="multi select"></paper-icon-button> 90 <paper-menu class="dropdown-content" multi> 91 <template is="dom-repeat" items="[[letters]]" as="letter"> 92 <paper-item>[[letter]]</paper-item> 93 </template> 94 </paper-menu> 95 </paper-menu-button> 96 </div> 97 </div> 98 </div> 99 100 <div class="horizontal-section-container"> 101 <div> 102 <h4>Disabled</h4> 103 <div class="horizontal-section"> 104 <paper-menu-button disabled> 105 <paper-icon-button icon="menu" class="dropdown-trigger" alt="menu"></paper-icon-button> 106 <paper-menu class="dropdown-content"> 107 <template is="dom-repeat" items="[[letters]]" as="letter"> 108 <paper-item>[[letter]]</paper-item> 109 </template> 110 </paper-menu> 111 </paper-menu-button> 112 </div> 113 </div> 114 </div> 115 116 <div class="horizontal-section-container"> 117 <div> 118 <h4>Alternate Alignment</h4> 119 <div class="horizontal-section"> 120 <paper-menu-button vertical-align="bottom" horizontal-align="right"> 121 <paper-icon-button icon="menu" class="dropdown-trigger" alt="bottom align"></paper-icon-button> 122 <paper-menu class="dropdown-content"> 123 <template is="dom-repeat" items="[[letters]]" as="letter"> 124 <paper-item>[[letter]]</paper-item> 125 </template> 126 </paper-menu> 127 </paper-menu-button> 128 </div> 129 </div> 130 </div> 131 132 <div class="horizontal-section-container"> 133 <div> 134 <h4>Alternate Button</h4> 135 <div class="horizontal-section"> 136 <paper-menu-button> 137 <paper-button class="dropdown-trigger" raised> 138 <iron-icon icon="check"></iron-icon> 139 <span>Dinosaurs</span> 140 </paper-button> 141 <paper-menu class="dropdown-content"> 142 <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur"> 143 <paper-item>[[dinosaur]]</paper-item> 144 </template> 145 </paper-menu> 146 </paper-menu-button> 147 </div> 148 </div> 149 </div> 150 151 <div class="horizontal-section-container"> 152 <div> 153 <h4>Alternate Content</h4> 154 <div class="horizontal-section"> 155 <paper-menu-button vertical-align="bottom"> 156 <paper-icon-button class="dropdown-trigger" icon="polymer" alt="polymer"></paper-icon-button> 157 <iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image> 158 </paper-menu-button> 159 </div> 160 </div> 161 </div> 162 </template> 163 164 <script> 165 Demo.letters = [ 166 'alpha', 167 'beta', 168 'gamma', 169 'delta', 170 'epsilon' 171 ]; 172 Demo.dinosaurs = [ 173 'allosaurus', 174 'brontosaurus', 175 'carcharodontosaurus', 176 'diplodocus', 177 'ekrixinatosaurus', 178 'fukuiraptor', 179 'gallimimus', 180 'hadrosaurus', 181 'iguanodon', 182 'jainosaurus', 183 'kritosaurus', 184 'liaoceratops', 185 'megalosaurus', 186 'nemegtosaurus', 187 'ornithomimus', 188 'protoceratops', 189 'quetecsaurus', 190 'rajasaurus', 191 'stegosaurus', 192 'triceratops', 193 'utahraptor', 194 'vulcanodon', 195 'wannanosaurus', 196 'xenoceratops', 197 'yandusaurus', 198 'zephyrosaurus' 199 ]; 200 </script> 201 202 </body> 203 </html> 204
