如何在纸工具栏内使用聚合物纸菜单按钮？

Question

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

  <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>

Answer 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?

如何在纸工具栏内使用聚合物纸菜单按钮？

How to use Polymer paper-menu-button inside paper-toolbar?

polymer

polymer-1.0