角材料可折叠卡 [英] Angular Material Collapsible Card
问题描述
有没有一种方法可以使用角形材料制作可折叠的卡片?似乎有些东西会很流行,但是我一直在这里寻找合适的角材料组件/设置:角材料-卡,一无所获.
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.
谢谢!
推荐答案
就像Will提到的那样,只需使用扩展面板即可. https://material.angular.io/components/expansion/overview
Like Will mentioned, just use the expansion panels. https://material.angular.io/components/expansion/overview
否则,只需创建一个普通的Angular Material卡并以[隐藏]质量或某种CSS(显示:无)实现您自己的折叠机制.您可以利用* ngIf和button事件来创建自己的可折叠卡.应该不需要太多代码.
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.
类似这样的东西:
<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
Stackblitz: https://stackblitz.com/edit/angular-95ygrr
这篇关于角材料可折叠卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!