紙アイコンボタントリガーを使用したポリマー製アイアンドロップダウン

Question

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

Answer 1

あなたは以下のコードとthis Codepen.io exampleのように、あなたのiron-dropdownにopen()メソッドを呼び出す必要があります：

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