将 app-drawer-layout 与 app-header-layout 一起使用

Question

我正在 Polymer 1.0 中创建一个新的 webapp，它需要以下布局。

• 在加载时覆盖整个页面并压缩到小工具栏高度的标题面板
• 一个响应式抽屉面板，在移动设备的情况下可滑动并在大屏幕上持续显示。

聚合物已经为此目的拥有自己的网络组件，即， app-header-panel 和 app-drawer-panel

我想直接的解决方案是将整个抽屉面板包含在标题面板中。在我将它们放在一个页面中之前，它们工作得很好。一起使用时我遇到了一些布局问题。

持久抽屉在app-header-panel 后面移动，而不是粘在标题面板的内容区域。 （注意：app-header-layout 的 z-index 高于 app-drawer-panel）。

如何解决这个问题？

Answer 1

首先：清除所有试图更改应用布局组件的 z-index 或位置或其他类似内容的 css，否则会弄乱组件。

这是我的示例：

<app-drawer-layout fullbleed
                   force-narrow>
    <!-- Drawer content -->
    <app-drawer id="appDrawer"
                swipe-open>
        <app-toolbar>Menu</app-toolbar>

        <!-- Some content -->
    </app-drawer>

    <!-- Main content -->
    <app-header-layout has-scrolling-region>

        <app-header fixed
                    effects="waterfall">
            <app-toolbar>
                <paper-icon-button icon="menu"
                                   drawer-toggle></paper-icon-button>
                <div title>My App</div>
            </app-toolbar>
        </app-header>

        <!-- Some content -->

    </app-header-layout>
</app-drawer-layout>

不要忘记导入所有依赖项：

<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">