角度材料可折叠卡

发布时间：2020-12-17 06:49:41 所属栏目：安全来源：网络整理

导读：有没有办法用角形材料制作可折叠的卡片？看起来像是相当受欢迎的东西,但我一直在这里寻找合适的角度材料组件/设置： Angular Material – Card并没有发现任何东西. 谢谢！解决方法像Will提到的那样,只需使用扩展面板. https://material.angular.io/compone

有没有办法用角形材料制作可折叠的卡片？看起来像是相当受欢迎的东西,但我一直在这里寻找合适的角度材料组件/设置： 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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!