卡片组件

ABP卡片组件是对Bootstrap卡片类的封装组件。它支持Bootstrap卡片组件提供的所有功能。

ABP卡片组件包含三个主要组件：CardHeader、CardBody 和 CardFooter。这些组件都有自己的类和样式输入属性

组件	选择器	输入属性
CardHeader	`abp-card-header`	`cardHeaderClass`,`cardHeaderStyle`
CardBody	`abp-card-body`	`cardBodyClass`,`cardBodyStyle`
CardFooter	`abp-card-footer`	`cardFooterClass`,`cardFooterStyle`

除了这些组件外，卡片组件还提供了以下指令：CardHeader、CardTitle、CardSubtitle、CardImgTop。

指令	选择器
CardHeader	`abp-card-header`,`[abp-card-header]`,`[abpCardHeader]`
CardTitle	`abp-card-title`,`[abp-card-title]`,`[abpCardTitle]`
CardSubtitle	`abp-card-subtitle`,`[abp-card-subtitle]`,`[abpCardSubtitle]`
CardImgTop	`abp-card-img-top`,`[abp-card-img-top]`,`[abpCardImgTop]`

使用方法

ABP卡片组件是 theme-shared 包的一部分。导入必要的组件后即可使用。请参考以下示例：

卡片主体

// card-demo.component.ts

import { Component } from '@angular/core';
import { CardComponent, CardBodyComponent } from '@abp/ng.theme.shared';

@Component({
  selector: 'app-card-demo',
  imports: [CardComponent, CardBodyComponent],
  template: ` 
    <abp-card [cardStyle]="{width: '18rem'}">
      <abp-card-body>这是卡片主体中的一些文本</abp-card-body>
    </abp-card> 
  `,
})
export class CardDemoComponent {}

查看卡片主体效果如下：

标题、文本和链接


//card-demo.component.ts
import { Component } from '@angular/core';
import { 
  CardComponent,
  CardBodyComponent,
  CardTitleDirective,
  CardSubtitleDirective
} from '@abp/ng.theme.shared';

@Component({
  selector: 'app-card-demo',
  imports: [
    CardComponent,
    CardBodyComponent,
    CardTitleDirective,
    CardSubtitleDirective
  ],
  template: ` 
    <abp-card [cardStyle]="{width: '18rem'}">
      <abp-card-body>
        <h5 abpCardTitle>卡片标题</h5>
        <h6 abpCardSubtitle class="mb-2 text-muted">卡片副标题</h6>
        <p class="card-text">
          一些快速示例文本，用于构建卡片标题并构成卡片内容的主体。
        </p>
        [卡片链接](/docs/zh-Hans/abp-docs/master/framework/ui/angular/#)
        [另一个链接](/docs/zh-Hans/abp-docs/master/framework/ui/angular/#)
      </abp-card-body>
    </abp-card> 
  `,
})
export class CardDemoComponent {}

查看卡片标题、文本和链接效果如下：

图片


//card-demo.component.ts
import { Component } from '@angular/core';
import { CardComponent, CardBodyComponent, CardImgTopDirective } from '@abp/ng.theme.shared';

@Component({
  selector: 'app-card-demo',
  imports: [CardComponent, CardBodyComponent, CardImgTopDirective],
  template: ` 
    <abp-card [cardStyle]="{width:'18rem'}">
      <img src="https://koudingke.oss-cn-hangzhou.aliyuncs.com/docs/abp-docs/zh-Hans/framework/ui/angular/..."/>
      <abp-card-body>
        <p class="card-text">
          一些快速示例文本，用于构建卡片标题并构成卡片内容的主体。
        </p>
      </abp-card-body>
    </abp-card>
  `,
})
export class CardDemoComponent {}

查看卡片图片效果如下：

列表组


//card-demo.component.ts
import { Component } from '@angular/core';
import { CardComponent } from '@abp/ng.theme.shared';

@Component({
  selector: 'app-card-demo',
  imports: [CardComponent],
  template: ` 
    <abp-card [cardStyle]="{width:'18rem'}">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">第一个项目</li>
        <li class="list-group-item">第二个项目</li>
        <li class="list-group-item">第三个项目</li>
      </ul>
    </abp-card>
  `,
})
export class CardDemoComponent {}

查看列表组效果如下：

综合示例


//card-demo.component.ts
import { Component } from '@angular/core';
import { 
  CardComponent,
  CardBodyComponent,
  CardImgTopDirective,
  CardTitleDirective
} from '@abp/ng.theme.shared';

@Component({
  selector: 'app-card-demo',
  imports: [
    CardComponent,
    CardBodyComponent,
    CardImgTopDirective,
    CardTitleDirective
  ],
  template: ` 
    <abp-card [cardStyle]="{width:'18rem'}">
      <img src="https://koudingke.oss-cn-hangzhou.aliyuncs.com/docs/abp-docs/zh-Hans/framework/assets/thinh-nguyen-aRrS37GKlVA-unsplash.jpg"/>
      <abp-card-body>
        <h5 abpCardTitle>卡片标题</h5>
        <p class="card-text">
          一些快速示例文本，用于构建卡片标题并构成卡片内容的主体。
        </p>
      </abp-card-body>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">第一个项目</li>
        <li class="list-group-item">第二个项目</li>
        <li class="list-group-item">第三个项目</li>
      </ul>
      <abp-card-body>
        [卡片链接](/docs/zh-Hans/abp-docs/master/framework/ui/angular/#)
        [另一个链接](/docs/zh-Hans/abp-docs/master/framework/ui/angular/#)
      </abp-card-body>
    </abp-card>
  `,
})
export class CardDemoComponent {}

查看综合示例效果如下：

头部和底部


//card-demo.component.ts
import { Component } from '@angular/core';
import { 
  CardComponent,
  CardHeaderComponent,
  CardBodyComponent,
  CardTitleDirective,
  CardFooterComponent
} from '@abp/ng.theme.shared';

@Component({
  selector: 'app-card-demo',
  imports: [
    CardComponent,
    CardHeaderComponent,
    CardBodyComponent,
    CardTitleDirective,
    CardFooterComponent
  ],
  template: ` 
    <abp-card class="text-center">
      <abp-card-header>特色内容</abp-card-header>
      <abp-card-body>
        <h5 abpCardTitle>特殊标题处理</h5>
        <p class="card-text">
          下方带有支持文本，作为引导到额外内容的自然过渡。
        </p>
        [前往某处](/docs/zh-Hans/abp-docs/master/framework/ui/angular/#)
      </abp-card-body>
      <abp-card-footer class="text-muted">
        2天前
      </abp-card-footer>
    </abp-card>
  `,
})
export class CardDemoComponent {}

查看头部和底部效果如下：