聚合物导航抽屉面板上的调用功能 [英] Call function on polymer navigation drawer panel

查看:75
本文介绍了聚合物导航抽屉面板上的调用功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我被困住了.我在玩聚合物,但无法管理抽屉面板上的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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆