third_party/polymer/components-chromium/core-menu-button/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-menu-button</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-menu-button.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 {
  51       background-color: #eee;
  52       color: #000;
  53       border: 1px solid #ccc;
  54       border-radius: 3px;
  55     }
  56
  57     core-item {
  58       overflow: hidden;
  59       white-space: nowrap;
  60       text-overflow: ellipsis;
  61     }
  62
  63     html /deep/ core-collapse {
  64       border: 1px solid #ccc;
  65       padding: 8px;
  66     }
  67
  68     .constrained-height {
  69       height: 150px;
  70     }
  71
  72     .colored {
  73       color: #0f9d58;
  74     }
  75
  76     .colored:active,
  77     .dropdown.colored {
  78       border: 1px solid #0f9d58;
  79       background-color: #b7e1cd;
  80     }
  81
  82   </style>
  83
  84 </head>
  85 <body>
  86
  87   <template is="auto-binding">
  88
  89     <section>
  90
  91       <div>Absolutely positioned menu buttons</div>
  92
  93       <core-menu-button>
  94         <core-icon-button icon="menu"></core-icon-button>
  95         <core-dropdown class="dropdown">
  96           <core-menu>
  97             <template repeat="{{pastries}}">
  98               <core-item>{{}}</core-item>
  99             </template>
 100           </core-menu>
 101         </core-dropdown>
 102       </core-menu-button>
 103
 104       <core-menu-button disabled>
 105         <core-icon-button icon="menu"></core-icon-button>
 106         <core-dropdown class="dropdown">
 107           <core-menu>
 108             <core-item>Should not see this</core-item>
 109           </core-menu>
 110         </core-dropdown>
 111       </core-menu-button>
 112
 113       <core-menu-button>
 114       <core-icon-button icon="add"><span style="vertical-align:middle;">add</span></core-icon-button>
 115         <core-dropdown class="dropdown">
 116           <core-menu>
 117             <template repeat="{{pastries}}">
 118               <core-item>{{}}</core-item>
 119             </template>
 120           </core-menu>
 121         </core-dropdown>
 122       </core-menu-button>
 123
 124     </section>
 125
 126     <section>
 127
 128       <div>Layered menu buttons</div>
 129
 130       <button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
 131
 132       <br>
 133
 134       <core-collapse id="collapse">
 135
 136         <core-menu-button>
 137           <core-icon-button icon="menu"></core-icon-button>
 138           <core-dropdown layered class="dropdown">
 139             <core-menu>
 140               <template repeat="{{pastries}}">
 141                 <core-item>{{}}</core-item>
 142               </template>
 143             </core-menu>
 144           </core-dropdown>
 145         </core-menu-button>
 146
 147       </core-collapse>
 148
 149     </section>
 150
 151     <section>
 152
 153       <div>Custom styling</div>
 154
 155       <core-menu-button label="Constrained height">
 156         <core-icon-button icon="menu"></core-icon-button>
 157         <core-dropdown class="dropdown constrained-height">
 158           <core-menu>
 159             <template repeat="{{pastries}}">
 160               <core-item>{{}}</core-item>
 161             </template>
 162           </core-menu>
 163         </core-dropdown>
 164       </core-menu-button>
 165
 166       <core-menu-button label="Colored">
 167         <core-icon-button icon="menu" class="colored"></core-icon-button>
 168         <core-dropdown class="dropdown colored">
 169           <core-menu>
 170             <template repeat="{{pastries}}">
 171               <core-item>{{}}</core-item>
 172             </template>
 173           </core-menu>
 174         </core-dropdown>
 175       </core-menu-button>
 176
 177     </section>
 178
 179   </template>
 180
 181   <script>
 182
 183     scope = document.querySelector('template[is=auto-binding]');
 184
 185     scope.pastries = [
 186       'Apple fritter',
 187       'Croissant',
 188       'Donut',
 189       'Financier',
 190       'Jello',
 191       'Madeleine',
 192       'Pound cake',
 193       'Pretzel',
 194       'Sfogliatelle'
 195     ];
 196
 197   </script>
 198
 199 </body>
 200 </html>