如何使用纸工具栏中的聚合物纸菜单按钮？答案

【问题标题】：How to use Polymer paper-menu-button inside paper-toolbar?如何使用纸工具栏中的聚合物纸菜单按钮？
【发布时间】：2017-06-26 06:42:30
【问题描述】：

我想创建一个下拉菜单并在工具栏中添加注销按钮。但是纸质菜单按钮在纸质工具栏中不起作用。

  <paper-toolbar id="order-toolbar">
        <template is="dom-if" if="[[ showHome ]]">
          <img class="header-logo" on-tap="tileTapped" src="assets/paisool-logo.svg">
        </template>
        <template is="dom-if" if="[[ !showHome ]]">
          <iron-icon id="back-arrow" class="header-logo" icon="arrow-back" on-tap="tileTapped"></iron-icon>
        </template>
        <h2 class="orders-heading">Store owner</h2>
        <paper-menu-button>
          <paper-icon-button id="header-menu-button" icon="more-vert" slot="dropdown-trigger"></paper-icon-button>
          <paper-listbox slot="dropdown-content">
            <paper-item>Share</paper-item>
            <paper-item>Settings</paper-item>
            <paper-item>Help</paper-item>
          </paper-listbox>
        </paper-menu-button>
      </paper-toolbar>

【问题讨论】：

你能再显示一些代码吗？纸质菜单按钮应该在纸质工具栏中工作
@RyanTheLeach 好的

标签： polymer polymer-1.0

【解决方案1】：

<paper-toolbar id="order-toolbar">
  <template is="dom-if" if="[[ showHome ]]">
    <img class="header-logo" on-tap="tileTapped" src="assets/paisool-logo.svg">
  </template>
  <template is="dom-if" if="[[ !showHome ]]">
    <iron-icon id="back-arrow" class="header-logo" icon="arrow-back" on-tap="tileTapped"></iron-icon>
  </template>
  <h2 class="orders-heading">Store owner</h2>
  <paper-menu-button>
    <paper-icon-button id="header-menu-button" icon="more-vert" class="dropdown-trigger">
    </paper-icon-button>
    <paper-listbox slot="dropdown-content">
      <paper-item>Share</paper-item>
      <paper-item>Settings</paper-item>
      <paper-item>Help</paper-item>
    </paper-listbox>
  </paper-menu-button>
</paper-toolbar>

我注意到您使用的是slot="dropdown-trigger"。尝试使用class="dropdown-trigger"。我认为slot 一定来自 Polymer 2.0？

【讨论】：

感谢它正在工作。