Angular 材质可折叠卡片答案

【问题标题】：Angular Material Collapsible CardAngular 材质可折叠卡片
【发布时间】：2017-09-25 21:38:30
【问题描述】：

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

谢谢！

【问题讨论】：

喜欢这个？ material.angular.io/components/expansion/overview
你能解释一下否决票吗？我不知道如何制作可折叠的卡片组件，正在寻找洞察力。

标签： angular angular-material angular-material2

【解决方案1】：

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

否则只需创建一个普通的 Angular Material 卡片并使用 [hidden] 质量或一些 CSS（显示：无）实现您自己的折叠机制。您可以利用 *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

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

【讨论】：

@mahvai 如何创建多张折叠卡片
@ZahidHussain 你需要给每张卡自己的“折叠”质量。看我的例子：stackblitz.com/edit/angular-stsky7
谢谢，非常有帮助，因为很难找到一个例子。

【解决方案2】：

如果有人需要 Angular 材料 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>

【讨论】：

【解决方案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>

【讨论】：