Card卡片

通用卡片容器。

何时使用

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

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

代码演示

Card卡片 - 图1

典型卡片

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

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

Card卡片 - 图2

无边框

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

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

Card卡片 - 图3

简洁卡片

只包含内容区域。

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

Card卡片 - 图4

更灵活的内容展示

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

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

Card卡片 - 图5

栅格卡片

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

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

Card卡片 - 图6

预加载的卡片

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

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

Card卡片 - 图7

网格型内嵌卡片

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

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

Card卡片 - 图8

内部卡片

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

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

Card卡片 - 图9

带页签的卡片

可承载更多内容。

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

Card卡片 - 图10

支持更多内容配置

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

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

API

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

nz-cardcomponent

参数说明类型默认值支持全局配置
[nzActions]卡片操作组,位置在卡片底部Array<TemplateRef<void>>-
[nzBodyStyle]内容区域自定义样式{ [key: string]: string }-
[nzBordered]是否有边框booleantrue
[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

分隔页签标题区域