聚合物纸抽屉面板不接受儿童的拨动
Polymer paper-drawer-panel not accepting toggle from child
我在一个元素中有一个 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 的新手。
我自己找到了答案:
我更改的 tool-bar
元素如下,添加了 attributes
和一个 on-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>
我在一个元素中有一个 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 的新手。
我自己找到了答案:
我更改的 tool-bar
元素如下,添加了 attributes
和一个 on-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>