如何使材料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.

推荐答案

如果您使用的是

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-角材料演示

StackBlitz - Angular Material Demo

更新1: React的实质性UI演示

Update 1 : React's Material UI Demo

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