Home | History | Annotate | Download | only in paper-dropdown-menu 
      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>
    212