所以我一直在尝试在我的 Web 应用程序开发中采用 Materials Accordion。
然而，随着内容的增长，使标题的大小扩大会遇到一些麻烦。
我的标题预计有相当多的行来提供摘要，而不仅仅是 1 行。
如果我对材质标题高度进行硬编码，则会导致动画陷入混乱。
下面是示例代码
<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">
<mat-expansion-panel #panel1 [hideToggle]="hideToggle">
<mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
<p>This is the content text that makes sense here.</p>
</mat-expansion-panel>
</mat-accordion>
::ng-deep .mat-expansion-panel-header
{
height: 190px !important;
}
如果我执行上述操作，高度就会被设置，但是展开和折叠的动画会变得很奇怪。
我该怎么办？
你不必使用::ng-deep。您可以使用[collapsedHeight] and [expandedHeight]在你的mat-expansion-panel-header.
<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">
<mat-expansion-panel #panel1 [hideToggle]="hideToggle">
<mat-expansion-panel-header [collapsedHeight]="'190px'" [expandedHeight]="'190px'">
Section 1
</mat-expansion-panel-header>
<p>This is the content text that makes sense here.</p>
</mat-expansion-panel>
</mat-accordion>
Link to StackBlitz 演示 https://stackblitz.com/edit/angular-ky9h9f?file=app/expansion-overview-example.html.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
