如何通过 JavaScript 关闭/打开 Polymer <app-drawer>答案

【问题标题】：How to close/open Polymer <app-drawer> through JavaScript如何通过 JavaScript 关闭/打开 Polymer <app-drawer>
【发布时间】：2023-03-29 01:20:02
【问题描述】：

我正在试验 Polymer 2 入门套件。我想通过 JavaScript 打开/关闭 App Drawer。 I̶'̶m̶̶h̶a̶v̶i̶n̶g̶̶d̶i̶f̶f̶i̶c̶u̶l̶t̶y̶̶t̶o̶̶g̶e̶t̶̶a̶̶r̶e̶f̶e̶r̶e̶n̶c̶e̶̶t̶o̶̶t̶h̶e̶̶A̶p̶p̶̶D̶r̶a̶w̶e̶r̶。

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

理想情况下，自定义图标也将用于其他地方。但是没有任何点击监听器，只是作为登录状态指示器。

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

编辑

入门工具包和<app-layout> 示例都在菜单图标/按钮上使用drawer-toggle 属性

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

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

写完我的 Stackoverflow 问题后，我想出了与Niklas answer 相同的方法。使用on-tab="toggleDrawer" 设置在菜单图标/按钮上。然后在toggleDrawer方法中使用this.$.drawer.toggle();。

【问题讨论】：

标签： polymer-2.x polymer-starter-kit

【解决方案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>

标签上的功能看起来像这样：

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

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

【讨论】：