Descriptions描述列表

成组显示多个只读字段。

何时使用

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

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

代码演示

Descriptions描述列表 - 图1

基本

简单的展示。

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

Descriptions描述列表 - 图2

带边框的

带边框和背景颜色列表。

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

Descriptions描述列表 - 图3

自定义尺寸

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

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

Descriptions描述列表 - 图4

响应式

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

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

Descriptions描述列表 - 图5

垂直

Vertical usage.

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

Descriptions描述列表 - 图6

垂直边框

垂直且带边框。

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

API

nz-descriptionscomponent

参数说明类型默认值支持全局配置
[nzTitle]描述列表的标题，显示在最顶部string|TemplateRef<void>false
[nzBordered]是否展示边框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’✅
[nzColon]在标题后显示冒号booleantrue✅

nz-descriptions-itemcomponent

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