Card卡片

    最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

    典型卡片

    包含标题、内容、操作区域。

    3. @Component({
    4.   selector: 'nz-demo-card-basic',
    5.   template: `
    6.     <nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate">
    7.       <p>Card content</p>
    8.       <p>Card content</p>
    9.       <p>Card content</p>
    10.     </nz-card>
    11.     <ng-template #extraTemplate>
    12.       <a>More</a>
    13.     </ng-template>
    14.   `,
    15.   styles: [
    16.     `
    17.       p {
    18.         margin: 0;
    19.       }
    20.     `
    21.   ]
    22. })
    23. export class NzDemoCardBasicComponent {}

    Card卡片 - 图4

    无边框

    在灰色背景上使用无边框的卡片。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-border-less',
    5.   template: `
    6.     <div style="background: #ECECEC;padding:30px;">
    7.       <nz-card style="width:300px;" [nzBordered]="false" nzTitle="Card title" [nzExtra]="extraTemplate">
    8.         <p>Card content</p>
    9.         <p>Card content</p>
    10.         <p>Card content</p>
    11.       </nz-card>
    12.     </div>
    13.     <ng-template #extraTemplate>
    14.       <a>More</a>
    15.     </ng-template>
    16.   `,
    17.   styles: [
    18.     `
    19.       p {
    20.         margin: 0;
    21.       }
    22.     `
    23.   ]
    24. })
    25. export class NzDemoCardBorderLessComponent {}

    简洁卡片

    只包含内容区域。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-simple',
    5.   template: `
    6.     <nz-card style="width:300px;">
    7.       <p>Card content</p>
    8.       <p>Card content</p>
    9.       <p>Card content</p>
    10.     </nz-card>
    11.   `,
    12.   styles: [
    13.     `
    14.       p {
    15.         margin: 0;
    16.       }
    17.     `
    18.   ]
    19. })

    更灵活的内容展示

    可以利用 nz-card-meta 支持更灵活的内容。

    Card卡片 - 图7

    栅格卡片

    在系统概览页面常常和栅格进行配合。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-in-column',
    5.   template: `
    6.     <div style="background: #ECECEC;padding:30px;">
    7.       <div nz-row [nzGutter]="8">
    8.         <div nz-col [nzSpan]="8">
    9.           <nz-card nzTitle="Card title">
    10.             <p>Card content</p>
    11.           </nz-card>
    12.         </div>
    13.         <div nz-col [nzSpan]="8">
    14.           <nz-card nzTitle="Card title">
    15.             <p>Card content</p>
    17.         </div>
    18.         <div nz-col [nzSpan]="8">
    19.           <nz-card nzTitle="Card title">
    20.             <p>Card content</p>
    21.           </nz-card>
    22.         </div>
    23.       </div>
    24.     </div>
    25.   `,
    26.   styles: [
    27.     `
    28.       p {
    29.         margin: 0;
    30.       }
    31.     `
    32.   ]
    33. })
    34. export class NzDemoCardInColumnComponent {}

    预加载的卡片

    数据读入前会有文本块样式。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-loading',
    5.   template: `
    6.     <nz-switch [(ngModel)]="loading"></nz-switch>
    7.     <nz-card style="width: 300px;margin-top: 16px" [nzLoading]="loading">
    8.       <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description"></nz-card-meta>
    9.     </nz-card>
    10.     <nz-card style="width: 300px;margin-top: 16px" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
    11.       <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzAvatar]="{ size: 'large' }">
    12.         <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description"></nz-card-meta>
    13.       </nz-skeleton>
    14.     </nz-card>
    15.     <ng-template #avatarTemplate>
    16.       <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
    17.     </ng-template>
    18.     <ng-template #actionSetting>
    19.       <i nz-icon nzType="setting"></i>
    20.     </ng-template>
    21.     <ng-template #actionEdit>
    22.       <i nz-icon nzType="edit"></i>
    23.     </ng-template>
    24.     <ng-template #actionEllipsis>
    25.       <i nz-icon nzType="ellipsis"></i>
    26.     </ng-template>
    27.   `
    28. })
    29. export class NzDemoCardLoadingComponent {
    30.   loading = true;
    31. }

    Card卡片 - 图9

    网格型内嵌卡片

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-grid-card',
    5.   template: `
    6.     <nz-card nzTitle="Cart Title">
    7.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
    8.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
    9.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
    10.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
    11.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
    12.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
    13.     </nz-card>
    14.   `
    15. })
    16. export class NzDemoCardGridCardComponent {
    17.   gridStyle = {
    18.     width: '25%',
    19.     textAlign: 'center'
    20.   };
    21. }

    内部卡片

    可以放在普通卡片内部，展示多层级结构的信息。

    Card卡片 - 图11

    带页签的卡片

    可承载更多内容。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-tabs',
    5.   template: `
    6.     <nz-card style="width: 100%;" nzTitle="Card title" [nzExtra]="extraTemplate">
    7.       <nz-card-tab>
    8.         <nz-tabset nzSize="large" [(nzSelectedIndex)]="index1">
    9.           <nz-tab nzTitle="tab1"></nz-tab>
    10.           <nz-tab nzTitle="tab2"></nz-tab>
    11.         </nz-tabset>
    12.       </nz-card-tab>
    14.     </nz-card>
    15.     <ng-template #extraTemplate>
    16.       <a>More</a>
    17.     </ng-template>
    18.     <br />
    19.     <br />
    20.     <nz-card style="width: 100%;">
    21.       <nz-card-tab>
    22.         <nz-tabset nzSize="large" [(nzSelectedIndex)]="index2">
    23.           <nz-tab nzTitle="article"></nz-tab>
    24.           <nz-tab nzTitle="app"></nz-tab>
    25.           <nz-tab nzTitle="project"></nz-tab>
    26.         </nz-tabset>
    27.       </nz-card-tab>
    28.       content{{ index2 }}
    29.     </nz-card>
    30.   `
    31. })
    32. export class NzDemoCardTabsComponent {
    33.   index1 = 0;
    34.   index2 = 0;
    35. }

    支持更多内容配置

    一种支持封面、头像、标题和描述信息的卡片。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-meta',
    5.   template: `
    6.     <nz-card style="width:300px;" [nzCover]="coverTemplate" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
    7.       <nz-card-meta nzTitle="Card title" nzDescription="This is the description" [nzAvatar]="avatarTemplate"></nz-card-meta>
    8.     </nz-card>
    9.     <ng-template #avatarTemplate>
    10.       <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
    11.     </ng-template>
    12.     <ng-template #coverTemplate>
    13.       <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
    14.     </ng-template>
    15.     <ng-template #actionSetting>
    16.       <i nz-icon nzType="setting"></i>
    17.     </ng-template>
    18.     <ng-template #actionEdit>
    19.       <i nz-icon nzType="edit"></i>
    20.     </ng-template>
    21.     <ng-template #actionEllipsis>
    22.       <i nz-icon nzType="ellipsis"></i>
    23.     </ng-template>
    24.   `
    25. })
    26. export class NzDemoCardMetaComponent {}
    1. <nz-card nzTitle="卡片标题">卡片内容</nz-card>

    分隔卡片内容区域