角材料可折叠卡 [英] Angular Material Collapsible Card

问题描述

有没有办法使用角形材料制作可折叠卡片?似乎是相当流行的东西，但我一直在这里寻找合适的角度材料组件/设置:Angular Material - Card 却一无所获.

谢谢！

解决方案

就像 Will 提到的那样，只需使用扩展面板.https://material.angular.io/components/expansion/overview

否则只需创建一个普通的 Angular Material 卡片并使用 [hidden] 质量或一些 CSS(显示:无)实现您自己的折叠机制.您可以利用 *ngIf 和按钮事件来创建自己的可折叠卡片.应该不需要太多代码.

像这样:

<mat-card-header><mat-card-title style="font-size: 20px;">我的可折叠卡片标题</mat-card-title></mat-card-header><mat-card-content *ngIf="!collapsed"><p>这是一些示例文本.</p><p>当您使用下方操作栏中的操作按钮时，此文本将消失.</p></mat-card-content><mat-card-actions><button mat-button (click)="collapsed=true">折叠文本</button><button mat-button (click)="collapsed=false">展开文本</button></mat-card-actions></mat-card>

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

---

对于多张卡片，每张卡片都需要自己的折叠"质量，请参阅 Stackblitz:https://stackblitz.com/edit/angular-stsky7

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!

解决方案

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

这篇关于角材料可折叠卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！