선택한 코어 메뉴 항목을 사용자 정의 폴리머 요소에 넣으려면 어떻게해야합니까?

Question

paper-button에 paper-dropdown을 캡슐화하려고합니다. 이렇게하려면, 나는 사용자 정의 요소, paper-dropdown-holder했다 :

<polymer-element name="paper-dropdown-holder" extends="paper-button" relative on-tap="{{toggle}}"> 
<template> 
<shadow></shadow> 
<content></content> 
</template> 
<script> 
Polymer({ 
    toggle: function() { 
     if (!this.dropdown) { 
      this.dropdown = this.querySelector('paper-dropdown'); 
     } 
     this.dropdown && this.dropdown.toggle(); 
    } 
}); 
</script> 
</polymer-element> 

와 나는 같은 페이지에서 그것을 사용하고 있습니다 : 자동을 넣어하는 방법을 알아 내기 위해 내 문제가 The documentation을 해독한다

<paper-dropdown-holder raised tabindex="0" class="unpadded"> 
     <paper-dropdown class="dropdown" flex> 
      <core-menu class="menu" selected="0"> 
       <paper-item><a href="#writing">Writing</a></paper-item> 
       <paper-item><a href="#blog">Blog</a></paper-item> 
       <paper-item><a href="#art">Art</a></paper-item> 
      </core-menu> 
     </paper-dropdown> 
</paper-dropdown-holder> 

현재 선택된 메뉴 항목의 텍스트를 paper-dropdown-holder에 입력하십시오.

첫 번째 시도는 paper-dropdown-menu 표준을 사용하는 것이었지만 쉽게 paper-button처럼 스타일을 지정할 수 없었습니다. 해커가 아니라 (더 나은 용어가 부족한) 해커를 수행 할 방법이 있습니까? 답변이 Polymer 철학을 지키면 정말 좋을 것 같습니다.

보너스 도전 : "섹션 ​​선택"과 같은 기본 텍스트를 어떻게 설정합니까? 폴리머의 멋진 것들을

Answer 1

하나는 오픈 소스입니다 ... 그건 당신이 이미 존재하는 요소를 기반으로 새로운 요소를 구현하는 방법을 배울 수 있다고 말했다 ....

당신이 paper-dropdown-menu 소스를 살펴있는 경우 그것과 같은 것을 쉽게 만들 수 있지만 paper-button을 "컨트롤"로 사용합니다.

그래서

1. 새로운 요소는 core-dropdown-base하지 paper-button 확장해야합니다.
2. 논리적 따라 핸들러 (core-overlay-open, core-activate, core-select) 이벤트를 결합하여이 paper-dropdown-menu의 도움으로 그렇게 할 수있는 작업이 요소를 확인하십시오. 는 (실제 바인딩은 attached 이벤트 리스너 내에서 호출 dropdown 게터에 core-dropdown-base에서 일어나는

함께 넣어하기 :..

<polymer-element name="paper-dropdown-holder" extends="core-dropdown-base" relative> 
    <template> 
    <div> 
     <paper-button raised on-tap="{{toggle}}">{{selectedItemLabel || label}}</paper-button> 
     <content></content> 
    </div> 
    </template> 

    <script> 
     Polymer('paper-dropdown-holder', { 
     publish: { 
      label: 'Select an item', 
     }, 

     selectedItemLabel: '', 

     overlayListeners: { 
      'core-overlay-open': 'openAction', 
      'core-activate': 'activateAction', 
      'core-select': 'selectAction' 
     }, 

     activateAction: function(e) { 
      this.opened = false; 
     }, 

     selectAction: function(e) { 
      var detail = e.detail; 
      if (detail.isSelected) { 
      this.selectedItemLabel = detail.item.label || detail.item.textContent; 
      } else { 
      this.selectedItemLabel = ''; 
      } 
     } 

     }); 
    </script> 
</polymer-element> 

Demo