web-dev-qa-db-fra.com

Angular - Supprimez la bordure du panneau d’extension et l’ombre de la boîte

Est-il possible de supprimer la bordure, je pense que c'est le box-shadow d'un mat-expansion-panel de Angular Matériau? Je veux que ce soit tout blanc, de sorte que vous ne verrez que le texte et la flèche d'expansion

<mat-accordion>
 <mat-expansion-panel class="" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>

 Mat-Panel

angularangular-material
2
Sergi

ajoutez mat-elevation-z0 classe. Fonctionne comme un charme, j'avais besoin de l'utiliser récemment.

<mat-accordion>
 <mat-expansion-panel class="mat-elevation-z0" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>
10
Tomasz Błachut

Vous pouvez aussi basculer la classe mat-expansion-panel en faisant

<mat-accordion>
  <mat-expansion-panel [class.mat-expansion-panel]="false">
     ...
  </mat-expansion-panel>
</mat-accordion>
1
Maxime Lechevallier
.mat-expansion-panel:not([class*='mat-elevation-z']) {
  box-shadow: 0px 0px 0px -2px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); 
}

Cela fera l'affaire.

0
Jay