材质Angular手风琴标题/标题高度 [英] 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手风琴标题/标题高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！