如何 close/open 聚合物 <app-drawer> 通过 JavaScript

Question

我正在试验 Polymer 2 入门套件。我想通过 JavaScript open/close App Drawer。 i̶'m̶m̶h̶a̶a̶v̶i̶n̶g̶i̶d̶i̶f̶f̶i̶c̶u̶l̶t̶y̶t̶y̶t̶o̶t̶o̶g̶e̶e̶e̶a̶a̶a̶a̶a̶e̶e̶e̶e̶e̶e̶e̶e̶nn̶e̶e̶nn̶e̶n̶e̶e̶e̶e̶e̶e̶e̶e̶e̶e̶e̶e̶e̶e̶e̶e̶t

我的方案是使用自定义帐户图标代替汉堡包图标。该图标将反映登录状态。单击图标时，它应该在未登录时激活登录对话框。或者，如果已经登录，则打开抽屉以显示一些帐户选项。

理想情况下，自定义图标也会用在其他地方。但是没有任何点击侦听器，而是纯粹作为登录状态指示器。

我在 Material.io 项目中得到了这个设置，但我想尝试让它在 Polymer 中工作。

编辑

入门工具包和 <app-layout> 示例都使用菜单 drawer-toggle 属性 icon/button

根据 Polymer App Layout 中的第一个示例，我从 onclick 开始。这在我的设置中不起作用，应用程序本身就是一个元素如 Rob Dodson's post.

然后我遇到了 Polymer Events 并使用了 on-click。但无法弄清楚如何在我的回调中获取对抽屉的引用。 Polymer App Layout 例子直接引用了 drawer.toggle() 在 Firefox 中运行良好，但在 Chrome.

中却不行

在写完我的 Whosebug 问题后，我想出了与中相同的方法。使用菜单 icon/button 上的 on-tab="toggleDrawer" 集。然后在toggleDrawer方法中使用this.$.drawer.toggle();。

Answer 1

下次您应该提供一些示例代码，以便用户可以了解您已经取得的成果以及您缺少的成果。

但是，这是一个简单的 app-drawer 示例：

<app-header reveals>
   <app-toolbar>
     <paper-icon-button icon="menu" on-tab="toggleDrawer"></paper-icon-button>
     <div main-title>My app</div>
  </app-toolbar>
</app-header>
<app-drawer id="drawer" swipe-open></app-drawer>

on-tab 函数看起来像这样：

toggleDrawer() {
  this.$.drawer.toggle();
}

请注意，您必须调用 super() 才能使 Polymer 选择器正常工作。

如何 close/open 聚合物 <app-drawer> 通过 JavaScript

How to close/open Polymer <app-drawer> through JavaScript

polymer-starter-kit

polymer-2.x

编辑