聚合物:纸张操作对话框打开时,纸张菜单按钮不会关闭
Polymer: paper-menu-button do not close when paper-action-dialog opens
我有一个纸质菜单按钮,在同一页面上有一个纸质操作对话框。像那样:
function openDialog() {
document.querySelector('#dialog').toggle();
};
<script src="//www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dialog/paper-action-dialog.html">
<link rel="import" href="//www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html">
<paper-action-dialog id="dialog" heading="Dialog Title" backdrop>
<p>Some content</p>
<paper-button dismissive>More Info</paper-button>
<paper-button affirmative>Decline</paper-button>
<paper-button affirmative>Accept</paper-button>
</paper-action-dialog>
<button type="button" onclick="openDialog()">Click Me!</button>
<br/> <br/>
<paper-menu-button>
<paper-icon-button icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
当我单击打开菜单按钮但不关闭它并单击按钮打开操作对话框时,菜单按钮保持打开状态。我试图关闭它:
document.querySelector('core-overlay-layer').opened = false;
并与:
$('core-overlay-layer').removeClass('core-opened');
但核心覆盖层无法以这种方式正确关闭,如果您尝试再次打开菜单按钮,在第一次单击时它将关闭最后一个打开的隐藏菜单按钮。
在打开操作对话框之前关闭菜单按钮的正确方法是什么?
我在组件的文档中看到过:paper-menu-button。
overlayListeners: {
'core-overlay-open': 'openAction',
'core-activate': 'activateAction'
},
activateAction: function() {
this.opened = false;
}
所以我会这样做:
function openDialog() {
document.querySelector('#dialog').toggle();
document.querySelector('paper-menu-button').opened = false;
};
打开后是整个元素的属性。
我有一个纸质菜单按钮,在同一页面上有一个纸质操作对话框。像那样:
function openDialog() {
document.querySelector('#dialog').toggle();
};
<script src="//www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dialog/paper-action-dialog.html">
<link rel="import" href="//www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html">
<paper-action-dialog id="dialog" heading="Dialog Title" backdrop>
<p>Some content</p>
<paper-button dismissive>More Info</paper-button>
<paper-button affirmative>Decline</paper-button>
<paper-button affirmative>Accept</paper-button>
</paper-action-dialog>
<button type="button" onclick="openDialog()">Click Me!</button>
<br/> <br/>
<paper-menu-button>
<paper-icon-button icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
当我单击打开菜单按钮但不关闭它并单击按钮打开操作对话框时,菜单按钮保持打开状态。我试图关闭它:
document.querySelector('core-overlay-layer').opened = false;
并与:
$('core-overlay-layer').removeClass('core-opened');
但核心覆盖层无法以这种方式正确关闭,如果您尝试再次打开菜单按钮,在第一次单击时它将关闭最后一个打开的隐藏菜单按钮。 在打开操作对话框之前关闭菜单按钮的正确方法是什么?
我在组件的文档中看到过:paper-menu-button。
overlayListeners: {
'core-overlay-open': 'openAction',
'core-activate': 'activateAction'
},
activateAction: function() {
this.opened = false;
}
所以我会这样做:
function openDialog() {
document.querySelector('#dialog').toggle();
document.querySelector('paper-menu-button').opened = false;
};
打开后是整个元素的属性。