【问题标题】:Angular - Remove mat-expansion-panel border & box-shadowAngular - 删除垫扩展面板边框和框阴影
【发布时间】:2019-01-13 19:49:40
【问题描述】:

有什么办法可以去掉边框,我认为是 Angular Material 中的 mat-expansion-panelbox-shadow?我希望它是全白的,所以你只会看到文本和扩展箭头

<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>

【问题讨论】:

标签: angular angular-material


【解决方案1】:

添加mat-elevation-z0 类。就像一个魅力,我最近需要使用它。

<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>

【讨论】:

  • @Sergi 遗憾的是我不知道。尝试使用 DevTools 检查样式
  • 移除悬停样式.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: white; }
  • 使用有棱角的材料,这是做到这一点的完美方式。谢谢。
【解决方案2】:

您也可以通过以下方式切换类mat-expansion-panel

<mat-accordion>
  <mat-expansion-panel [class.mat-expansion-panel]="false">
     ...
  </mat-expansion-panel>
</mat-accordion>

【讨论】:

  • 此解决方案移除了阴影,但也禁用了动画。
【解决方案3】:
.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); 
}

这样就可以了。

【讨论】:

    【解决方案4】:

    我用 css 来做:

    .mat-expansion-panel:not([class*='mat-elevation-z']) {
        box-shadow: none;
    }
    

    【讨论】:

    • 简单而简短。再好不过了!
    【解决方案5】:

    是的,您可以移除 box-shadow 和边框: 只需放入 CSS 或 SCSS(实时工作)

    .mat-expansion-panel{
        box-shadow: none !important;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-11-30
      • 2022-01-01
      • 1970-01-01
      • 2019-01-12
      • 1970-01-01
      • 1970-01-01
      • 2021-04-18
      • 2013-10-31
      相关资源
      最近更新 更多