Issue
Is there a way to make a collapsible card using angular material? Seems like something that would be fairly popular, but I've been searching for the appropriate angular material component/setting here:Angular Material - Card and found nothing.
Thanks!
Solution
Like Will mentioned, just use the expansion panels. https://material.angular.io/components/expansion/overview
Otherwise just create a normal Angular Material card and implement your own collapse mechanic with the [hidden]
quality or some CSS (display: none
). You can exploit *ngIf
and button events to create your own collapsible card. Should not require much code.
Something like this:
<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
For multiple cards, each card would require their own "collapsed" quality, see Stackblitz: https://stackblitz.com/edit/angular-stsky7
Answered By - mahval
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.