如何使聚合物入门套件中的应用程序抽屉切换

Question

编辑：代码在这里https://github.com/polymerelements/polymer-starter-kit（我只是按照readme说明运行了聚合物init）

当我尝试使用

时

<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>

喜欢在文档中，按钮消失了。当我尝试使用

时

<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>

按钮重新出现，但不起作用。

我尝试按照标签中的其他一些示例，例如在标签中使用onclick = drawer.toggle（），但是我不知道如何/何处定义抽屉。尝试使用

也是如此

document.querySelector('paper-icon-button').addEventListener('tap', function() {
      drawer.toggle();
    });

这是本地DOM，所以我需要以某种方式解决。当我尝试使用var drawer =this。$$（'app-drawer'）或this。$。$。'app-drawer'或我可以复制和粘贴的任何其他语法时，我会遇到错误。我显然是聚合物的新手，经过6个小时的比赛，我迷路了，可以使用一些指导。

Answer 1

事实证明，对于大屏幕而言，抽屉式toggle被禁用，因此在笔记本电脑上开发时，整个按钮将消失。要恢复它，您需要在App-drewer-layout标签中使用force-narrow。还值得注意的是，该文档没有列出您可以在标签中使用的属性，它仅列出属性...但是您可以通过从骆驼切换到使用敲打来将属性转换为属性。Forcenarrow成为Force-Narrow。我在这里找到了这一点：https：//github.com/polymerelemes/app-layout/issues/218

Answer 2

您应该在Paper-icon-button中声明the-tap事件以处理抽屉：

<paper-icon-button icon="menu" on-tap="_toggleDrawer" aria-label="Menu"> </paper-icon-button>

然后在您的应用抽屉中您应该反映te属性抽屉，以便可以打开或关闭它：

<app-drawer opened="{{drawerOpened}}" swipe-open tabindex="0">

并最终声明这样的_toggledrawer函数以更改App-Drawer打开属性的DE值：

_toggleDrawer: function() {
    this.drawerOpened = !this.drawerOpened;
  }

希望它有帮助