web-dev-qa-db-fra.com

Modifier le style de flèche pour la flèche du panneau d'extension par défaut

J'ai un angular comme indiqué ci-dessous.

enter image description here

Mais je veux changer le design de la flèche en quelque chose comme ceci:

Non développé:

enter image description here

Étendu:

enter image description here

Comment? ou est-il possible pour moi de le faire dans angular? Code ci-dessous:

HTML:

<md-expansion-panel>
  <md-expansion-panel-header>
    <md-panel-title>
      Personal data
    </md-panel-title>
    <md-panel-description>
      Type your name and age
    </md-panel-description>
  </md-expansion-panel-header>

  <md-form-field>
    <input mdInput placeholder="First name">
  </md-form-field>

  <md-form-field>
    <input mdInput placeholder="Age">
  </md-form-field>
</md-expansion-panel>

TS:

import {Component} from '@angular/core';

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}
cssangularangular-materialangular-material2
10
CloudSeph

Oui c'est possible. Donnez à votre panneau d'extension un identifiant de référence, par exemple example et définissez la propriété hideToggle sur true.

Dans le <md-panel-description>, vous pouvez placer vos icônes et utiliser la propriété expanded du panneau pour afficher ou masquer les icônes pertinentes.

  <md-expansion-panel  class="custom-header" hideToggle="true" #example>
    <md-expansion-panel-header>
      <md-panel-title>
        Personal data
      </md-panel-title>
      <md-panel-description>
        Type your name and age
        <md-icon *ngIf="!example.expanded">play_arrow</md-icon>
        <md-icon *ngIf="example.expanded">arrow_drop_down</md-icon>
      </md-panel-description>
    </md-expansion-panel-header>

    <md-form-field>
      <input mdInput placeholder="First name">
    </md-form-field>

    <md-form-field>
      <input mdInput placeholder="Age">
    </md-form-field>
  </md-expansion-panel>

Pour fournir un espace entre l'icône et la description du panneau, ajoutez les classes suivantes dans votre component.css:

.custom-header .mat-expansion-panel-header-title, 
.custom-header .mat-expansion-panel-header-description {
  flex-basis: 0;
}

.custom-header .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

J'ai utilisé des icônes matérielles. Vous pouvez placer vos icônes personnalisées si vous le souhaitez. Voici un lien vers démo stackblitz .

18
Faisal

étendu la réponse de @Faisal et selon la dernière version de angular, nous utiliserons le préfixe mat au lieu de md pour les composants Material.

Matériau angulaire 8.1.4

<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>
<mat-expansion-panel-header>
  <mat-panel-title class="font-weight-bold font-small">
    Info
  </mat-panel-title>
  <mat-panel-description>
    <mat-icon *ngIf="!xyz.expanded">play_arrow</mat-icon>
    <mat-icon *ngIf="xyz.expanded">arrow_drop_down</mat-icon>
  </mat-panel-description>
</mat-expansion-panel-header>
<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>

Démo Stackblitz

2
Zuber