syncfusion-angular-card

实现 Syncfusion Angular 卡片

卡片是一个轻量级、基于 CSS 的布局组件，可提供灵活的容器来展示结构化内容。它非常适合用于创建包含标题、图片、文本和交互元素的可复用内容块。

何时使用此技能

当用户需要执行以下操作时，请使用此技能：

• 使用结构化内容创建基于卡片的布局
• 为卡片添加包含标题、副标题和图片的页眉
• 在卡片中添加图片和说明文字
• 为卡片添加交互式操作按钮
• 水平排列卡片元素
• 使用 CSS 自定义卡片外观
• 构建灵活、响应式的内容容器
• 在卡片中集成其他 Syncfusion 组件

组件概述

Syncfusion Angular Card（e-card）是一个纯 CSS 组件，没有 JavaScript 依赖项。它提供语义化的 HTML 结构和 CSS 类，让你能够构建专业的卡片布局，具有以下特点：

• 灵活的结构： 纯 CSS 组合，无需复杂依赖项
• 语义化元素： 基于类的清晰架构，用于页眉、内容和操作区域
• 响应式设计： 兼容 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 — 区域之间的视觉分隔线

---

文档和导航指南

入门

📄 阅读： 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 模式

---

快速入门示例

以下是一个包含页眉、内容和操作按钮的最小可运行卡片：

<div class="e-card" style="max-width: 400px;">
  
  <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>

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

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

将 CSS 主题添加到 styles.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>

---

关键属性和类参考

类	用途	用法
e-card	根容器	所有卡片都必须使用
e-card-header	标题包装器	组合标题、副标题和图像
e-card-header-caption	标题内容容器	包裹标题和副标题
e-card-header-title	主标题	卡片标题
e-card-sub-title	副标题文本	标题的补充信息
e-card-header-image	标题图像	头像或标题配图
e-card-content	内容区域	卡片主体内容
e-card-image	内容图像	全宽或指定尺寸的图像
e-card-title	图像叠加标题	图像上的说明文字
e-card-separator	视觉分隔线	分隔不同区域
e-card-actions	按钮容器	组合交互元素
e-card-btn	操作按钮样式	交互式按钮元素
e-card-vertical	垂直对齐	将操作按钮垂直排列
e-card-horizontal	水平布局	将元素并排排列
e-card-stacked	垂直分区	水平布局中的垂直区域
e-card-corner	圆角	为图像添加边框圆角

---

组件架构

Card 组件采用分层 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 强制水平布局中的内容垂直排列

---

常见用例

1. 商品目录： 展示商品及其图像、描述和购买按钮
2. 用户档案： 展示用户信息、头像和操作按钮
3. 博客文章： 创建带有图像、摘要和阅读按钮的文章预览
4. 仪表板小组件： 构建包含数据和交互元素的仪表板卡片
5. 待办事项列表： 将卡片与 ListView 组件结合，用于任务管理
6. 图像画廊： 展示图像及其说明和元数据
7. 团队成员： 展示员工档案及其联系信息和职位信息
8. 功能亮点： 通过图标和描述展示功能

---

后续步骤

根据需求选择学习路径：

• 刚开始使用卡片？ 从入门指南开始，创建第一张卡片
• 要构建复杂标题？ 阅读卡片标题，了解高级标题模式
• 要为卡片添加样式？ 查看样式与自定义，了解 CSS 技巧
• 要创建布局？ 探索水平布局，了解并排排列方式
• 需要完整示例？ 每个参考文件都包含完整且可直接复制粘贴的代码

---

有疑问？ 每个参考文件都提供了详细示例和边缘情况说明。请参阅与当前需求相符的主题。