web-dev-qa-db-ja.com

マテリアルAngularアコーディオンヘッダー/タイトルの高さ

そのため、Webアプリケーション開発でマテリアルアコーディオンを採用しようとしています。

ただし、コンテンツが大きくなるとヘッダーのサイズが大きくなるという問題が発生します。

私のヘッダーには、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;
}

上記を行うと、高さが設定されますが、展開と折りたたみのアニメーションが奇妙になります。

これについてどうすればいいですか？

angularangular-materialangular-material2
19
Alex Sim

::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 Demo へのリンク。

46
Faisal

本日現在、Material 7.0.2では、ヘッダーをいくつかの一般的なheight:autoルールに従うようにしたい場合、この修正の高さはあなたのソリューションではないかもしれません。 （たとえば、レスポンシブな状況でヘッダーのテキストのサイズを追跡するため）

enter image description here

これらの状況では、cssで自動高さを定義する方がはるかに優れています。

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

そして定義する

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

https://github.com/angular/material2/pull/931 で説明されているように

14
ForestG

それは私のために働いたもので、CSSは単純にmat-expansion-panel-headerにthoweを追加しません

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

一般的なオプション/設定を追加して、アプリケーション全体のすべてのパネルの高さを設定します。

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 {}
1
Felix