带有子菜单工具栏的Polymer的核心滚动标题面板 [英] Polymer's core-scroll-header-panel with submenu toolbar

问题描述

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

The application I am developing consists of several major sections. To this end, I have a global toolbar for the entire application and a toolbar that is specific to the particular section of the application.

以下是要点，它演示了单个应用程序的视图可能是什么样的:

Here is a gist that demonstrates what the view for an individual application might look like:

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

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

(Paste the gist into the polymer designer for a quick view)

我将主应用程序的工具栏作为core-scroll-header-panel.子菜单位于内容中.问题是子菜单在核心滚动标题面板下滚动，我可以很容易地看到它是设计使然的，但是我希望有人能给我一个提示，让我保留两个主要的核心滚动标题面板并且工具栏锁定在屏幕顶部.我已经尝试在本节中嵌套一个核心页眉面板，但是这样做也是一样的.

I have the main application's toolbar as a core-scroll-header-panel. The submenu is in the content. The problem is that the submenu is scrolling under the core-scroll-header panel, which I can easily see as by design, but I'm hoping somebody has a tip for allowing me to keep both the main core-scroll-header-panel and the toolbar locked at the top of the screen. I've tried nesting a core-header-panel in the section, but that did the same thing.

我的实际应用程序是Dart，但我对Java脚本的答案很满意.

My actual application is in Dart, but I'd be happy with a Javascript answer.

预先感谢

马特

推荐答案

您将子菜单核心工具栏嵌套在滚动区域(<section id="section2" content>)中.如果要保留它，请将其放在该滚动区域之前:

You have the submenu core-toolbar nested in the scroll region (the <section id="section2" content>). If you want it to stay, put it before that scroll region:

<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>
   ...

如果您希望两者都保持滚动状态:

If you want the both to stay put on scrolling:

<core-scroll-header-panel fixed>

如果您只想保留子菜单:

If you want just the submenu to stick:

<core-scroll-header-panel>

如果要压缩标题并使它们都粘在一起:

If you want the header to condense and have them both stick:

<core-scroll-header-panel condenses keepCondensedHeader>

这篇关于带有子菜单工具栏的Polymer的核心滚动标题面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！