带纸张图标按钮触发器的聚合物铁下拉杆

Question

我有一个带聚合物的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> 

Answer 1

你需要调用open()方法对你iron-dropdown如下面的代码和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>