防止在多选纸张下拉菜单上关闭菜单.聚合物1.0 [英] Prevent menu close on multi select paper-dropdown-menu. Polymer 1.0
问题描述
我在下面的代码段中实现了一个多选下拉菜单.它似乎工作正常.但是，每次我选择一个项目时，菜单都会关闭.我希望菜单保持打开状态，直到用户单击完成"按钮为止.
I have implemented a multi-select drop-down menu in the snippet below. It seems to work fine. However, each time I select an item, the menu closes. I'd like the menu to stay open until the User clicks a 'done' button.
奇怪的是，如果我取消选择一项，菜单保持打开状态，但是如果我选择一项，则菜单关闭.
Strangely enough, the menu stays open if I deselect an item, but closes if I selected an item.
html, body {
height: 100%;
}
body {
overflow: hidden;
margin: 0;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
paper-button {
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-menu/paper-menu.html">
</head>
<body>
<foo-drop ></foo-drop>
<dom-module id="foo-drop">
<template>
<paper-dropdown-menu label="Your favourite pastry">
<paper-menu id="myMenu" class="dropdown-content" multi>
<paper-item>Croissant</paper-item>
<paper-item>Donut</paper-item>
<paper-item>Financier</paper-item>
<paper-item>Madeleine</paper-item>
</paper-menu>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: "foo-drop",
ready: function() {
window.addEventListener('WebComponentsReady', function() {
var menu = document.querySelector("#myMenu");
menu.addEventListener("iron-select", function(e, detail){
console.log(menu.selected);
console.log(menu.selectedItems.length);
for (var i = 0; i < menu.selectedItems.length; i++)
console.log(menu.selectedItems[i].value);
});
});
}
});
</script>
</dom-module>
</body>
</html>
推荐答案
paper-dropdown-menu中菜单的关闭/打开控件使用paper-menu-button.
https://github.com/PolymerElements /paper-dropdown-menu/blob/master/paper-dropdown-menu.html#L150
The control of close/open of the menu in paper-dropdown-menu uses paper-menu-button.
https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html#L150
规范状态将ignoreSelect设置为true.
https://elements.polymer-project.org/elements/paper-menu-button
The specification states set ignoreSelect to true.
https://elements.polymer-project.org/elements/paper-menu-button
有一个错误 https://github.com/PolymerElements/paper-menu-button/issues/58
但是可能在您的环境中有效(至少在Chrome和Firefox上有效).检查ignore-select是否在多选纸张菜单"中工作
https ://elements.polymer-project.org/elements/paper-menu-button?view = demo:demo/index.html& active = paper-menu-button
But maybe works in your environment (works at least on Chrome and Firefox). Check if the ignore-select works in the "Paper Menu with multi selection"
https://elements.polymer-project.org/elements/paper-menu-button?view=demo:demo/index.html&active=paper-menu-button
如果是，则从paper-dropdown-menu获取基础paper-menu-button并设置ignoreSelect = true;
If it does, then from the paper-dropdown-menu get the underlying paper-menu-button and set ignoreSelect = true;
使用
<paper-dropdown-menu id="id_my-paper-dropdown-menu">
集合ignoreSelect应该使用类似的设置(我主要在Dart框架中工作):
The set ignoreSelect should be set with something like this (I mainly work in the Dart framework):
this.$.id_my-paper-dropdown-menu.$.menuButton.ignoreSelect = true;
这篇关于防止在多选纸张下拉菜单上关闭菜单.聚合物1.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
