典型卡片

无边框

简洁卡片

更灵活的内容展示

栅格卡片

Card卡片

通用卡片容器。

何时使用#

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

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

代码演示

Card title

Card content

典型卡片

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

      加载中

Card title

Card content

无边框

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

      加载中

Card content

简洁卡片

只包含内容区域。

      加载中

Europe Street beat

www.instagram.com

更灵活的内容展示

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

      加载中

Card title

Card content

Card title

Card content

Card title

Card content

栅格卡片

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

      加载中

预加载的卡片

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

      加载中

Cart Title

Content

网格型内嵌卡片

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

      加载中

Card Title

Group title

Inner Card Title

Inner Card Content

Inner Card Title

Inner Card Content

内部卡片

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

      加载中

Card title

content0

带页签的卡片

可承载更多内容。

      加载中

Card title

This is the description

支持更多内容配置

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

      加载中

API#

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

nz-cardcomponent#

参数	说明	类型	默认值	支持全局配置
`[nzActions]`	卡片操作组，位置在卡片底部	`Array<TemplateRef<void>>`	-
`[nzBodyStyle]`	内容区域自定义样式	`{ [key: string]: string }`	-
`[nzBordered]`	是否有边框	`boolean`	`true`	✅
`[nzCover]`	卡片封面	`TemplateRef<void>`	-
`[nzExtra]`	卡片右上角的操作区域	`string\|TemplateRef<void>`	-
`[nzHoverable]`	鼠标移过时可浮起	`boolean`	`false`	✅
`[nzLoading]`	当卡片内容还在加载中时，可以用 loading 展示一个占位	`boolean`	`false`
`[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]`	鼠标移过时可浮起	`boolean`	`true`	-

分隔卡片内容区域

nz-card-tabcomponent#

分隔页签标题区域