Question

我尝试使用聚合物应用程序布局，但是菜单在我的按钮和传单地图后面滑动。如果我向下滚动，它的内容仍然在标题的顶部。我试图用z-index修复它，但没有成功。我在这个项目中使用打字稿和Polymer 3。

nav-bar.ts

import { PolymerElement, html } from "@polymer/polymer";
import "@polymer/iron-icons/iron-icons.js";
import "@polymer/app-layout/app-drawer-layout/app-drawer-layout.js";
import "@polymer/app-layout/app-drawer/app-drawer.js";
import "@polymer/app-layout/app-scroll-effects/app-scroll-effects.js";
import "@polymer/app-layout/app-header/app-header.js";
import "@polymer/app-layout/app-header-layout/app-header-layout.js";
import "@polymer/app-layout/app-toolbar/app-toolbar.js";
import "@vaadin/vaadin-button/vaadin-button.js";
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-checkbox/paper-checkbox.js';
import './my-app.js'

class NavBar extends PolymerElement {
static get template() {
return html`
<style>
    app-header {
      color: #fff;
      background-color: #C62828;
      --app-header-background-front-layer: {
        background-position: 50% 10%;
      };
    }
    [main-title] {
      font-size: 2em;
    }
    </style>
    <app-drawer-layout>
      <app-drawer swipe-open slot="drawer">
        <section>
          <h2>app-header </h2>     
          <h2>app-header </h2>
        </section>
      </app-drawer>
      <app-header-layout>
        <app-header fixed="true"  shadow="true" condenses="true"
      slot="header">
          <app-toolbar>
            <paper-icon-button  drawer-toggle>,
            <iron-icon icon="search"></iron-icon></paper-icon-button>
            <div condensed-title>Test</div>
          </app-toolbar>
          <app-toolbar></app-toolbar>
          <app-toolbar>
            <div main-title spacer>Test</div>
          </app-toolbar>
        </app-header>
      </app-header-layout>
    </app-drawer-layout>
    <my-app appTitle="my app"></my-app>
    `;
}}
customElements.define("nav-bar", NavBar);

即使我从webcomponents.org app-layout复制了他们的演示之一，也是同样的问题。我也尝试在index.html中使用它，但结果相同：

<nav-bar></nav-bar> 
<my-app></my-app>

外观如下：
scrolling按钮“测试”来自my-app，而不位于标题中
with the menu open另一个example with leaflet map and buttons
有什么办法可以改变这种行为，并且始终将标题和菜单作为第一层？

Answer 1

我认为，如果您将工具栏和抽屉分开，它将按您的意愿工作。

这是一个有效的示例：DEMO

import { PolymerElement } from "@polymer/polymer";
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import "@polymer/iron-icon/iron-icon.js";
import '@polymer/iron-icons/iron-icons.js';

import "@polymer/app-layout/app-drawer-layout/app-drawer-layout.js";
import "@polymer/app-layout/app-drawer/app-drawer.js";
import "@polymer/app-layout/app-scroll-effects/app-scroll-effects.js";
import "@polymer/app-layout/app-header/app-header.js";
import "@polymer/app-layout/app-header-layout/app-header-layout.js";
import "@polymer/app-layout/app-toolbar/app-toolbar.js";
import "@vaadin/vaadin-button/vaadin-button.js";
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-checkbox/paper-checkbox.js';
import './my-app.js';
class NavBar extends PolymerElement {
static get properties() { return {
  drawerOpened:{type:Boolean}
}}
static get template() {
return html`
<style>
    host:{
      display:block;
      background-color:red;
    }
    app-header {
      color: '#fff';
      background-color: grey;

    }
    [main-title] {
      font-size: 2em;
    }
    app-toolbar.tb1 { background-color: yellow;}
    app-toolbar.tb2 { background-color: green;}
    app-toolbar.tb3 { background-color: brown;}
    paper-icon-button { color: white }
    app-drawer > * { padding: 20px;}
    </style>

        <app-header fixed="true"  shadow="true" condenses="true"
      slot="header">
          <app-toolbar spacer class='tb1'>
            <paper-icon-button  icon='menu' on-tap='drawerToggle'></paper-icon-button>
            <div condensed-title> Tool Bar-1</div>
          </app-toolbar>
          <app-toolbar class='tb2'></app-toolbar>
          <app-toolbar class='tb3'>
            <div main-title spacer>Main Title</div>
          </app-toolbar>
        </app-header>
      <app-drawer-layout>
      <app-drawer opened="{{drawerOpened}}" swipe-open slot="drawer">

          <h1> Side Menu</h1>
          <h2> App-header </h2>     
          <h2> App-header </h2>

      </app-drawer>
      </app-drawer-layout>
    <my-app appTitle="my app"></my-app>
    `;}


    drawerToggle(){
       this.drawerOpened = !this.drawerOpened;
    }

}
customElements.define("nav-bar", NavBar);

聚合物应用布局在组件后面滑动

1 个答案: