聚合物关闭抽屉面板

Question

单击纸质项目时如何关闭抽屉面板。我似乎不明白文档或其他类似问题。

<paper-drawer-panel responsive-width="800px">
    <paper-header-panel drawer id="drawer">
        <div class="horizontal-section-container">
            <div class="horizontal-section">
                <paper-menu>
                    <paper-icon-item onclick="closeDrawer()" id="icon">
                        <iron-icon icon="favorite" item-icon></iron-icon>
                        Favorite
                    </paper-icon-item>

                    <paper-item>Inbox</paper-item>
                    <paper-item>Starred</paper-item>
                    <paper-item>Sent mail</paper-item>
                    <paper-item>Drafts</paper-item>
                </paper-menu>
            </div>
        </div>
    <!--<ul>
        <li><paper-ripple></paper-ripple>One</li>
        <li><paper-ripple></paper-ripple>Two</li>
        <li><paper-ripple></paper-ripple>Three</li>
    </ul>-->

    </paper-header-panel>
<!-- <paper-header-panel main>
        <paper-toolbar>
            <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
            <div class="title">Title</div>
        </paper-toolbar> 
        <div>

        </div>
    </paper-header-panel>
-->

我正在使用 polymer 和 meteor 1.2.1。谁能帮帮我吗？

Answer 1

在你的paper-icon-item（这里为什么不用paper-icon-button？）添加属性paper-drawer-toggle.

因此您的代码将如下所示：

最喜欢的

paper-drawer-element 状态的 docs：

An element that should toggle the drawer will automatically do so if it's given the paper-drawer-toggle attribute. Also this element will automatically be hidden in wide layout.

Answer 2

这将是另一种方法

drawerToggle: function() {
    if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
        this.$.drawer.togglePanel();
    } else {
        this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
    }
}

http://jsbin.com/winedi/edit?html,output

Answer 3

在您的 paper 元素的 onclick 函数中添加此代码段。

if (!this.$.drawer.persistent) {
          this.$.drawer.close();
}

聚合物关闭抽屉面板

Polymer closing the drawer panel

polymer

polymer-1.0