聚合物导航抽屉面板上的调用功能 [英] Call function on polymer navigation drawer panel
问题描述
我被困住了.我在玩聚合物,但无法管理抽屉面板上的togglePanel函数,我的代码如下所示:
I am stuck. I am playing around with polymer but I do not manage to call the togglePanel function on the drawer panel and my code looks like this:
<!DOCTYPE html>
<html>
<head>
<!-- 1. Load platform.js for polyfill support. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Use an HTML Import to bring in the element. -->
<link rel="import"
href="bower_components/core-ajax/core-ajax.html">
<link rel="import"
href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import"
href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import"
href="bower_components/core-icon-button/core-icon-button.html">
</head>
<body>
<script>
function openDrawer() {
alert("fuck");
var drawer = document.getElementById("main-drawer");
drawer.togglePanel();
}
</script>
<core-drawer-panel id="main-drawer">
<div drawer style="background-color: #FF0000;">
</div>
<div main style="background-color: #00FF00;">
<core-toolbar style="background-color: #8888FF;">
<core-icon-button icon="menu" onclick="openDrawer()" on-tap="openDrawer()"></core-icon-button>
<div flex>PageTitle</div>
</core-toolbar>
</div>
</core-drawer-panel>
</body>
</html>
当我单击菜单按钮时,该函数被调用,但没有其他反应,我确保使用警报.
The function gets called when I click the menu button but nothing more happens, i made sure using an alert.
我想这与影子DOM有关,但我不确定.我希望有人知道如何调用它的功能.
I guess it has something to do with the shadow DOM but I am not sure. I hope somebody knows how to call its function.
推荐答案
core-drawer-panel
始终保持打开状态.默认情况下,除非您使用的是平板电脑或更小设备,否则它将通常保持打开状态.
core-drawer-panel
stays open all the time if the window size is less than responsiveWidth
. By default it will generally stay open unless you are on a tablet device or smaller.
如果您将responsiveWidth
设置得很高,则可以更改行为,使其仅在需要时打开.
If you set responsiveWidth
really high, you can alter the behavior so it only opens on demand.
<core-drawer-panel id="main-drawer" responsiveWidth="900em">
http://jsbin.com/zorufa/2/edit
这篇关于聚合物导航抽屉面板上的调用功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!