wake-up-neo.com

Angular Zusammenklappbare Materialkarte

Gibt es eine Möglichkeit, eine ausklappbare Karte aus eckigem Material herzustellen? Es scheint etwas zu sein, das ziemlich beliebt ist, aber ich habe hier nach der entsprechenden Winkelmaterialkomponente einstellung gesucht:/- Angular Material - Card und nichts gefunden.

Vielen Dank!

angularangular-materialangular-material2
4
cobolstinks

Wie schon erwähnt, verwenden Sie einfach die Erweiterungspaneele. https://material.angular.io/components/expansion/overview

Ansonsten erstellen Sie einfach eine normale Angular Material-Karte und implementieren Ihre eigene Kollapsmechanik mit der [ausgeblendeten] Qualität oder etwas CSS (Anzeige: keine). Sie können * ngIf- und button -Ereignisse nutzen, um Ihre eigene reduzierbare Karte zu erstellen. Sollte nicht viel Code erfordern.

Etwas wie das:

<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

Genau wie Tal Abziz vorgeschlagen hat, ist der beste Weg, um eine ausgefallenere angular zusammenklappbare Materialkarte zu erzielen, das Einbetten eines mat-expansion-panel In einen mat-card Und das Stylen des mat-expansion-panel-header A wenig zu haben absolute Position mit Top und Right CSS-Eigenschaften zu 0px. Es geht los.

<mat-card style="margin-top:1em; margin-bottom:1em">
    <mat-card-header>
    <mat-card-title> Yemi Orokotan </mat-card-title>
    <mat-card-subtitle>Lagos, Nigeria</mat-card-subtitle>
    </mat-card-header>

<mat-card-content>

  <mat-expansion-panel class="mat-elevation-z0">
    <mat-expansion-panel-header style="position: absolute; right: 0px; top: 0px;"></mat-expansion-panel-header>

      <mat-form-field>
      <input matInput placeholder="Occupation">
      </mat-form-field>

      <mat-form-field>
      <input matInput placeholder="DOB">
      </mat-form-field>
  </mat-expansion-panel>

  </mat-card-content></mat-card>
1
Yemi Gatyee

wenn jemand eine aktuelle "Lösung" mit eckigem Material 7 benötigt Sie können mat-expansion-panel in mat-card-content einfügen und die Klasse mat-elevation-z0 hinzufügen:

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