2017-04-12 9 views
0

하나의 요소에는 paper-drawer-panel, 자식 요소에는 도구 모음이 있습니다. 툴바에는 메뉴 버튼이있어 서랍 패널을 토글해야하지만 그렇게하지는 않습니다. paper-drawer-panel에 하위 요소의 명령을 허용하도록 어떻게 말할 수 있습니까?폴리머 용지 - 서랍 패널이 어린이 토글을 수락하지 않음

부모 요소 :

<dom-module id="nav-drawer"> 
<template> 
    <paper-drawer-panel drawerFocusSelector=""> 
     <div drawer id="drawerbox"> 
     Contents of drawer panel here. 
     </div> 
     <div main> 
     <tool-bar></tool-bar> 
     </div> 
    <paper-drawer-panel> 
</template> 
</dom-module> 

자식 요소 : 당신의 도움에 대한

<dom-module id="tool-bar"> 
    <template> 
    <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
    </paper-toolbar> 
    </template> 
</dom-module> 

감사합니다. 나는 Polymer를 처음 사용합니다.

+0

위의 솔루션은 서랍 패널을 엽니 다하기 위해 노력하고 있습니다. 열 때 내보기에서 그것은 메뉴 버튼을 오버레이하므로 닫는 것만으로 옆에 있습니다. 메뉴 버튼을 통해 메뉴를 닫으려면'togdraw : "main"'을 전달해야합니다. – Vims

답변

0

자신이 대답을 찾았습니다 : attributeson-tap 기능을 추가하여 다음과 같이 변경했습니다.

<dom-module id="tool-bar" attributes="togdraw"> 
    <template> 
    <paper-toolbar> 
     <paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button> 
    </paper-toolbar> 
    </template> 
<script> 
..... 
     toggleDrawer: function() { 
     this.fire('eventFromChild',{togdraw:"drawer"}); 
     } 
.... 
</script> 

</dom-module> 

그리고 그에 따라 같이 변경 한 nav-drawer는 :

<dom-module id="nav-drawer"> 
<template> 
    <paper-drawer-panel drawerFocusSelector="" selected="{{selectPanel}}"> 
     <div drawer id="drawerbox"> 
     Contents of drawer panel here. 
     </div> 
     <div main> 
     <tool-bar></tool-bar> 
     </div> 
    <paper-drawer-panel> 
</template> 
<script> 
.... 
    properties: { 
     selectPanel: String 
    }, 
    ready: function() { 
    this.addEventListener('eventFromChild', this.toggleDrawer); 
    }, 
    toggleDrawer: function(event,selectPanel) { 
    this.selectPanel = event.detail.togdraw; 
    return selectPanel; 
    } 
.... 
</script> 
</dom-module>