web-dev-qa-db-fra.com

Material Angular Hauteur de l'en-tête / titre de l'accordéon

J'ai donc essayé d'adopter Materials Accordion dans le développement de mes applications Web.

Toutefois, il est difficile d’obtenir une taille plus grande pour l’en-tête à mesure que le contenu croît.

On s'attend à ce que mon en-tête contienne un certain nombre de lignes pour donner un résumé et pas seulement une ligne.

Si je code en dur la hauteur de l'en-tête du matériau, l'animation se détraquera.

Ci-dessous un exemple de code

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

Si je fais ce qui précède, la hauteur est définie, mais l'animation pour développer et réduire va bizarrement.

Comment dois-je m'y prendre?

angularangular-materialangular-material2
19
Alex Sim

Vous n'êtes pas obligé d'utiliser ::ng-deep. Vous pouvez utiliser [collapsedHeight] et [expandedHeight] Sur ton 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>

Lien vers démonstration de StackBlitz .

46
Faisal

À compter d’aujourd’hui avec l’article 7.0.2, si vous souhaitez que l’en-tête suive des règles génériques height:auto règle, cette hauteur de réparation peut ne pas être votre solution. (par exemple pour suivre la taille du texte dans l'en-tête dans les situations sensibles)

enter image description here

dans ces situations, il est bien mieux d'avoir une hauteur automatique définie dans css:

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

et définir

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

comme expliqué dans https://github.com/angular/material2/pull/931

14
ForestG

C'est ce qui a fonctionné pour moi, pas de CSS simplement en ajoutant un téléphone à mat-expansion-panel-header

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

Ajout d’options/paramètres généraux pour définir la hauteur de tous les panneaux de l’application:

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