扩展时如何设置Angular材质的mat-expansion-panel标题的高度？

Question

我想设置能够扩展的mat-expansion-panel-header的高度[例如32px]。但是，在扩展面板时，高度将变为材质的默认高度[我猜是64px]，然后将其设置为我的自定义高度[32px]。这导致了闪烁效果。您可以在https://angular-v138d6.stackblitz.io

查看行为

Pl建议在面板“处于展开状态”时是否有方法可以覆盖mat-expansion-panel-header高度

Answer 1

如果您阅读Angular Expansion Panel Header的文档，则有两个属性collapsedHeight和expandedHeight。您可以使用它们来设置高度。

<mat-expansion-panel-header collapsedHeight="56px" expandedHeight="56px">
  <mat-panel-title>Personal data</mat-panel-title>
</mat-expansion-panel-header>

Answer 2

使用

.mat-expansion-panel-header.mat-expanded {
height: 4rem
}

如果需要，您也可以使用

/ngdeep/.mat-expansion-panel-header.mat-expanded {
height: 4rem
}