third_party/polymer/components/core-menu-button/demo.html

   1
   2 <!doctype html>
   3 <!--
   4 Copyright 2013 The Polymer Authors. All rights reserved.
   5 Use of this source code is governed by a BSD-style
   6 license that can be found in the LICENSE file.
   7 -->
   8 <html>
   9 <head>
  10   <title>core-menu-button</title>
  11   <script src="../platform/platform.js"></script>
  12   <link rel="import" href="core-menu-button.html">
  13         <link rel="import" href="../core-item/core-item.html">
  14   <link rel="import" href="../core-toolbar/core-toolbar.html">
  15   <style>
  16     body {
  17                         margin: 0;
  18                         font-family: sans-serif;
  19     }
  20
  21     core-toolbar {
  22       background-color: #cfa0e9;
  23       overflow: hidden;
  24     }
  25
  26                 .small::shadow core-icon-button {
  27                         padding: 12px;
  28                 }
  29
  30                 .small::shadow core-icon-button::shadow core-icon {
  31                         display: block;
  32                         height: 14px;
  33                         width: 14px;
  34                 }
  35
  36   </style>
  37 </head>
  38 <body class="core-body-text" unresolved>
  39
  40
  41         <br>
  42         <br>
  43         <br>
  44         <br>
  45         <br>
  46         <br>
  47         <br>
  48         <br>
  49         <br>
  50         <br>
  51         <core-toolbar>
  52
  53                 <core-menu-button icon="menu">
  54
  55                         <core-item icon="settings" label="Settings"></core-item>
  56                         <core-item icon="add" label="Add"></core-item>
  57                         <core-item icon="search" label="Search"></core-item>
  58
  59                 </core-menu-button>
  60
  61                 <core-menu-button icon="menu" class="small">
  62
  63                         <core-item icon="settings" label="Settings"></core-item>
  64                         <core-item icon="add" label="Add"></core-item>
  65                         <core-item icon="search" label="Search"></core-item>
  66
  67                 </core-menu-button>
  68
  69                 <div core-flex>Toolbar</div>
  70
  71                 <core-menu-button icon="add" halign="right">
  72
  73                         <core-item icon="star-rate" label="Rate"></core-item>
  74                         <core-item icon="today" label="Today"></core-item>
  75                         <core-item icon="keep" label="Keep"></core-item>
  76
  77                 </core-menu-button>
  78
  79                 <core-menu-button icon="more-vert" halign="right" valign="top">
  80
  81                         <core-item icon="visibility" label="Visibility"></core-item>
  82                         <core-item icon="extension" label="Extension"></core-item>
  83                         <core-item icon="info" label="Info"></core-item>
  84
  85                 </core-menu-button>
  86
  87         </core-toolbar>
  88
  89 </body>
  90 </html>