如何使材料 UI 扩展面板在扩展时向上打开而不是向下扩展？

Question

问题：

• 在扩展时expansion-panel，它应该向上扩展以显示更多信息，而不是向下扩展，这会使用户再次向下滚动。

Answer 1

如果您使用的是Angular Material Component's Expansion Panel，
那么您可以使用以下内容css使expansion-panel内容出现在mat-expansion-panel-headerinstyles.css文件上方。

.mat-expansion-panel {
  display: flex !important;
  flex-direction: column;
}
.mat-expansion-panel-header {
  order: 2;
}

StackBlitz - Angular Material 演示

更新 1： React 的 Material UI 演示

Answer 2

如果您不介意面板在扩展后向上移动标题，您可以将整个扩展面板/折叠面板停靠到底部并使用绝对定位。

https://stackblitz.com/edit/angular-b11huf?embed=1&file=app/expansion-overview-example.css

但是请记住，面板标题、标题和描述顺序对于正确显示扩展面板非常重要，并且始终在底部显示标题会很痛苦。祝你好运。