展开时如何将 mat-expansion-header 放在 mat-expansion-content 的底部

Question

展开时是否可以将 mat-expansion-header 放在 mat-expansion-content 的底部？

我在标题中只有一个箭头，所以我希望在展开时面板底部有箭头。

谢谢你

Answer 1

我也想实现同样的目标。我把面板折叠时显示的内容移到了面板上方。然后仅在面板折叠时显示它。像这样：

<p *ngIf="panelOpenState">I'm the panels content</p> 

<mat-expansion-panel (opened)="panelOpenState = true"
                     (closed)="panelOpenState = false">
  <mat-expansion-panel-header>
    <mat-panel-title>
      title
    </mat-panel-title>
  </mat-expansion-panel-header>
</mat-expansion-panel>

在 ts 中你需要有 panelOpenState 变量：

public panelOpenState = false;

但最终我用按钮替换了整个垫子扩展面板部分，因为我更喜欢它的外观..

Answer 2

您可以使用仅 CSS 的解决方案，至少在目前的最新版本 (v17.2.2) 上是这样：

mat-expansion-panel { 
    display: flex;
    flex-direction: column-reverse;
}

这是一个Stackblitz