Descriptions描述列表

成组显示多个只读字段。

何时使用#

常见于详情页的信息展示。

import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';

代码演示

User Info
UserName Zhou Maomao
Telephone 18100000000
Live Hangzhou, Zhejiang
Remark Empty
Address No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

简单的展示。

expand codeexpand code
加载中
User Info
ProductCloud DatabaseBilling ModePrepaidAutomatic RenewalYES
Order Time2018-04-24 18:00:00Usage Time2018-04-24 18:00:00 To 2019-04-24 18:00:00
StatusRunning
Negotiated Amount$80.00Discount$20.00Official Receipts$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication_factor:3
Region: East China 1

带边框和背景颜色列表。

expand codeexpand code
加载中


Custom Size
ProductCloud DatabaseBillingPrepaidtime18:00:00
Amount$80.00Discount$20.00Official$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication_factor:3
Region: East China 1


Custom Size
Product Cloud Database
Billing Prepaid
Time 18:00:00
Amount $80.00
Discount $20.00
Official $60.00

自定义尺寸,适应在各种容器中展示。

expand codeexpand code
加载中
Responsive Descriptions
ProductCloud DatabaseBillingPrepaidtime18:00:00
Amount$80.00Discount$20.00Official$60.00
Config InfoData disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication_factor:3
Region: East China 1

通过响应式的配置可以实现在小屏幕设备上的完美呈现。

expand codeexpand code
加载中
User Info
UserName
Telephone
Live
Zhou Maomao
1810000000
Hangzhou, Zhejiang
Address
Remark
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
empty

垂直的列表。

expand codeexpand code
加载中
User Info
ProductBilling ModeAutomatic Renewal
Cloud DatabasePrepaidYES
Order TimeUsage Time
2018-04-24 18:00:002018-04-24 18:00:00 To 2019-04-24 18:00:00
Status
Running
Negotiated AmountDiscountOfficial Receipts
$80.00$20.00$60.00
Config Info
Data disk type: MongoDB
Database version: 3.4
Package: dds.mongo.mid
Storage space: 10 GB
Replication_factor:3
Region: East China 1

垂直且带边框。

expand codeexpand code
加载中

API#

nz-descriptions#

参数说明类型默认值支持全局配置
[nzTitle]描述列表的标题,显示在最顶部string|TemplateRef<void>false
[nzExtra]描述列表的操作区域,显示在右上方string|TemplateRef<void>-
[nzBordered]是否展示边框booleanfalse
[nzColumn]一行的 nz-descriptions-item 的数量,可以写成像素值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24}number|object{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }
[nzSize]设置列表的大小(只有设置 nzBordered 时生效)'default' | 'middle' | 'small''default'
[nzColon]在标题后显示冒号booleantrue

nz-descriptions-item#

参数说明类型默认值
[nzTitle]内容的描述string|TemplateRef<void>-
[nzSpan]包含列的数量number1