Card卡片

通用卡片容器。

何时使用

最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

  1. import { NzCardModule } from 'ng-zorro-antd/card';

代码演示Card卡片 - 图2

Card卡片 - 图3

典型卡片

包含标题、内容、操作区域。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-basic',
  5.   template: `
  6.     <nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate">
  7.       <p>Card content</p>
  8.       <p>Card content</p>
  9.       <p>Card content</p>
  10.     </nz-card>
  11.     <ng-template #extraTemplate>
  12.       <a>More</a>
  13.     </ng-template>
  14.   `,
  15.   styles: [
  16.     `
  17.       p {
  18.         margin: 0;
  19.       }
  20.     `
  21.   ]
  22. })
  23. export class NzDemoCardBasicComponent {}

Card卡片 - 图4

无边框

在灰色背景上使用无边框的卡片。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-border-less',
  5.   template: `
  6.     <div style="background: #ECECEC;padding:30px;">
  7.       <nz-card style="width:300px;" [nzBordered]="false" nzTitle="Card title" [nzExtra]="extraTemplate">
  8.         <p>Card content</p>
  9.         <p>Card content</p>
  10.         <p>Card content</p>
  11.       </nz-card>
  12.     </div>
  13.     <ng-template #extraTemplate>
  14.       <a>More</a>
  15.     </ng-template>
  16.   `,
  17.   styles: [
  18.     `
  19.       p {
  20.         margin: 0;
  21.       }
  22.     `
  23.   ]
  24. })
  25. export class NzDemoCardBorderLessComponent {}

Card卡片 - 图5

简洁卡片

只包含内容区域。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-simple',
  5.   template: `
  6.     <nz-card style="width:300px;">
  7.       <p>Card content</p>
  8.       <p>Card content</p>
  9.       <p>Card content</p>
  10.     </nz-card>
  11.   `,
  12.   styles: [
  13.     `
  14.       p {
  15.         margin: 0;
  16.       }
  17.     `
  18.   ]
  19. })
  20. export class NzDemoCardSimpleComponent {}

Card卡片 - 图6

更灵活的内容展示

可以利用 nz-card-meta 支持更灵活的内容。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-flexible-content',
  5.   template: `
  6.     <nz-card nzHoverable style="width:240px" [nzCover]="coverTemplate">
  7.       <nz-card-meta nzTitle="Europe Street beat" nzDescription="www.instagram.com"></nz-card-meta>
  8.     </nz-card>
  9.     <ng-template #coverTemplate>
  10.       <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
  11.     </ng-template>
  12.   `
  13. })
  14. export class NzDemoCardFlexibleContentComponent {}

Card卡片 - 图7

栅格卡片

在系统概览页面常常和栅格进行配合。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-in-column',
  5.   template: `
  6.     <div style="background: #ECECEC;padding:30px;">
  7.       <div nz-row [nzGutter]="8">
  8.         <div nz-col [nzSpan]="8">
  9.           <nz-card nzTitle="Card title">
  10.             <p>Card content</p>
  11.           </nz-card>
  12.         </div>
  13.         <div nz-col [nzSpan]="8">
  14.           <nz-card nzTitle="Card title">
  15.             <p>Card content</p>
  16.           </nz-card>
  17.         </div>
  18.         <div nz-col [nzSpan]="8">
  19.           <nz-card nzTitle="Card title">
  20.             <p>Card content</p>
  21.           </nz-card>
  22.         </div>
  23.       </div>
  24.     </div>
  25.   `,
  26.   styles: [
  27.     `
  28.       p {
  29.         margin: 0;
  30.       }
  31.     `
  32.   ]
  33. })
  34. export class NzDemoCardInColumnComponent {}

Card卡片 - 图8

预加载的卡片

数据读入前会有文本块样式。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-loading',
  5.   template: `
  6.     <nz-switch [(ngModel)]="loading"></nz-switch>
  7.     <nz-card style="width: 300px;margin-top: 16px" [nzLoading]="loading">
  8.       <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description"></nz-card-meta>
  9.     </nz-card>
  10.     <nz-card style="width: 300px;margin-top: 16px" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
  11.       <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzAvatar]="{ size: 'large' }">
  12.         <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description"></nz-card-meta>
  13.       </nz-skeleton>
  14.     </nz-card>
  15.     <ng-template #avatarTemplate>
  16.       <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
  17.     </ng-template>
  18.     <ng-template #actionSetting>
  19.       <i nz-icon nzType="setting"></i>
  20.     </ng-template>
  21.     <ng-template #actionEdit>
  22.       <i nz-icon nzType="edit"></i>
  23.     </ng-template>
  24.     <ng-template #actionEllipsis>
  25.       <i nz-icon nzType="ellipsis"></i>
  26.     </ng-template>
  27.   `
  28. })
  29. export class NzDemoCardLoadingComponent {
  30.   loading = true;
  31. }

Card卡片 - 图9

网格型内嵌卡片

一种常见的卡片内容区隔模式。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-grid-card',
  5.   template: `
  6.     <nz-card nzTitle="Cart Title">
  7.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
  8.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
  9.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
  10.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
  11.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
  12.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
  13.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
  14.     </nz-card>
  15.   `
  16. })
  17. export class NzDemoCardGridCardComponent {
  18.   gridStyle = {
  19.     width: '25%',
  20.     textAlign: 'center'
  21.   };
  22. }

Card卡片 - 图10

内部卡片

可以放在普通卡片内部，展示多层级结构的信息。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-inner',
  5.   template: `
  6.     <nz-card nzTitle="Card Title">
  7.       <p style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight: 500;">
  8.         Group title
  9.       </p>
  10.       <nz-card nzType="inner" nzTitle="Inner Card Title" [nzExtra]="extraTemplate">
  11.         <a>Inner Card Content</a>
  12.       </nz-card>
  13.       <nz-card nzType="inner" style="margin-top:16px;" nzTitle="Inner Card Title" [nzExtra]="extraTemplate">
  14.         <a>Inner Card Content</a>
  15.       </nz-card>
  16.     </nz-card>
  17.     <ng-template #extraTemplate>
  18.       <a>More</a>
  19.     </ng-template>
  20.   `
  21. })
  22. export class NzDemoCardInnerComponent {}

Card卡片 - 图11

带页签的卡片

可承载更多内容。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-tabs',
  5.   template: `
  6.     <nz-card style="width: 100%;" nzTitle="Card title" [nzExtra]="extraTemplate">
  7.       <nz-card-tab>
  8.         <nz-tabset nzSize="large" [(nzSelectedIndex)]="index1">
  9.           <nz-tab nzTitle="tab1"></nz-tab>
  10.           <nz-tab nzTitle="tab2"></nz-tab>
  11.         </nz-tabset>
  12.       </nz-card-tab>
  13.       content{{ index1 }}
  14.     </nz-card>
  15.     <ng-template #extraTemplate>
  16.       <a>More</a>
  17.     </ng-template>
  18.     <br />
  19.     <br />
  20.     <nz-card style="width: 100%;">
  21.       <nz-card-tab>
  22.         <nz-tabset nzSize="large" [(nzSelectedIndex)]="index2">
  23.           <nz-tab nzTitle="article"></nz-tab>
  24.           <nz-tab nzTitle="app"></nz-tab>
  25.           <nz-tab nzTitle="project"></nz-tab>
  26.         </nz-tabset>
  27.       </nz-card-tab>
  28.       content{{ index2 }}
  29.     </nz-card>
  30.   `
  31. })
  32. export class NzDemoCardTabsComponent {
  33.   index1 = 0;
  34.   index2 = 0;
  35. }

Card卡片 - 图12

支持更多内容配置

一种支持封面、头像、标题和描述信息的卡片。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-card-meta',
  5.   template: `
  6.     <nz-card style="width:300px;" [nzCover]="coverTemplate" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
  7.       <nz-card-meta nzTitle="Card title" nzDescription="This is the description" [nzAvatar]="avatarTemplate"></nz-card-meta>
  8.     </nz-card>
  9.     <ng-template #avatarTemplate>
  10.       <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
  11.     </ng-template>
  12.     <ng-template #coverTemplate>
  13.       <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
  14.     </ng-template>
  15.     <ng-template #actionSetting>
  16.       <i nz-icon nzType="setting"></i>
  17.     </ng-template>
  18.     <ng-template #actionEdit>
  19.       <i nz-icon nzType="edit"></i>
  20.     </ng-template>
  21.     <ng-template #actionEllipsis>
  22.       <i nz-icon nzType="ellipsis"></i>
  23.     </ng-template>
  24.   `
  25. })
  26. export class NzDemoCardMetaComponent {}

API

  1. <nz-card nzTitle="卡片标题">卡片内容</nz-card>

nz-cardcomponent

参数说明类型默认值支持全局配置
[nzActions]卡片操作组，位置在卡片底部Array<TemplateRef<void>>-
[nzBodyStyle]内容区域自定义样式{ [key: string]: string }-
[nzBorderless]是否移除边框booleanfalse✅
[nzCover]卡片封面TemplateRef<void>-
[nzExtra]卡片右上角的操作区域string|TemplateRef<void>-
[nzHoverable]鼠标移过时可浮起booleanfalse✅
[nzLoading]当卡片内容还在加载中时，可以用 loading 展示一个占位booleanfalse
[nzTitle]卡片标题string|TemplateRef<void>-
[nzType]卡片类型，可设置为 inner 或 不设置‘inner’-
[nzSize]卡片的尺寸‘default’|’small’‘default’✅

nz-card-metacomponent

参数说明类型默认值
[nzAvatar]头像/图标TemplateRef<void>-
[nzDescription]描述内容string | TemplateRef<void>-
[nzTitle]标题内容string | TemplateRef<void>-

[nz-card-grid]directive

参数说明类型默认值支持全局配置
[nzHoverable]鼠标移过时可浮起booleantrue-

分隔卡片内容区域

nz-card-tabcomponent

分隔页签标题区域