web-dev-qa-db-fra.com

Angular Matériel carte pliable

Y at-il un moyen de faire une carte pliante en utilisant un matériau angulaire? Cela semble être assez populaire, mais je cherchais ici le composant/paramètre de matériau angulaire approprié: Angular Material - Card et je n'ai rien trouvé.

Merci!

angularangular-materialangular-material2
4
cobolstinks

Comme Will l'a mentionné, utilisez simplement les panneaux d'extension. https://material.angular.io/components/expansion/overview

Sinon, créez simplement une carte de matériau Angular normale et implémentez votre propre mécanisme d’effondrement avec la qualité [cachée] ou un code CSS (affichage: aucun). Vous pouvez exploiter les événements * ngIf et button pour créer votre propre carte compressible. Ne devrait pas nécessiter beaucoup de code.

Quelque chose comme ça:

<mat-card>
  <mat-card-header>
     <mat-card-title style="font-size: 20px;">My collapsible card title</mat-card-title>
  </mat-card-header>

  <mat-card-content *ngIf="!collapsed">
    <p>This is some example text.</p>
     <p>This text will disappear when you use the action button in the actions bar below.</p>
  </mat-card-content>
  <mat-card-actions>
     <button mat-button (click)="collapsed=true">Collapse text</button>
     <button mat-button (click)="collapsed=false">Uncollapse text</button>
  </mat-card-actions>
</mat-card>

Stackblitz: https://stackblitz.com/edit/angular-95ygrr

8
mahval

si quelqu'un a besoin d'une "solution" à jour avec du matériel angulaire 7Vous pouvez mettre mat-expansion-panel à l'intérieur de mat-card-content et ajouter la classe mat-elevation-z0:

<mat-card-content>
   <mat-expansion-panel class="mat-elevation-z0"> 
   ...
   </mat-expansion-panel>
</mat-card-content>
0
Tal Abziz