material Angular手风琴headertitle高度

发布于04月10日

所以我一直在try 在我的Web应用程序开发中采用material 手风琴.

但是，随着内容的增长，标题的大小也会随之扩大，这会带来一些麻烦.

我的标题应该有相当多的行来给出总结，而不仅仅是1行.

如果我硬编码material 标题高度，会导致动画乱七八糟.

下面是一个示例代码

<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.你可以在mat-expansion-panel-header上使用[collapsedHeight]和[expandedHeight].

<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>

链接到StackBlitz Demo.