如何使材料 UI 扩展面板在扩展时向上打开而不是向下扩展? [英] how to make the material UI expansion panels open upwards when expanded instead expanding downwards?

问题描述

问题:

• 在展开 expansion-panel 时，它应该向上展开以显示更多信息，而不是向下展开让用户再次向下滚动.

• Upon expanding expansion-panel, it should expand upwards to show more info rather than expanding down which makes user to scroll down again.

推荐答案

如果您使用的是 Angular Material 组件的扩展面板，
然后你可以使用下面的css来让expansion-panel的内容出现在上面styles.css 文件中的 mat-expansion-panel-header.

If you are using Angular Material Component's Expansion Panel,
then you can use the following css for making the expansion-panel content to be present above the mat-expansion-panel-header in styles.css file.

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

StackBlitz - Angular Material 演示

更新 1 : React 的 Material UI 演示

这篇关于如何使材料 UI 扩展面板在扩展时向上打开而不是向下扩展?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！