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卡片 - 图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 {}

    只包含内容区域。

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

    更灵活的内容展示

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

    Card卡片 - 图5

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

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

    内部卡片

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

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

    支持更多内容配置

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

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

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

      分隔卡片内容区域

      分隔页签标题区域