• Descriptions描述列表
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-descriptionscomponent
      • nz-descriptions-itemcomponent

    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. })
    18. export class NzDemoDescriptionsBasicComponent {
    20. }

    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';
    3. @Component({
    4.   selector: 'nz-demo-descriptions-custom-size',
    5.   template: `
    6.     <nz-radio-group [(ngModel)]="size">
    7.       <label nz-radio nzValue="default">default</label>
    8.       <label nz-radio nzValue="middle">middle</label>
    9.       <label nz-radio nzValue="small">small</label>
    10.     </nz-radio-group>
    11.     <br />
    12.     <br />
    13.     <nz-descriptions nzTitle="Custom Size" nzBordered [nzSize]="size">
    14.       <nz-descriptions-item nzTitle="Product">
    15.         Cloud Database
    16.       </nz-descriptions-item>
    17.       <nz-descriptions-item nzTitle="Billing">Prepaid</nz-descriptions-item>
    18.       <nz-descriptions-item nzTitle="time">18:00:00</nz-descriptions-item>
    19.       <nz-descriptions-item nzTitle="Amount">$80.00</nz-descriptions-item>
    20.       <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
    21.       <nz-descriptions-item nzTitle="Official">$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
    34.         <br />
    35.       </nz-descriptions-item>
    36.     </nz-descriptions>
    37.   `
    38. })
    39. export class NzDemoDescriptionsCustomSizeComponent {
    40.   size = 'default';
    41. }

    Descriptions描述列表 - 图4

    响应式

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

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