Card卡片

通用卡片容器。

何时使用#

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

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

代码演示

Card title
More

Card content

Card content

Card content

典型卡片

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

expand codeexpand code
      加载中
Card title
More

Card content

Card content

Card content

无边框

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

expand codeexpand code
      加载中

Card content

Card content

Card content

简洁卡片

只包含内容区域。

expand codeexpand code
      加载中
example
Europe Street beat
www.instagram.com
更灵活的内容展示

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

expand codeexpand code
      加载中
Card title

Card content

Card title

Card content

Card title

Card content

栅格卡片

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

expand codeexpand code
      加载中

预加载的卡片

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

expand codeexpand code
      加载中
Cart Title
Content
Content
Content
Content
Content
Content
Content
网格型内嵌卡片

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

expand codeexpand code
      加载中
Card Title

Group title

Inner Card Title
More
Inner Card Content
Inner Card Title
More
Inner Card Content
内部卡片

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

expand codeexpand code
      加载中
Card title
More
content0


content0
带页签的卡片

可承载更多内容。

expand codeexpand code
      加载中
example
Card title
This is the description
支持更多内容配置

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

expand codeexpand code
      加载中

API#

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

nz-card#

参数说明类型默认值支持全局配置
[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-meta#

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

[nz-card-grid]#

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

分隔卡片内容区域

nz-card-tab#

分隔页签标题区域