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
Product Cloud Database Billing Mode Prepaid Automatic Renewal YES
Order Time 2018-04-24 18:00:00 Usage Time 2018-04-24 18:00:00 To 2019-04-24 18:00:00
Status Running
Negotiated Amount $80.00 Discount $20.00 Official Receipts $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
      加载中
    


Custom Size
Product Cloud Database Billing Prepaid time 18:00:00
Amount $80.00 Discount $20.00 Official $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


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
Product Cloud Database Billing Prepaid time 18:00:00
Amount $80.00 Discount $20.00 Official $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
      加载中
    
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
Product Billing Mode Automatic Renewal
Cloud DatabasePrepaidYES
Order Time Usage Time
2018-04-24 18:00:00 2018-04-24 18:00:00 To 2019-04-24 18:00:00
Status
Running
Negotiated Amount Discount Official 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