1<!doctype html> 2<!-- 3Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 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.0, user-scalable=yes"> 17 18 <title>paper-dropdown-menu</title> 19 20 <script src="../webcomponentsjs/webcomponents.js"></script> 21 22 <link href="../core-collapse/core-collapse.html" rel="import"> 23 <link href="../core-menu/core-menu.html" rel="import"> 24 <link href="../paper-dropdown/paper-dropdown.html" rel="import"> 25 <link href="../paper-item/paper-item.html" rel="import"> 26 27 <link href="paper-dropdown-menu.html" rel="import"> 28 29 <style shim-shadowdom> 30 body { 31 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 32 font-size: 14px; 33 margin: 0; 34 padding: 24px; 35 -webkit-tap-highlight-color: rgba(0,0,0,0); 36 -webkit-touch-callout: none; 37 } 38 39 section { 40 padding: 20px 0; 41 } 42 43 section > div { 44 padding: 14px; 45 font-size: 16px; 46 } 47 48 html /deep/ paper-dropdown-menu { 49 box-sizing: border-box; 50 width: 170px; 51 } 52 53 html /deep/ core-menu { 54 box-sizing: border-box; 55 width: 170px; 56 } 57 58 paper-item { 59 overflow: hidden; 60 white-space: nowrap; 61 text-overflow: ellipsis; 62 } 63 64 html /deep/ core-collapse { 65 border: 1px solid #ccc; 66 padding: 8px; 67 } 68 69 html /deep/ core-overlay { 70 border: 1px solid #ccc; 71 padding: 8px; 72 background: #fff; 73 } 74 75 .constrained-height { 76 height: 150px; 77 } 78 79 .colored { 80 color: #0f9d58; 81 } 82 83 .dropdown.colored::shadow #ripple, 84 .dropdown.colored::shadow #background { 85 border: 1px solid #0f9d58; 86 background-color: #b7e1cd; 87 } 88 89 </style> 90 91</head> 92<body> 93 94 <template is="auto-binding"> 95 96 <section> 97 98 <div>Absolutely positioned dropdowns</div> 99 100 <paper-dropdown-menu label="Your favorite pastry"> 101 <paper-dropdown class="dropdown"> 102 <core-menu class="menu"> 103 <template repeat="{{pastries}}"> 104 <paper-item>{{}}</paper-item> 105 </template> 106 </core-menu> 107 </paper-dropdown> 108 </paper-dropdown-menu> 109 110 <br><br> 111 112 <paper-dropdown-menu label="Disabled" disabled> 113 <paper-dropdown class="dropdown"> 114 <core-menu class="menu"> 115 <paper-item>Should not see this</paper-item> 116 </core-menu> 117 </paper-dropdown> 118 </paper-dropdown-menu> 119 120 </section> 121 122 <section> 123 124 <div>Layered dropdowns</div> 125 126 <button onclick="document.getElementById('overlay').toggle()">toggle core-overlay</button> 127 128 <core-overlay id="overlay"> 129 130 <paper-dropdown-menu label="Your favorite pastry"> 131 <paper-dropdown layered class="dropdown"> 132 <core-menu class="menu"> 133 <template repeat="{{pastries}}"> 134 <paper-item>{{}}</paper-item> 135 </template> 136 </core-menu> 137 </paper-dropdown> 138 </paper-dropdown-menu> 139 140 </core-overlay> 141 142 <button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button> 143 144 <br> 145 146 <core-collapse id="collapse"> 147 148 <paper-dropdown-menu label="Your favorite pastry"> 149 <paper-dropdown layered class="dropdown"> 150 <core-menu class="menu"> 151 <template repeat="{{pastries}}"> 152 <paper-item>{{}}</paper-item> 153 </template> 154 </core-menu> 155 </paper-dropdown> 156 </paper-dropdown-menu> 157 158 </core-collapse> 159 160 </section> 161 162 <section> 163 164 <div>Custom styling</div> 165 166 <paper-dropdown-menu label="Constrained height"> 167 <paper-dropdown class="dropdown constrained-height"> 168 <core-menu class="menu"> 169 <template repeat="{{pastries}}"> 170 <paper-item>{{}}</paper-item> 171 </template> 172 </core-menu> 173 </paper-dropdown> 174 </paper-dropdown-menu> 175 176 <br><br> 177 178 <paper-dropdown-menu label="Colored"> 179 <paper-dropdown class="dropdown colored"> 180 <core-menu class="menu"> 181 <template repeat="{{pastries}}"> 182 <paper-item>{{}}</paper-item> 183 </template> 184 </core-menu> 185 </paper-dropdown> 186 </paper-dropdown-menu> 187 188 </section> 189 190 </template> 191 192 <script> 193 194 scope = document.querySelector('template[is=auto-binding]'); 195 196 scope.pastries = [ 197 'Apple fritter', 198 'Croissant', 199 'Donut', 200 'Financier', 201 'Jello', 202 'Madeleine', 203 'Pound cake', 204 'Pretzel', 205 'Sfogliatelle' 206 ]; 207 208 </script> 209 210</body> 211</html> 212