La définition de la propriété opacity sur le contenu principal provoque le saignement du contenu à travers le app-drawer lorsque le tiroir est ouvert. (Je suppose que c'est un bogue, pas une fonctionnalité?) Quelle est la meilleure solution ou solution de contournement?

Voici le lien vers le problème déposé sur Github.

Résultat attendu

J'espère que le app-drawer couvrira de manière opaque tout le contenu principal. Même lorsque le contenu principal a la propriété opacity définie dans le CSS comme suit.

<style>
  #main {
    opacity: 0.8;
  }
</style>

Résultat réel

Le texte du contenu principal apparaît devant le tiroir lorsque le tiroir est ouvert. Voir la capture d'écran ci-dessous.

enter image description here

Démo en direct

Voici la démo de Plunker. (Si vous utilisez Safari, regardez plutôt la démo dans Chrome.)

Étapes à reproduire

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.rawgit.com/download/polymer-cdn/2.0.0/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="my-drawer.html">
</head>

<body>
  <my-drawer></my-drawer>
</body>

</html>


<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="app-layout/app-drawer/app-drawer.html">

<dom-module id="my-drawer">

  <template>
    <style>
      #main {
        opacity: 0.8;
      }
    </style>

    <app-header reveals>
      <app-toolbar>
        <paper-icon-button icon="menu" on-tap="_toggleDrawer"></paper-icon-button>
        <div main-title>Title</div>
        <paper-icon-button icon="search"></paper-icon-button>
      </app-toolbar>
    </app-header>

    <app-drawer id="drawer" opened={{drawerOpened}} tabindex="0">
      <div>I am inside drawer</div>
    </app-drawer>

    <div id="main">
      My "opacity" property makes me "bleed" through the drawer
    </div>

  </template>

  <script>
    class MyDrawer extends Polymer.Element {

      static get is() {
        return 'my-drawer';
      }

      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-drawer'
          }
        };
      }

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

    }

    customElements.define(MyDrawer.is, MyDrawer);
  </script>

</dom-module>

Navigateurs concernés

  • Chrome
  • Tous testés
0
Let Me Tink About It 17 août 2017 à 11:57

2 réponses

Meilleure réponse

Une autre solution consiste à utiliser app-tiroir-layout:

Enveloppez app-drawer et div avec app-drawer-layout. Ajoutez slot="drawer" dans app-drawer pour que l'élément wrapper sache qu'il s'agit de l'élément tiroir.

Plnkr modifié: https://plnkr.co/edit/akTqpcmGzODgZ0gNAWnj?p=preview

Changements dans le code:

<app-drawer-layout>
  <app-drawer slot="drawer" id="drawer" opened={{drawerOpened}} tabindex="0">
    <div>I am inside drawer</div>
  </app-drawer>
  <div id="main">
    My "opacity" property makes me "bleed" through the drawer
  </div>
</app-drawer-layout>
1
Let Me Tink About It 18 août 2017 à 06:45

Ma solution de contournement a été d'ajouter un attribut de style z-index: 1 à mon élément <app-drawer>.

1
Neilujd 17 août 2017 à 10:11