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

Nit*_*mar 5 accordion material-ui

问题:

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

Abh*_*mar 6

如果您使用的是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;
}
Run Code Online (Sandbox Code Playgroud)

StackBlitz - Angular Material 演示

更新 1: React 的 Material UI 演示


小智 1

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

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

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