Question

有没有办法用角形材料制作可折叠的卡片？看起来像是相当受欢迎的东西，但我一直在这里寻找合适的角度材料组件/设置：Angular Material - Card并且一无所获。

谢谢！

Answer 1

如同提到的那样，只需使用扩展面板即可。 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

Answer 2

如果有人需要使用角材7的最新“解决方案” 您可以将mat-expansion-panel放在mat-card-content内并添加类mat-elevation-z0：

<mat-card-content>
   <mat-expansion-panel class="mat-elevation-z0"> 
   ...
   </mat-expansion-panel>
</mat-card-content>

Answer 3

就像塔尔·阿布兹（Tal Abziz）所建议的那样，获得更精美的棱角材料可折叠卡的最佳方法是将mat-expansion-panel嵌入mat-card中，并对mat-expansion-panel-header进行样式设置顶部和右侧css属性的绝对位置为0px。你去那里。

<mat-card style="margin-top:1em; margin-bottom:1em">
    <mat-card-header>
    <mat-card-title> Yemi Orokotan </mat-card-title>
    <mat-card-subtitle>Lagos, Nigeria</mat-card-subtitle>
    </mat-card-header>

<mat-card-content>

  <mat-expansion-panel class="mat-elevation-z0">
    <mat-expansion-panel-header style="position: absolute; right: 0px; top: 0px;"></mat-expansion-panel-header>

      <mat-form-field>
      <input matInput placeholder="Occupation">
      </mat-form-field>

      <mat-form-field>
      <input matInput placeholder="DOB">
      </mat-form-field>
  </mat-expansion-panel>

  </mat-card-content></mat-card>

Angular Material可折叠卡

3 个答案: