有没有办法使用棱 Angular Material 制作可折叠卡片?似乎是相当受欢迎的东西,但我一直在这里寻找合适的 Angular Material 组件/设置:Angular Material - Card却一无所获。
谢谢!
最佳答案
就像 Will 提到的,只需使用扩展面板。 https://material.angular.io/components/expansion/overview
否则只需创建一个普通的 Angular Material 卡片并使用 [hidden]
质量或一些 CSS (display: none
) 实现您自己的折叠机制。您可以利用 *ngIf
和按钮事件来创建您自己的可折叠卡片。应该不需要太多代码。
像这样:
<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>
堆栈 Blitz :https://stackblitz.com/edit/angular-95ygrr
对于多张卡片,每张卡片都需要自己的“折叠”质量,请参阅 Stackblitz:https://stackblitz.com/edit/angular-stsky7
关于棱 Angular Material 折叠卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46414575/