帶紙張圖標按鈕觸發器的聚合物鐵下拉桿

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>