NG-ZORRODescriptions描述列表
成组显示多个只读字段。
何时使用#
常见于详情页的信息展示。
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 | |
简单的展示。
加载中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 | ||||
带边框和背景颜色列表。
加载中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 |
自定义尺寸，适应在各种容器中展示。
加载中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 | ||||
通过响应式的配置可以实现在小屏幕设备上的完美呈现。
加载中User Info
UserName | Telephone | Live |
Zhou Maomao | 1810000000 | Hangzhou, Zhejiang |
Address | Remark | |
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China | empty | |
垂直的列表。
加载中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 | ||
垂直且带边框。
加载中API#
nz-descriptions#
| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
|---|---|---|---|---|
[nzTitle] | 描述列表的标题，显示在最顶部 | string|TemplateRef<void> | false | |
[nzExtra] | 描述列表的操作区域，显示在右上方 | string|TemplateRef<void> | - | |
[nzBordered] | 是否展示边框 | boolean | false | ✅ |
[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] | 在标题后显示冒号 | boolean | true | ✅ |
nz-descriptions-item#
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[nzTitle] | 内容的描述 | string|TemplateRef<void> | - |
[nzSpan] | 包含列的数量 | number | 1 |