Polymer 聚合物纸盒面板不接受来自儿童的开关
我在一个元素中有一个Polymer 聚合物纸盒面板不接受来自儿童的开关,polymer,paper-elements,Polymer,Paper Elements,我在一个元素中有一个纸盒面板,在子元素中有一个工具栏。工具栏上有一个菜单按钮,可以切换抽屉面板,但不能。如何让纸盒面板接受子元素的命令 父元素: <dom-module id="nav-drawer"> <template> <paper-drawer-panel drawerFocusSelector=""> <div drawer id="drawerbox"> Contents of drawer pane
纸盒面板
,在子元素中有一个工具栏。工具栏上有一个菜单按钮,可以切换抽屉面板,但不能。如何让纸盒面板
接受子元素的命令
父元素:
<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>
谢谢你的帮助。我不熟悉聚合物。我自己找到了答案:
工具栏
元素I更改如下,添加了属性
和一个点击
功能
<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>
上述解决方案仅适用于打开抽屉面板。打开时,在我看来,它覆盖了菜单按钮,因此只需单击旁边的按钮即可关闭。如果您也想通过菜单按钮关闭它,则需要确保它通过
togdraw:“main”
。
<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>