Descriptions

Display multiple read-only fields in groups.

When To Use#

Commonly displayed on the details page.

Import this Component Individually#

You can get more detail here.

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

Examples

User Info
UserNameZhou MaomaoTelephone18100000000LiveHangzhou, Zhejiang
RemarkEmptyAddress No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

Basic usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-descriptions-basic',
  template: `
    <nz-descriptions nzTitle="User Info">
      <nz-descriptions-item nzTitle="UserName">Zhou Maomao</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Telephone">18100000000</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Live">Hangzhou, Zhejiang</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Remark">Empty</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Address">
        No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
      </nz-descriptions-item>
    </nz-descriptions>
  `
})

export class NzDemoDescriptionsBasicComponent {

}
User Info
ProductCloud DatabaseBilling ModePrepaidAutomatic RenewalYES
Order Time 2018-04-24 18:00:00 Usage Time 2018-04-24 18:00:00 To 2019-04-24 18:00:00
StatusRunning
Negotiated Amount$80.00Discount$20.00Official 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.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-descriptions-border',
  template: `
    <nz-descriptions nzTitle="User Info" nzBordered>
      <nz-descriptions-item nzTitle="Product">Cloud Database</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Billing Mode">Prepaid</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Automatic Renewal">YES</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Order Time">
        2018-04-24 18:00:00
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Usage Time" [nzSpan]="2">
        2018-04-24 18:00:00 To 2019-04-24 18:00:00
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Status" [nzSpan]="3">
        <nz-badge nzStatus="processing" nzText="Running"></nz-badge>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Negotiated Amount">$80.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Official Receipts">$60.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication_factor:3
        <br />
        Region: East China 1<br />
      </nz-descriptions-item>
    </nz-descriptions>
  `
})
export class NzDemoDescriptionsBorderComponent {}


Custom Size
Product Cloud Database BillingPrepaidtime18:00:00
Amount$80.00Discount$20.00Official$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 sizes to fit in a variety of containers.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-descriptions-custom-size',
  template: `
    <nz-radio-group [(ngModel)]="size">
      <label nz-radio nzValue="default">default</label>
      <label nz-radio nzValue="middle">middle</label>
      <label nz-radio nzValue="small">small</label>
    </nz-radio-group>
    <br />
    <br />
    <nz-descriptions nzTitle="Custom Size" nzBordered [nzSize]="size">
      <nz-descriptions-item nzTitle="Product">
        Cloud Database
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Billing">Prepaid</nz-descriptions-item>
      <nz-descriptions-item nzTitle="time">18:00:00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Amount">$80.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Official">$60.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication_factor:3
        <br />
        Region: East China 1
        <br />
      </nz-descriptions-item>
    </nz-descriptions>
  `
})
export class NzDemoDescriptionsCustomSizeComponent {
  size = 'default';
}
Responsive Descriptions
Product Cloud Database BillingPrepaidtime18:00:00
Amount$80.00Discount$20.00Official$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.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-descriptions-responsive',
  template: `
    <nz-descriptions
      nzTitle="Responsive Descriptions"
      nzBordered
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
    >
      <nz-descriptions-item nzTitle="Product">
        Cloud Database
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Billing">Prepaid</nz-descriptions-item>
      <nz-descriptions-item nzTitle="time">18:00:00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Amount">$80.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Official">$60.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication_factor:3
        <br />
        Region: East China 1
        <br />
      </nz-descriptions-item>
    </nz-descriptions>
  `
})
export class NzDemoDescriptionsResponsiveComponent {}
User Info
UserNameTelephoneLive
Zhou Maomao18100000000Hangzhou, Zhejiang
RemarkAddress
Empty No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China

Responsive configuration enables perfect presentation on small screen devices.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-descriptions-vertical',
  template: `
    <nz-descriptions nzTitle="User Info" nzLayout="vertical">
      <nz-descriptions-item nzTitle="UserName">Zhou Maomao</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Telephone">18100000000</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Live">Hangzhou, Zhejiang</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Remark">Empty</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Address">
        No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
      </nz-descriptions-item>
    </nz-descriptions>
  `
})
export class NzDemoDescriptionsVerticalComponent {}
User Info
Product Billing Mode Automatic Renewal
Cloud DatabasePrepaidYES
Order Time Usage Time
2018-04-24 18:00:00 2018-04-24 18:00:00 To 2019-04-24 18:00:00
Status
Running
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.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-descriptions-vertical-border',
  template: `
    <nz-descriptions nzTitle="User Info" nzBordered nzLayout="vertical">
      <nz-descriptions-item nzTitle="Product">Cloud Database</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Billing Mode">Prepaid</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Automatic Renewal">YES</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Order Time">
        2018-04-24 18:00:00
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Usage Time" [nzSpan]="2">
        2018-04-24 18:00:00 To 2019-04-24 18:00:00
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Status" [nzSpan]="3">
        <nz-badge nzStatus="processing" nzText="Running"></nz-badge>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Negotiated Amount">$80.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Discount">$20.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Official Receipts">$60.00</nz-descriptions-item>
      <nz-descriptions-item nzTitle="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication_factor:3
        <br />
        Region: East China 1<br />
      </nz-descriptions-item>
    </nz-descriptions>
  `
})
export class NzDemoDescriptionsVerticalBorderComponent {}

API#

nz-descriptions#

PropertyDescriptionTypeDefault
[nzTitle]Describe the title of the list, displayed at the topstring|TemplateRef<void>false
[nzBordered]Whether to display the borderbooleanfalse
[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 titlebooleantrue

nz-descriptions-item#

PropertyDescriptionTypeDefault
[nzTitle]Description of the contentbooleanstring|TemplateRef<void>
[nzSpan]The number of columns includednumber1