材质 Angular Accordion 标题/标题高度 [英] Material Angular Accordion header/title height

问题描述

所以我一直在尝试在我的 Web 应用程序开发中采用 Materials Accordion.

So I've been trying to adopt Materials Accordion in my Web Application development.

但是，随着内容的增长，让标题扩大大小会遇到一些麻烦.

However having some troubles getting the header to expand in size as the content grows.

我的标题应该有很多行来提供摘要，而不仅仅是 1 行.

My header is expected to have quite a few number of lines to give a summary and not just a 1 liner.

如果我对材质标题高度进行硬编码，则会导致动画混乱.

If I hard-code the material header height it causes the animation to go hay-wire.

以下是示例代码

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

如果我执行上述操作，高度就会设置，但是展开和折叠的动画会变得很奇怪.

If I do the above the height gets set, but the animation for expand and collapse goes weird.

我该怎么办?

推荐答案

你不必使用 ::ng-deep.您可以在 mat-expansion-panel-header 上使用 [collapsedHeight] 和 [expandedHeight].

You dont have to use ::ng-deep. You can use [collapsedHeight] and [expandedHeight] on your 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>

链接到 StackBlitz 演示.

这篇关于材质 Angular Accordion 标题/标题高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！