Материал Угловая высота заголовка/заголовка

Поэтому я пытаюсь принять Аккордеон Материалов в разработке веб-приложений.

Однако некоторые проблемы приводят к тому, что заголовок расширяется по мере увеличения контента.

Ожидается, что у моего заголовка будет довольно много строк, чтобы дать резюме, а не только 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;
}

Если я делаю выше, высота устанавливается, но анимация для расширения и сглаживания становится странной.

Как мне это сделать?

Ответ 1

Вам не нужно использовать ::ng-deep. Вы можете использовать [collapsedHeight] и [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>

Ссылка на демонстрацию StackBlitz.

Ответ 2

На сегодняшний день в материале 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

Ответ 3

Это то, что работаю для меня, нет CSS просто добавив thowe в mat-extension-panel-header

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

Ответ 4

Добавление общих параметров/настроек для установки высоты для всех панелей в приложении:

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 MaterialModule {}