因為會忘,所以要寫下來

修改 Material Expansion Panel (手風琴) 標題高度

1 minutes to read

因為 Material Expansion Panel 展開後的高度是使用動畫高度產生 所以 css 設定過後 仍會被蓋過 除非是下 !important

但在展開的過程中 會有先變高再縮回去的不順效果

在 Material 提供了我們兩個方式去設定 collapsedHeight - 面板折疊時標題的高度。 expandedHeight - 面板展開時標題的高度。

<mat-expansion-panel>
  <mat-expansion-panel-header collapsedHeight="48px" expandedHeight="48px">
    <mat-panel-title>Title</mat-panel-title>
    <mat-panel-description></mat-panel-description>
  </mat-expansion-panel-header>
  Body
</mat-expansion-panel>

對這篇文章有什麼想法嗎?

Copyright © 2024 Mandy. All rights reserved. Build with Astro