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

Question

编辑：代码在这里https://github.com/PolymerElements/polymer-starter-kit（我只是按照自述文件的说明运行了polymer 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' 或任何其他我可以复制和粘贴的语法时，我只是得到错误。我显然是 Polymer 的新手，在玩了 6 个小时之后，我迷失了方向，可以使用一些指导。

Answer 1

事实证明，大屏幕的抽屉切换被禁用，所以在笔记本电脑上开发时，整个按钮都会消失。要取回它，您需要在 app-drawer-layout 标签中使用 force-narrow。还值得注意的是，文档没有列出您可以在标签中使用的属性，它只列出了属性......但是您可以通过从驼峰式转换为 using-dashes 将属性转换为属性。 forceNarrow 变为 force-narrow。 我在这里找到了这个：https://github.com/PolymerElements/app-layout/issues/218

Answer 2

您应该在 paper-icon-button 中声明 on-tap 事件来处理抽屉：

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

然后在您的 app-drawer 中，您应该反映属性 drawerOpened 以便它可以打开或关闭它：

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

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

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

希望对你有帮助