third_party/polymer/components-chromium/paper-dropdown-menu/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject 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>