Descriptions描述列表

成组显示多个只读字段。

何时使用

常见于详情页的信息展示。

单独引入此组件

想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

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

代码演示

Descriptions描述列表 - 图1

基本

简单的展示。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-descriptions-basic',
  4. template: `
  5. <nz-descriptions nzTitle="User Info">
  6. <nz-descriptions-item nzTitle="UserName">Zhou Maomao</nz-descriptions-item>
  7. <nz-descriptions-item nzTitle="Telephone">18100000000</nz-descriptions-item>
  8. <nz-descriptions-item nzTitle="Live">Hangzhou, Zhejiang</nz-descriptions-item>
  9. <nz-descriptions-item nzTitle="Remark">Empty</nz-descriptions-item>
  10. <nz-descriptions-item nzTitle="Address">
  11. No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
  12. </nz-descriptions-item>
  13. </nz-descriptions>
  14. `
  15. })
  16. export class NzDemoDescriptionsBasicComponent {
  17. }

Descriptions描述列表 - 图2

带边框的

带边框和背景颜色列表。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-descriptions-border',
  4. template: `
  5. <nz-descriptions nzTitle="User Info" nzBordered>
  6. <nz-descriptions-item nzTitle="Product">Cloud Database</nz-descriptions-item>
  7. <nz-descriptions-item nzTitle="Billing Mode">Prepaid</nz-descriptions-item>
  8. <nz-descriptions-item nzTitle="Automatic Renewal">YES</nz-descriptions-item>
  9. <nz-descriptions-item nzTitle="Order Time">
  10. 2018-04-24 18:00:00
  11. </nz-descriptions-item>
  12. <nz-descriptions-item nzTitle="Usage Time" [nzSpan]="2">
  13. 2018-04-24 18:00:00 To 2019-04-24 18:00:00
  14. </nz-descriptions-item>
  15. <nz-descriptions-item nzTitle="Status" [nzSpan]="3">
  16. <nz-badge nzStatus="processing" nzText="Running"></nz-badge>
  17. </nz-descriptions-item>
  18. <nz-descriptions-item nzTitle="Negotiated Amount">$80.00</nz-descriptions-item>
  19. <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
  20. <nz-descriptions-item nzTitle="Official Receipts">$60.00</nz-descriptions-item>
  21. <nz-descriptions-item nzTitle="Config Info">
  22. Data disk type: MongoDB
  23. <br />
  24. Database version: 3.4
  25. <br />
  26. Package: dds.mongo.mid
  27. <br />
  28. Storage space: 10 GB
  29. <br />
  30. Replication_factor:3
  31. <br />
  32. Region: East China 1<br />
  33. </nz-descriptions-item>
  34. </nz-descriptions>
  35. `
  36. })
  37. export class NzDemoDescriptionsBorderComponent {}

Descriptions描述列表 - 图3

自定义尺寸

自定义尺寸,适应在各种容器中展示。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-descriptions-custom-size',
  4. template: `
  5. <nz-radio-group [(ngModel)]="size">
  6. <label nz-radio nzValue="default">default</label>
  7. <label nz-radio nzValue="middle">middle</label>
  8. <label nz-radio nzValue="small">small</label>
  9. </nz-radio-group>
  10. <br />
  11. <br />
  12. <nz-descriptions nzTitle="Custom Size" nzBordered [nzSize]="size">
  13. <nz-descriptions-item nzTitle="Product">
  14. Cloud Database
  15. </nz-descriptions-item>
  16. <nz-descriptions-item nzTitle="Billing">Prepaid</nz-descriptions-item>
  17. <nz-descriptions-item nzTitle="time">18:00:00</nz-descriptions-item>
  18. <nz-descriptions-item nzTitle="Amount">$80.00</nz-descriptions-item>
  19. <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
  20. <nz-descriptions-item nzTitle="Official">$60.00</nz-descriptions-item>
  21. <nz-descriptions-item nzTitle="Config Info">
  22. Data disk type: MongoDB
  23. <br />
  24. Database version: 3.4
  25. <br />
  26. Package: dds.mongo.mid
  27. <br />
  28. Storage space: 10 GB
  29. <br />
  30. Replication_factor:3
  31. <br />
  32. Region: East China 1
  33. <br />
  34. </nz-descriptions-item>
  35. </nz-descriptions>
  36. `
  37. })
  38. export class NzDemoDescriptionsCustomSizeComponent {
  39. size = 'default';
  40. }

Descriptions描述列表 - 图4

响应式

通过响应式的配置可以实现在小屏幕设备上的完美呈现。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-descriptions-responsive',
  4. template: `
  5. <nz-descriptions nzTitle="Responsive Descriptions" [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
  6. <nz-descriptions-item nzTitle="Product">
  7. Cloud Database
  8. </nz-descriptions-item>
  9. <nz-descriptions-item nzTitle="Billing">Prepaid</nz-descriptions-item>
  10. <nz-descriptions-item nzTitle="time">18:00:00</nz-descriptions-item>
  11. <nz-descriptions-item nzTitle="Amount">$80.00</nz-descriptions-item>
  12. <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
  13. <nz-descriptions-item nzTitle="Official">$60.00</nz-descriptions-item>
  14. <nz-descriptions-item nzTitle="Config Info">
  15. Data disk type: MongoDB
  16. <br />
  17. Database version: 3.4
  18. <br />
  19. Package: dds.mongo.mid
  20. <br />
  21. Storage space: 10 GB
  22. <br />
  23. Replication_factor:3
  24. <br />
  25. Region: East China 1
  26. <br />
  27. </nz-descriptions-item>
  28. </nz-descriptions>
  29. `
  30. })
  31. export class NzDemoDescriptionsResponsiveComponent {}

API

nz-descriptionscomponent

参数说明类型默认值
[nzTitle]描述列表的标题,显示在最顶部string|TemplateRef<void>false
[nzBorder]是否展示边框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'

nz-descriptions-itemcomponent

参数说明类型默认值
[nzTitle]内容的描述string|TemplateRef<void>-
[nzSpan]包含列的数量number1