如何将 core-scroll-header-panel 与 core-drawer-panel 一起使用

Posted 2023-02-24

【中文标题】如何将 core-scroll-header-panel 与 core-drawer-panel 一起使用

【英文标题】：How to use core-scroll-header-panel with core-drawer-panel

【发布时间】：2014-11-12 11:52:17

【问题描述】：

我想创建一个类似于谷歌收件箱的布局。具体来说：

可以滚动的横幅（感谢 core-scroll-header-panel） 一长串作为主要内容（感谢 core-list） 左上方的菜单按钮显示核心导航面板（而不是弹出窗口）

表面上看起来应该可以大致实现如下

<core-drawer-panel forceNarrow>

  <core-header-panel drawer>
    <core-toolbar></core-toolbar>
    <core-menu>...</core-menu>
  </core-header-panel>

  <core-scroll-header-panel main>
    <core-toolbar></core-toolbar>
    <core-list>....</core-list>
  </core-scroll-header-panel>

</core-drawer-panel>

但是，我的尝试失败了 (http://jsbin.com/womovo)，因为抽屉面板的菜单丢失了。

目前这种布局是否可行，使用上述组件或其他组件（不确定 core-scaffold 是否有帮助）？

【参考方案1】：

菜单在那里，您可以单击页面边缘将其拉出。或运行

document.querySelector('core-drawer-panel').togglePanel();

在控制台中显示它。

编辑：我觉得http://jsbin.com/soqopuyiqi 就是你要找的东西。

【讨论】：

Fwiw，从 0.5 开始，您可以将 core-drawer-toggle 属性添加到任何可点击元素，它会自动切换抽屉（因此您不必手动挂钩事件）。 jsbin.com/rucife/2/edit?html,output

很好的提示。聚合物越来越好。

太棒了。谢谢大家