Question

编辑：代码在这里https://github.com/PolymerElements/polymer-starter-kit（我刚刚根据自述文件说明运行了聚合物初始化）

当我尝试使用

时

<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'）或者这个。$''app-drawer'或者我可以复制和粘贴的任何其他语法时，我只是得到错误。我显然是Polymer的新手，经过6个小时的玩耍后，我迷失了，可以使用一些指导。

Answer 1

事实证明，大屏幕禁用抽屉切换，因此在笔记本电脑上进行显影时，整个按钮将消失。要恢复它，您需要在app-drawer-layout标记中使用force-narrow。还值得注意的是，文档没有列出您可以在标签中使用的属性，它只列出属性......但您可以通过从camelCase切换到使用破折号将属性转换为属性。 forceNarrow变得狭窄。我在这里找到了这个：https://github.com/PolymerElements/app-layout/issues/218

Answer 2

您应该在纸张图标按钮中声明点击事件以处理抽屉：

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

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

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

最后声明像这样的_toggleDrawer函数来改变app-drawer打开属性的de值：

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

希望有所帮助

如何让Polymer starter-kit中的app-drawer进行切换

2 个答案: