Question

我正在尝试使用Polymer 2入门套件。我想通过JavaScript打开/关闭App Drawer。 I̶'̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶

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

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

我在Material.io项目中使用了此设置，但我想尝试在Polymer中使用它。

修改

入门套件和<app-layout>示例均使用菜单图标/按钮上的drawer-toggle属性

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

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

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

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选择器正常工作。

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

修改

1 个答案: