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

时间:2018-07-12 18:34:59

标签: accordion material-ui

问题:

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

2 个答案:

答案 0 :(得分:0)

如果您不介意面板在扩展后向上移动页眉,则可以将整个扩展面板/手风琴停靠在底部并使用绝对定位。

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

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

答案 1 :(得分:0)

如果您使用的是 Angular Material Component's Expansion Panel
那么您可以使用以下css来使expansion-panel内容出现在{ mat-expansion-panel-header文件中的{1}}。

styles.css

StackBlitz - Angular Material Demo

更新1: React's Material UI Demo