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

本文介绍了如何使材料 UI 扩展面板在扩展时向上打开而不是向下扩展?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题:

在展开 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 扩展面板在扩展时向上打开而不是向下扩展?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！