Descriptions

Display multiple read-only fields in groups.

When To Use#

Commonly displayed on the details page.

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

Examples

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

Basic usage.

expand codeexpand code
      Loading...
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
Border

Descriptions with border and background color.

expand codeexpand code
      Loading...


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
Custom size

Custom sizes to fit in a variety of containers.

expand codeexpand code
      Loading...
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
Responsive

Responsive configuration enables perfect presentation on small screen devices.

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

Simplest Usage.

expand codeexpand code
      Loading...
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
Vertical border

Vertical descriptions with border.

expand codeexpand code
      Loading...

API#

nz-descriptions#

PropertyDescriptionTypeDefaultGlobal Config
[nzTitle]Describe the title of the list, displayed at the topstring|TemplateRef<void>false
[nzExtra]The action area of the description list, placed at the top-rightstring|TemplateRef<void>-
[nzBordered]Whether to display the borderbooleanfalse✅
[nzColumn]The number of nz-descriptions-item in a row. It could be a number or a object like { xs: 8, sm: 16, md: 24}number|object{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }✅
[nzSize]Set the size of the list. Only works when nzBordered is set'default' | 'middle' | 'small''default'✅
[nzColon]Show colon after titlebooleantrue✅
[nzLayout]Set the layout of the list'horizontal' | 'vertical''horizontal'

nz-descriptions-item#

PropertyDescriptionTypeDefault
[nzTitle]Description of the contentbooleanstring|TemplateRef<void>
[nzSpan]The number of columns includednumber1