NG-ZORRODescriptions
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.
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 | |||||
| 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 | ||||
Descriptions with border and background color.
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 sizes to fit in a variety of containers.
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 configuration enables perfect presentation on small screen devices.
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.
Loading...User Info
| Product | Billing Mode | Automatic Renewal |
| Cloud Database | Prepaid | YES |
| Order Time | Usage Time | |
| 2018-04-24 18:00:00 | 2018-04-24 18:00:00 To 2019-04-24 18:00:00 | |
| Status | ||
| 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 descriptions with border.
Loading...API#
nz-descriptions#
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[nzTitle] | Describe the title of the list, displayed at the top | string|TemplateRef<void> | false | |
[nzExtra] | The action area of the description list, placed at the top-right | string|TemplateRef<void> | - | |
[nzBordered] | Whether to display the border | boolean | false | ✅ |
[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 title | boolean | true | ✅ |
[nzLayout] | Set the layout of the list | 'horizontal' | 'vertical' | 'horizontal' |
nz-descriptions-item#
| Property | Description | Type | Default |
|---|---|---|---|
[nzTitle] | Description of the content | boolean | string|TemplateRef<void> |
[nzSpan] | The number of columns included | number | 1 |