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 usage.

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

Descriptions with border and background color.

expand codeexpand code
Loading...


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

Custom sizes to fit in a variety of containers.

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

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

Simplest Usage.

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

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