Material Angular 手风琴标题高度

Question

Material Angular 手风琴标题高度

angularangular-materialangular-material2

52

我一直在尝试在我的Web应用程序开发中采用材料手风琴。

然而，我遇到了一些问题，无法让标题随着内容增长而扩展。

我的标题预计将有相当多的行来概述，而不仅仅是一行。

如果我硬编码材质标题高度，会导致动画失控。

以下是示例代码

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

如果我按照上述方法设置高度，展开和折叠的动画会变得不正常。

我该怎么做？

- Alex Sim

1

@faisal 或 @alex-sim，你们能否添加一个多行标题的示例代码？如果我尝试在 mat-panel-title 或 mat-panel-description 元素中添加多行文本，则它们会重叠在一起，我无法弄清如何在 mat-expansion-panel-header 中添加实际出现在第一行下方的其他内容。 - somada141

6个回答

38

截至今天，使用Material 7.0.2，如果您想使页眉遵循一些通用的height:auto规则，那么这个固定高度可能不是您的解决方案。(例如，在响应式情况下跟随页眉文字大小)

在这些情况下，最好定义一个自动高度的CSS：

  mat-expansion-panel {
    mat-expansion-panel-header {
      height: auto!important; 
    }
  }

并定义

  <mat-expansion-panel-header collapsedHeight="*" expandedHeight="*">

如https://github.com/angular/material2/pull/9313所解释的那样

- ForestG

3

这应该是正确的答案 :) 它允许行数根据需要自由增长。 - John Mersal

太好了！只需记住，对于那些从7.0.0升级到7.0.2以进行此修复（或从任何其他版本升级），请确保更新相关的库。我不得不将@angular/cdk更新到7.0.2。否则，我会收到各种“未定义函数”的错误提示。 - harmonickey

4

这是创建动态mat-expansion-panel-header最优雅的方式，但从我的经验来看，collapsedHeight="*"和expandedHeight="*"并不是必要的。 - Satria

2

绝对是解决问题的首选方法。同时我可以确认，截至目前（Angular 11.0.5和Angular Material 11.0.3），collapsedHeight、expandedHeight和!important属性都不再必要。因此，最后一个.mat-expansion-panel-header { height: auto;}就足够了。我还会添加一些padding-bottom和padding-top来使它更加清晰。 - Alessandro Prete

19

这就是适合我的方法，没有 CSS，只需将它们添加到 mat-expansion-panel-header 中。

<mat-expansion-panel-header [collapsedHeight]="'auto'" [expandedHeight]="'auto'">

- Matis

3

这是正确的答案，不过需要通过CSS在顶部/底部添加12px的padding来保持头部的padding，以前这是通过固定高度实现的。 - Thomas Weber

8

为整个应用程序添加通用选项/设置，以设置所有面板的高度：

MatExpansionPanelDefaultOptions

import { NgModule } from '@angular/core';
import { MAT_EXPANSION_PANEL_DEFAULT_OPTIONS } from '@angular/material';

@NgModule({
    providers: [
        {
            provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
            useValue: {
                hideToggle: true,
                expandedHeight: '50px',
                collapsedHeight: '50px'
            }
        }
    ]
})
export class AppMaterialModule {}

- Felix

1

对于材料15，将以下内容添加到组件CSS中可以模拟默认填充，并使内容完全可见的高度：

.mat-expansion-panel-header {
  height: auto;
  padding: 12px 24px; /* replacing with 1em looks fine to me */
}

- James Skemp

0

为了在面板标题中拥有多行文本，我只需在标题上使用display: flex; flex-direction:column，就可以完美地实现了。

- Achraf ELKHANDOULI

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FAISAL · Accepted Answer

你不必使用 ::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演示。