有没有办法用角形材料制作可折叠的卡片?看起来像是相当受欢迎的东西,但我一直在这里寻找合适的角度材料组件/设置: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
如果有人需要一个最新的“解决方案”与角材料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>
就像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>