Полимерная апп-макет, скользящая позади компонентов - PullRequest
Новая
       8

Полимерная апп-макет, скользящая позади компонентов

0 голосов
/ 14 января 2019

Я пытаюсь использовать полимерный макет приложения, но меню скрывается за моими кнопками и картой листовки. Если я прокручиваю вниз, содержимое все еще находится в верхней части заголовка. Я пытался исправить это с помощью z-index, но безуспешно. Я использую Typscript и 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>

Вот как это выглядит:
прокрутка кнопка «Тест» из моего приложения, а не в шапке
с открытым меню другой пример с картой листовки и кнопками
Можно ли как-то изменить это поведение и всегда иметь заголовок и меню в качестве первого слоя?

1 Ответ

0 голосов
/ 19 января 2019

Я думаю, что если вы отделите панель инструментов от ящика, она будет работать так, как вы хотите.

Вот рабочий пример: 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);
...