web-dev-qa-db-fra.com

Angular 2 Matériel: Sidenav comment enlever la toile de fond

Je me sers donc de cli angulaire avec un design matériel. J'essaie de me débarrasser du fond avec un sidenav et je pensais que ce serait aussi simple que 

.mat-sidenav-backdrop.mat-sidenav-shown{
    background-color: transparent !important;
}

cependant, cela n'a aucun effet. J'ai essayé d'afficher aucun, de visibilité cachée, etc. Il semble que le style de la toile de fond soit inséré dans une balise et que j'aurais pensé que l'important l'emporterait. Cependant, cela ne fonctionne pas ... Quelqu'un a des idées qui n'impliquent pas que je retire la balise de toile de fond/modifie les styles via javascript lors du rendu?

cssangularangular-material2
6
Scott Bonner

::ng-deep fonctionne très bien dans ce cas, mais il risque d’être obsolète à l’avenir. Voir ici : 

Le combinateur de descendants perçant les ombres est déconseillé et le support est supprimé de Des principaux navigateurs et outils. En tant que tel, nous prévoyons de supprimer le support de In Angular (pour les 3 options de/deep /, >>> et :: ng-deep). Jusqu'au , Alors: ng-deep devrait être préféré pour une compatibilité plus large avec Les outils.

La méthode recommandée consiste à utiliser ViewEncapsulation . Dans votre composant, ajoutez l'encapsulation suivante:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

Ensuite, votre css fonctionnera et remplacera les styles par vos styles personnalisés.

.mat-sidenav-backdrop.mat-sidenav-shown{
    background-color: transparent !important;
}
7
Faisal

Ajoutez ::ng-deep pour remplacer le css de stylesheet pré-construit par défaut.

::ng-deep .mat-sidenav-backdrop.mat-sidenav-shown {
    background-color: transparent;
}

Démo Plunker

Vous pouvez également utiliser display: none pour supprimer complètement le fond du DOM. Dans ce cas, sidenav ne se fermera pas lorsque vous cliquerez dans la zone de fond.

::ng-deep .mat-sidenav-backdrop.mat-sidenav-shown {
    display: none;
}

Exemple Plunker

1
Nehal

@Input() hasBackdrop: any - Indique si le conteneur doit avoir une toile de fond pendant qu'un des sidenav est ouvert. Si explicitement défini sur true, le fond sera également activé pour les tiroirs en mode latéral.

(c) https://material.angular.io/components/sidenav/api

Donc, vous devriez simplement définir la propriété [hasBackdrop]="false" sur mat-sidenav-container

1
Kuncevič