Card卡片

通用卡片容器。

何时使用#

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

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

代码演示

Card title

Card content

Card content

Card content

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

expand codeexpand code
      加载中
    
Card title

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
Inner Card Title

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

expand codeexpand code
      加载中
    
Card title
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#

分隔页签标题区域