Polymer core-header-panel 和 core-drawer-toggle 菜单项消失

Question

在我的应用程序中，我在单击 menu-item 后使用 core-drawer-toggle 进行切换。示例：

<core-scaffold id="core_scaffold">
  <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar"></core-toolbar>
    <core-menu selected="Item1" valueattr="label" selectedindex="0" id="core_menu" theme="core-light-theme">
      <core-item id="core_item" core-drawer-toggle horizontal center layout icon="settings" label="Item1" active></core-item>
      <core-item id="core_item1" core-drawer-toggle horizontal center layout icon="settings" label="Item2"></core-item>
    </core-menu>
  </core-header-panel>
  <div id="div" tool>Title</div>
</core-scaffold>

这适用于 chrome 的宽版和窄版。

对于 firefox 和 safari，它在狭窄的布局中也能正常工作。但是，当我使用 safari 和 firefox 将 window 调整为宽时，menue-items 消失了。我可以使用 core-drawer-toggle 并在宽布局中显示菜单项吗？

Answer 1

我想办法了。核心脚手架有一个方法"togglePanel"（见例子）

<core-scaffold id="core_scaffold">
  <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar"></core-toolbar>
    <core-menu selected="Item1" valueattr="label" selectedindex="0" id="core_menu" theme="core-light-theme">
      <core-item label="Item1" icon="settings" size="24" id="core_item" on-tap="{{ doSomething }}" horizontal center layout active></core-item>
      <core-item label="Item2" icon="settings" size="24" id="core_item1" horizontal center layout></core-item>
    </core-menu>
  </core-header-panel>
  <div id="div" tool>Title</div>
</core-scaffold>

Polymer('my-element', {
  doSomething: function (){
    this.$.core_scaffold.togglePanel();
  }
});

Polymer core-header-panel 和 core-drawer-toggle 菜单项消失

Polymer core-header-panel and core-drawer-toggle menu items disappear

polymer