带有纸张图标按钮触发器的聚合物熨斗下拉

【问题标题】：Polymer iron-dropdown with a paper-icon-button trigger带有纸张图标按钮触发器的聚合物熨斗下拉
【发布时间】：2017-10-20 14:50:05
【问题描述】：

我有一个带有 Polymer 的 Angular 站点，我想在我的标题上设置一个通知部分，但我无法使按钮工作。应该如何绑定按钮上的点击事件来触发下拉？

这是我的代码：

<paper-icon-button icon="mail" slot="dropdown-trigger"></paper-icon-button>
<paper-badge label="9" class="notification-badge"></paper-badge>
<iron-dropdown>
  <ul slot="dropdown-content">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</iron-dropdown>

【问题讨论】：

标签： angular polymer-2.x

【解决方案1】：

您需要在iron-dropdown 上调用open() 方法，如下面的代码和this Codepen.io example：

<dom-module id="x-select">
  <template>
    <style>
      :host {
        display: inline-block;
        margin: 1em;
      }
    </style>
    <paper-icon-button icon="mail" alt="mail" slot="dropdown-trigger" on-tap="open"></paper-icon-button>
    <paper-badge label="9"></paper-badge>
    <iron-dropdown id="dropdown">
      <ul slot="dropdown-content">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </iron-dropdown>
  </template>
  <script>
    class XSelect extends Polymer.Element {
      static get is() { return 'x-select'; }
      open() {
        this.$.dropdown.open();
      }
    }

    window.customElements.define(XSelect.is, XSelect);
  </script>
</dom-module>

<x-select></x-select>

【讨论】：