Polymer 的带有子菜单工具栏的 core-scroll-header-panel

Posted 2023-02-24

【中文标题】Polymer 的带有子菜单工具栏的 core-scroll-header-panel

【英文标题】：Polymer's core-scroll-header-panel with submenu toolbar

【发布时间】：2014-09-24 20:51:51

【问题描述】：

我正在开发的应用程序由几个主要部分组成。为此，我有一个用于整个应用程序的全局工具栏和一个特定于应用程序特定部分的工具栏。

这里有一个要点，它演示了单个应用程序的视图可能是什么样的：

https://gist.github.com/mattjonesorg/33b2bbcb0b0c81feb5ca

（将要点粘贴到聚合物设计器中以便快速查看）

我将主应用程序的工具栏作为核心滚动标题面板。子菜单在内容中。问题是子菜单在 core-scroll-header 面板下滚动，我可以很容易地看到这是设计使然，但我希望有人有一个提示，可以让我同时保留主要的 core-scroll-header-panel并且工具栏锁定在屏幕顶部。我尝试在该部分中嵌套一个 core-header-panel，但这也是同样的事情。

我的实际应用程序是在 Dart 中，但我对 javascript 答案很满意。

提前致谢，

马特

【问题讨论】：

这里有一个直接指向设计器要点的链接：polymer-project.org/tools/designer/#33b2bbcb0b0c81feb5ca。向下滚动，您会看到子菜单滚动。我正试图弄清楚如何让它贴在主菜单下方。

【参考方案1】：

您的子菜单核心工具栏嵌套在滚动区域（<section id="section2" content>）中。如果您希望它保留，请将其放在该滚动区域之前：

<core-toolbar id="core_toolbar" class="tall">
   ...
   <div id="div1" class="bottom indent">Title</div>
</core-toolbar>
<core-toolbar id="core_toolbar1">
   <core-icon-button icon="menu" id="core_icon_button3"></core-icon-button>
   <div id="div2" flex>Submenu Toolbar</div>
</core-toolbar>
<section id="section2" content>
   <p id="p">Hello, World</p>
   ...

如果您希望两者都保持滚动：

<core-scroll-header-panel fixed>

如果您只想保留子菜单：

<core-scroll-header-panel>

如果您希望标题压缩并让它们都粘住：

<core-scroll-header-panel condenses keepCondensedHeader>