third_party/polymer/components/core-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>core-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-dropdown/core-dropdown.html" rel="import">
  24   <link href="../core-icons/core-icons.html" rel="import">
  25   <link href="../core-icon-button/core-icon-button.html" rel="import">
  26   <link href="../core-item/core-item.html" rel="import">
  27   <link href="../core-menu/core-menu.html" rel="import">
  28
  29   <link href="core-dropdown-menu.html" rel="import">
  30
  31   <style shim-shadowdom>
  32     body {
  33       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  34       font-size: 14px;
  35       margin: 0;
  36       padding: 24px;
  37       -webkit-tap-highlight-color: rgba(0,0,0,0);
  38       -webkit-touch-callout: none;
  39     }
  40
  41     section {
  42       padding: 20px 0;
  43     }
  44
  45     section > div {
  46       padding: 14px;
  47       font-size: 16px;
  48     }
  49
  50     html /deep/ core-dropdown-menu {
  51       box-sizing: border-box;
  52       width: 170px;
  53     }
  54
  55     html /deep/ core-dropdown {
  56       box-sizing: border-box;
  57       min-width: 170px;
  58       background-color: #eee;
  59       color: #000;
  60       border: 1px solid #ccc;
  61       border-radius: 3px;
  62     }
  63
  64     core-item {
  65       overflow: hidden;
  66       white-space: nowrap;
  67       text-overflow: ellipsis;
  68     }
  69
  70     html /deep/ core-collapse {
  71       border: 1px solid #ccc;
  72       padding: 8px;
  73     }
  74
  75     .constrained-height {
  76       height: 150px;
  77     }
  78
  79     .colored {
  80       border: 1px solid #0f9d58;
  81       background-color: #b7e1cd;
  82       color: #0f9d58;
  83     }
  84
  85   </style>
  86
  87 </head>
  88 <body>
  89
  90   <template is="auto-binding">
  91
  92     <section>
  93
  94       <div>Absolutely positioned dropdowns</div>
  95
  96       <core-dropdown-menu label="Your favorite pastry">
  97         <core-dropdown class="dropdown">
  98           <core-menu>
  99             <template repeat="{{pastries}}">
 100               <core-item>{{}}</core-item>
 101             </template>
 102           </core-menu>
 103         </core-dropdown>
 104       </core-dropdown-menu>
 105
 106       <br><br>
 107
 108       <core-dropdown-menu label="Disabled" disabled>
 109         <core-dropdown class="dropdown">
 110           <core-menu>
 111             <core-item>Should not see this</core-item>
 112           </core-menu>
 113         </core-dropdown>
 114       </core-dropdown-menu>
 115
 116     </section>
 117
 118     <section>
 119
 120       <div>Layered dropdowns</div>
 121
 122       <button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
 123
 124       <br>
 125
 126       <core-collapse id="collapse">
 127
 128         <core-dropdown-menu label="Your favorite pastry">
 129           <core-dropdown layered class="dropdown">
 130             <core-menu>
 131               <template repeat="{{pastries}}">
 132                 <core-item>{{}}</core-item>
 133               </template>
 134             </core-menu>
 135           </core-dropdown>
 136         </core-dropdown-menu>
 137
 138       </core-collapse>
 139
 140     </section>
 141
 142     <section>
 143
 144       <div>Custom styling</div>
 145
 146       <core-dropdown-menu label="Constrained height">
 147         <core-dropdown class="dropdown constrained-height">
 148           <core-menu>
 149             <template repeat="{{pastries}}">
 150               <core-item>{{}}</core-item>
 151             </template>
 152           </core-menu>
 153         </core-dropdown>
 154       </core-dropdown-menu>
 155
 156       <br><br>
 157
 158       <core-dropdown-menu label="Colored">
 159         <core-dropdown class="dropdown colored">
 160           <core-menu>
 161             <template repeat="{{pastries}}">
 162               <core-item>{{}}</core-item>
 163             </template>
 164           </core-menu>
 165         </core-dropdown>
 166       </core-dropdown-menu>
 167
 168     </section>
 169
 170   </template>
 171
 172   <script>
 173
 174     scope = document.querySelector('template[is=auto-binding]');
 175
 176     scope.pastries = [
 177       'Apple fritter',
 178       'Croissant',
 179       'Donut',
 180       'Financier',
 181       'Jello',
 182       'Madeleine',
 183       'Pound cake',
 184       'Pretzel',
 185       'Sfogliatelle'
 186     ];
 187
 188   </script>
 189
 190 </body>
 191 </html>