demo.html - Android社区 - https://www.androidos.net.cn/

<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>paper-menu-button</title>
  <script src="../platform/platform.js"></script>
  <link href="../core-icons/core-icons.html" rel="import">
  <link href="../paper-icon-button/paper-icon-button.html" rel="import">
  <link href="../paper-item/paper-item.html" rel="import">
  <link href="../paper-shadow/paper-shadow.html" rel="import">
  <link href="paper-menu-button.html" rel="import">
  <style>
    body {
      margin: 0;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 14px;
      background: #f7f7f7;
    }

    .card {
      background: #fff;
      width: 320px;
      height: 480px;
      margin: 128px 96px;
      border-radius: 3px;
    }

    .toolbar {
      background: #91a7ff;
      position: relative;
      padding: 0.5em;
      border-radius: 3px 3px 0 0;
    }

    .inner {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
    }

    body /deep/ core-icon {
      fill: #fff;
    }

    body /deep/ paper-item::shadow core-icon {
      fill: #000;
    }

    core-icon {
      fill: #fff;
    }

    paper-item core-icon {
      fill: #000;
    }

  </style>
</head>
<body unresolved>

  <paper-shadow></paper-shadow>

  <div class="card paper-shadow-top-z-1">
    <div class="inner paper-shadow-bottom-z-1"></div>
    <div layout horizontal class="toolbar paper-shadow-top-z-1">
      <div class="inner paper-shadow-bottom-z-1"></div>
      <paper-menu-button icon="menu" halign="left">
        <paper-item label="Menu Item 1"></paper-item>
        <paper-item label="Menu Item 2"></paper-item>
        <paper-item label="Menu Item 3"></paper-item>
      </paper-menu-button>
      <div flex></div>
      <paper-icon-button icon="search"></paper-icon-button>
      <paper-menu-button icon="more-vert" halign="right" slow>
        <paper-item label="Refresh"></paper-item>
        <paper-item label="Send Feedback"></paper-item>
        <paper-item label="Settings"></paper-item>
        <paper-item label="Help"></paper-item>
        <paper-item label="Sign Out"></paper-item>
      </paper-menu-button>
    </div>
  </div>

</body>
</html>