• Card卡片
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-cardcomponent
      • nz-card-metacomponent
      • [nz-card-grid]directive
      • nz-card-tabcomponent

    Card卡片

    通用卡片容器。

    何时使用

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

    单独引入此组件

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

    1. import { NzCardModule } from 'ng-zorro-antd/card';

    代码演示

    Card卡片 - 图1

    典型卡片

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

    1. import { Component } from '@angular/core';
    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卡片 - 图2

    无边框

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

    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 {}

    Card卡片 - 图3

    简洁卡片

    只包含内容区域。

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

    Card卡片 - 图4

    更灵活的内容展示

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-flexible-content',
    5.   template: `
    6.     <nz-card nzHoverable style="width:240px" [nzCover]="coverTemplate">
    7.       <nz-card-meta nzTitle="Europe Street beat" nzDescription="www.instagram.com"></nz-card-meta>
    8.     </nz-card>
    9.     <ng-template #coverTemplate>
    10.       <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
    11.     </ng-template>
    12.   `
    13. })
    14. export class NzDemoCardFlexibleContentComponent {}

    Card卡片 - 图5

    栅格卡片

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

    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>
    16.           </nz-card>
    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 {}

    Card卡片 - 图6

    预加载的卡片

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

    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
    9.         [nzAvatar]="avatarTemplate"
    10.         nzTitle="Card title"
    11.         nzDescription="This is the description"
    12.       ></nz-card-meta>
    13.     </nz-card>
    14.     <nz-card style="width: 300px;margin-top: 16px" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
    15.       <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzAvatar]="{ size: 'large' }">
    16.         <nz-card-meta
    17.           [nzAvatar]="avatarTemplate"
    18.           nzTitle="Card title"
    19.           nzDescription="This is the description"
    20.         ></nz-card-meta>
    21.       </nz-skeleton>
    22.     </nz-card>
    23.     <ng-template #avatarTemplate>
    24.       <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
    25.     </ng-template>
    26.     <ng-template #actionSetting>
    27.       <i nz-icon nzType="setting"></i>
    28.     </ng-template>
    29.     <ng-template #actionEdit>
    30.       <i nz-icon nzType="edit"></i>
    31.     </ng-template>
    32.     <ng-template #actionEllipsis>
    33.       <i nz-icon nzType="ellipsis"></i>
    34.     </ng-template>
    35.   `
    36. })
    37. export class NzDemoCardLoadingComponent {
    38.   loading = true;
    39. }

    Card卡片 - 图7

    网格型内嵌卡片

    一种常见的卡片内容区隔模式。

    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.       <div nz-card-grid [ngStyle]="gridStyle">Content</div>
    14.     </nz-card>
    15.   `
    16. })
    17. export class NzDemoCardGridCardComponent {
    18.   gridStyle = {
    19.     width: '25%',
    20.     textAlign: 'center'
    21.   };
    22. }

    Card卡片 - 图8

    内部卡片

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-card-inner',
    5.   template: `
    6.     <nz-card nzTitle="Card Title">
    7.       <p style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight: 500;">
    8.         Group title
    9.       </p>
    10.       <nz-card nzType="inner" nzTitle="Inner Card Title" [nzExtra]="extraTemplate">
    11.         <a>Inner Card Content</a>
    12.       </nz-card>
    13.       <nz-card nzType="inner" style="margin-top:16px;" nzTitle="Inner Card Title" [nzExtra]="extraTemplate">
    14.         <a>Inner Card Content</a>
    15.       </nz-card>
    16.     </nz-card>
    17.     <ng-template #extraTemplate>
    18.       <a>More</a>
    19.     </ng-template>
    20.   `
    21. })
    22. export class NzDemoCardInnerComponent {}

    Card卡片 - 图9

    带页签的卡片

    可承载更多内容。

    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>
    13.       content{{ index1 }}
    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. }

    Card卡片 - 图10

    支持更多内容配置

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

    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
    8.         nzTitle="Card title"
    9.         nzDescription="This is the description"
    10.         [nzAvatar]="avatarTemplate"
    11.       ></nz-card-meta>
    12.     </nz-card>
    13.     <ng-template #avatarTemplate>
    14.       <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
    15.     </ng-template>
    16.     <ng-template #coverTemplate>
    17.       <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
    18.     </ng-template>
    19.     <ng-template #actionSetting>
    20.       <i nz-icon nzType="setting"></i>
    21.     </ng-template>
    22.     <ng-template #actionEdit>
    23.       <i nz-icon nzType="edit"></i>
    24.     </ng-template>
    25.     <ng-template #actionEllipsis>
    26.       <i nz-icon nzType="ellipsis"></i>
    27.     </ng-template>
    28.   `
    29. })
    30. export class NzDemoCardMetaComponent {}

    API

    1. <nz-card nzTitle="卡片标题">卡片内容</nz-card>

    nz-cardcomponent

    参数说明类型默认值
    [nzActions]卡片操作组，位置在卡片底部Array<TemplateRef<void>>-
    [nzBodyStyle]内容区域自定义样式{ [key: string]: string }-
    [nzBordered]是否有边框booleantrue
    [nzCover]卡片封面TemplateRef<void>-
    [nzExtra]卡片右上角的操作区域string | TemplateRef<void>-
    [nzHoverable]鼠标移过时可浮起booleanfalse
    [nzLoading]当卡片内容还在加载中时，可以用 loading 展示一个占位booleanfalse
    [nzTitle]卡片标题string | TemplateRef<void>-
    [nzType]卡片类型，可设置为 inner 或 不设置'inner'-
    [nzSize]卡片的尺寸'default' | 'small''default'

    nz-card-metacomponent

    参数说明类型默认值
    [nzAvatar]头像/图标TemplateRef<void>-
    [nzDescription]描述内容string | TemplateRef<void>-
    [nzTitle]标题内容string | TemplateRef<void>-

    [nz-card-grid]directive

    分隔卡片内容区域

    nz-card-tabcomponent

    分隔页签标题区域