自定义核心抽屉面板切换属性不打开隐藏的抽屉

Question

我想寻求有关 core-drawer-panel toggleAttribute 的帮助。我正在使用 Polymer 构建 Web 应用程序，我需要使用至少两个 core-drawer-panel 元素。这意味着我需要修改抽屉的切换触发器，但如果我按照以下代码片段中所示执行此修改，则它不起作用：

<core-drawer-panel toggleAttribute="custom-drawer-toggle">
    <core-header-panel drawer>
        <core-toolbar>
            <div>Application</div>
        </core-toolbar>
        <div> Drawer content... </div>
    </core-header-panel>
    <core-header-panel main>
        <core-toolbar>
            <core-icon-button icon="menu" custom-drawer-toggle></core-icon-button>
            <div>Title</div>
        </core-toolbar>
        <div> Main content... </div>
    </core-header-panel>
</core-drawer-panel>

谁能告诉我我做错了什么？

非常感谢！ B

Answer 1

据我所知，core-drawer-panel 没有 toggleAttribute，每个抽屉专门寻找具有 core-drawer-toggle 属性的子项并为其添加听众。

如果您运行遇到问题，您可以像这样手动设置您的监听器：

<core-drawer-panel id="drawer1" responsiveWidth="700px">
  <core-header-panel drawer>
    <core-toolbar>
      Menu
    </core-toolbar>
  </core-header-panel>
  <core-header-panel main>
    <core-toolbar>
      <paper-icon-button on-tap="{{toggleDrawer}}" icon="menu">
      </paper-icon-button>
      <div>Main</div>
    </core-toolbar>
  </core-header-panel>
  <core-toolbar main>
    Footer
  </core-toolbar>
</core-drawer-panel>

// in your element definition

Polymer({
  toggleDrawer: function() {
    this.$.drawer1.togglePanel();
  }
})

如果您想要 "togglePrimaryDrawer" 和 "toggleSecondaryDrawer"，这将允许您创建单独的方法。

自定义核心抽屉面板切换属性不打开隐藏的抽屉

Custom core-drawer-panel toggle attribute not opening hidden drawer

android

jquery

attributes

toggle

polymer