syncfusion-angular-card

用途

Syncfusion Angular Card（e-card）是一个轻量级、基于 CSS 的布局组件，为 Angular 应用提供灵活的内容容器，用于展示结构化内容。它适合创建可复用的内容块，包含标题、图片、文本和交互元素。

主要能力

灵活结构：纯 CSS 组合，无复杂依赖，不依赖 JavaScript。
语义化元素：基于清晰的类架构组织头部、内容和操作区。
响应式设计：可与 CSS grid、flexbox 及响应式布局配合使用。
组件集成：可在卡片内承载其他 Syncfusion 组件。
高度可定制：通过完整 CSS 控制外观与行为。

关键 CSS 类包括：

e-card — 根卡片容器
e-card-header — 头部区域包装
e-card-content — 主内容区
e-card-image — 图片容器
e-card-actions — 操作按钮容器
e-card-horizontal — 水平布局模式
e-card-separator — 区域间视觉分隔线

其他类：e-card-header-caption（头部内容容器）、e-card-header-title（主标题）、e-card-sub-title（副标题）、e-card-header-image（头部图片/头像）、e-card-title（图片叠加标题）、e-card-btn（操作按钮样式）、e-card-vertical（按钮垂直排列）、e-card-stacked（水平布局中的垂直区域）、e-card-corner（图片圆角）。

使用方式

快速开始示例

在模板中构建一个包含头部、内容和操作按钮的最小卡片：

<!-- In your app.component.html or template -->
<div class="e-card" style="max-width: 400px;">
  <!-- Header Section -->
  <div class="e-card-header">
    <div class="e-card-header-caption">
      <div class="e-card-header-title">Card Title</div>
      <div class="e-card-sub-title">Subtitle or description</div>
    </div>
  </div>

  <!-- Content Section -->
  <div class="e-card-content">
    Your main content goes here. This can be text, images, or any HTML elements.
  </div>

  <!-- Action Buttons Section -->
  <div class="e-card-actions">
    <button class="e-card-btn">Action 1</button>
    <button class="e-card-btn">Action 2</button>
  </div>
</div>

组件中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {}

在 styles.css 中添加 CSS 主题：

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material3.css';

常见模式

模式 1：带图片的产品卡片

<div class="e-card" style="max-width: 300px;">
  <div class="e-card-image" style="background-image: url('product.jpg'); height: 200px;"></div>
  <div class="e-card-header">
    <div class="e-card-header-title">Product Name</div>
  </div>
  <div class="e-card-content">Product description here</div>
  <div class="e-card-actions">
    <button class="e-card-btn">Add to Cart</button>
  </div>
</div>

模式 2：用户资料卡片

<div class="e-card" style="max-width: 350px;">
  <div class="e-card-header">
    <div class="e-card-header-image" style="width: 60px; height: 60px; background-image: url('avatar.jpg');"></div>
    <div class="e-card-header-caption">
      <div class="e-card-header-title">John Doe</div>
      <div class="e-card-sub-title">Senior Developer</div>
    </div>
  </div>
  <div class="e-card-content">Bio or description text</div>
  <div class="e-card-actions">
    <button class="e-card-btn">Follow</button>
    <button class="e-card-btn">Message</button>
  </div>
</div>

模式 3：水平卡片布局

<div class="e-card e-card-horizontal" style="max-width: 500px;">
  <img src="image.jpg" alt="Image" style="height: 200px; width: 200px;">
  <div class="e-card-stacked">
    <div class="e-card-header">
      <div class="e-card-header-title">Title</div>
    </div>
    <div class="e-card-content">Content description</div>
  </div>
</div>

组件架构

卡片采用分层 CSS 结构：

Card Container (e-card)
├── Header Section (e-card-header) [optional]
│   ├── Header Image (e-card-header-image) [optional]
│   └── Header Caption (e-card-header-caption)
│       ├── Header Title (e-card-header-title)
│       └── Subtitle (e-card-sub-title) [optional]
├── Image Container (e-card-image) [optional]
│   └── Image Title (e-card-title) [optional]
├── Content Section (e-card-content)
├── Separator (e-card-separator) [optional]
└── Actions Container (e-card-actions) [optional]
    ├── Button (e-card-btn)
    └── Link Elements

布局模式：

垂直（默认）：所有元素垂直堆叠
水平：使用 e-card-horizontal 类使元素并排排列
水平内堆叠：使用 e-card-stacked 在水平布局中强制垂直流

文档导航

入门：references/getting-started.md — 包安装与设置、Angular CLI 与环境配置、添加 CSS 主题导入、基础卡片结构、首个可用示例。
卡片头部：references/card-headers.md — 头部结构与包装元素、标题与副标题、头部图片、图片定位、圆角与图片样式。
卡片图片：references/card-images.md — 向内容添加图片、尺寸设置、带叠加的图片标题与说明、分隔线、在卡片内集成其他组件。
操作按钮：references/action-buttons.md — 创建按钮与链接、水平对齐（默认）、垂直对齐、图标按钮与自定义样式、交互控制。
水平布局：references/horizontal-layout.md — 并排元素对齐、使用 e-card-horizontal、使用 e-card-stacked 堆叠区域、混合布局、图片与垂直内容组合。
样式与定制：references/styling-customization.md — CSS 结构与类选择器、自定义外观、头部/内容/按钮样式、图片与分隔线定制、主题集成、高级 CSS 模式。

适用场景

产品目录：展示产品图片、描述和购买按钮
用户资料：显示用户信息、头像和操作按钮
博客文章：创建带图片、摘要和阅读按钮的文章预览
仪表盘小组件：构建带数据和交互元素的仪表盘卡片
待办列表：结合 ListView 组件进行任务管理
图片画廊：展示带说明和元数据的图片
团队成员：展示员工资料、联系方式和角色信息
功能亮点：用图标和描述展示功能

限制

资料未提供关于收费、价格、平台兼容性、性能效果或具体使用步骤的额外说明。该组件为纯 CSS 实现，不依赖 JavaScript；其余限制暂未提供。