syncfusion-javascript-card

实现 Syncfusion 卡片组件

Card 是一个轻量级的纯 CSS 布局组件，用于创建灵活的内容容器。它提供了一种结构化的方式来组织和展示信息，并支持标题、图像、操作按钮和自定义样式。

何时使用此技能

在以下情况下使用 Syncfusion Card 组件：

• 在结构清晰的容器分区中展示内容
• 构建产品卡片、服务介绍或团队成员简介
• 创建包含多个卡片元素的仪表板或作品集布局
• 在同一容器中组合标题、图像和操作按钮
• 在多个内容分区中应用一致的样式
• 在卡片容器中集成其他 Syncfusion 组件

主要功能

• 纯 CSS 组件：基本功能无需 JavaScript 依赖
• 灵活的结构：支持标题、内容、图像和操作按钮
• 多种布局：垂直（默认）和水平对齐选项
• 可自定义：提供丰富的 CSS 自定义选项，支持样式设置和响应式设计
• 组件集成：可在卡片中嵌入其他 Syncfusion 控件（ListView、DropDownList 等）
• 无障碍支持：采用语义化 HTML 结构，并支持 tabindex

组件概览

核心结构

e-card (root)
├── e-card-header (optional)
│   ├── e-card-header-image (optional)
│   └── e-card-header-caption
│       ├── e-card-header-title
│       └── e-card-sub-title (optional)
├── e-card-image (optional)
│   └── e-card-title (optional caption)
├── e-card-content
├── e-card-separator (optional dividers)
└── e-card-actions (optional)
    ├── e-card-btn (buttons)
    └── anchor elements

主要 CSS 类

类	用途	使用方式
e-card	卡片根元素	必需
e-card-header	标题容器	可选
e-card-header-caption	标题/副标题包装器	对标题文本分组
e-card-header-title	主要标题	主标题
e-card-sub-title	副标题文本	次级标题
e-card-header-image	标题图像元素	标题装饰
e-card-image	全宽卡片图像	特色图像
e-card-title	图像说明/标题	叠加在图像上
e-card-content	主要内容区域	正文文本/元素
e-card-separator	视觉分隔线	分隔各个部分
e-card-actions	操作按钮容器	按钮组
e-card-btn	单个按钮	可操作元素
e-card-vertical	垂直对齐	按钮布局选项
e-card-horizontal	水平布局	并排元素
e-card-stacked	水平布局内的堆叠样式	水平布局中的垂直分区
e-card-corner	圆角	图像样式

文档和导航指南

快速入门

📄 阅读： references/getting-started.md

• 使用 @syncfusion/ej2-layouts 安装和设置软件包
• 基本卡片标记结构
• CSS 导入和主题配置
• 依赖项和开发环境
• 使用最简示例进行首次渲染

标题和内容

📄 阅读： references/header-and-content.md

• 包含标题和副标题的标题结构
• 添加并定位标题图像
• 副标题支持和样式设置
• 内容分区和文本区域
• 标题图像对齐（之前/之后）

操作按钮

📄 阅读： references/action-buttons.md

• 操作按钮结构和标记
• 水平对齐（默认行为）
• 使用 e-card-vertical 进行垂直对齐
• 使用 e-card-btn 类设置按钮样式
• 混合使用按钮和锚点标签

卡片布局和图像

📄 阅读： references/card-layout.md

• 全宽卡片图像（e-card-image）
• 使用叠加层显示图像标题和说明
• 自定义图像标题位置（4 个角）
• 使用分隔线分隔各个部分
• 水平卡片布局（e-card-horizontal）
• 水平布局中的堆叠内容

自定义和样式

📄 阅读： references/customization-and-styling.md

• CSS 自定义模式和最佳实践
• 针对特定元素的样式设置（卡片、页眉、内容、按钮、图像）
• 布局自定义（外边距、内边距、间距）
• 颜色、字体和排版调整
• 响应式设计注意事项
• 主题集成和 CSS 变量

组件集成

📄 阅读： references/component-integration.md

• 在卡片中嵌入其他 Syncfusion 组件
• 集成 ListView 以呈现列表内容
• 集成 DropDownList 和其他控件
• 复合 UI 布局和模式
• 待办事项列表和高级示例

---

快速入门示例

基本卡片

<div class="e-card">
    <div class="e-card-content">
        Sample Card Content
    </div>
</div>

带页眉和内容的卡片

<div class="e-card">
    <div class="e-card-header">
        <div class="e-card-header-caption">
            <div class="e-card-header-title">Card Title</div>
        </div>
    </div>
    <div class="e-card-content">
        Card content goes here
    </div>
</div>

带页眉图像和操作的卡片

<div class="e-card">
    <div class="e-card-header">
        <div class="e-card-header-image"></div>
        <div class="e-card-header-caption">
            <div class="e-card-header-title">Title</div>
            <div class="e-card-sub-title">Subtitle</div>
        </div>
    </div>
    <div class="e-card-content">
        Content here
    </div>
    <div class="e-card-actions">
        <button class="e-card-btn">Button 1</button>
        <button class="e-card-btn">Button 2</button>
    </div>
</div>

---

常见模式

1. 产品卡片模式

结合页眉图像、标题、描述和操作按钮，用于电商或市场平台界面：

<div class="e-card">
    <div class="e-card-image"></div>
    <div class="e-card-header-caption">
        <div class="e-card-header-title">Product Name</div>
        <div class="e-card-sub-title">Price/Category</div>
    </div>
    <div class="e-card-content">Product description</div>
    <div class="e-card-actions">
        <button class="e-card-btn">Add to Cart</button>
        <button class="e-card-btn">Details</button>
    </div>
</div>

2. 团队成员卡片模式

通过页眉图像、姓名、职位和联系按钮展示个人资料信息：

<div class="e-card">
    <div class="e-card-header">
        <div class="e-card-header-image"></div>
        <div class="e-card-header-caption">
            <div class="e-card-header-title">Name</div>
            <div class="e-card-sub-title">Role/Title</div>
        </div>
    </div>
    <div class="e-card-content">Bio or description</div>
    <div class="e-card-actions">
        <button class="e-card-btn">Email</button>
        <button class="e-card-btn">LinkedIn</button>
    </div>
</div>

3. 多分区卡片模式

使用分隔线将卡片划分为逻辑分区：

<div class="e-card">
    <div class="e-card-title">Section 1</div>
    <div class="e-card-separator"></div>
    <div class="e-card-content">Content 1</div>
    <div class="e-card-separator"></div>
    <div class="e-card-content">Content 2</div>
</div>

4. 横向卡片模式

采用图片与堆叠内容并排的布局：

<div class="e-card e-card-horizontal">
    <img src="image.png" alt="Sample">
    <div class="e-card-stacked">
        <div class="e-card-header-title">Title</div>
        <div class="e-card-content">Description</div>
        <div class="e-card-actions">
            <button class="e-card-btn">Action</button>
        </div>
    </div>
</div>

---

常见用例

1. 产品列表：构建包含图片、名称、价格和购买按钮的电商产品卡片
2. 仪表板小组件：创建用于显示指标、图表和状态的独立卡片小组件
3. 团队目录：展示员工或团队成员的个人资料、照片和联系信息
4. 内容卡片：呈现带有特色图片和摘要的文章、博客文章或新闻
5. 服务项目：展示包含描述、图标和行动号召按钮的服务
6. 作品集项目：展示带有图片、描述和项目链接的项目案例
7. 设置面板：以卡片布局整理配置或偏好选项
8. 数据卡片：通过页眉、内容分区和操作按钮呈现结构化数据

---

安装

Card 组件需要 @syncfusion/ej2-layouts 包。有关详细设置说明，请参阅 入门 参考文档。

---

后续步骤

1. 开始：阅读 入门，了解安装和基本设置
2. 构建：从上方的“常见模式”部分选择一种模式
3. 增强：根据需要添加页眉、图像或按钮
4. 设置样式：使用“自定义和样式”指南，使其符合你的设计
5. 集成：如有需要，使用“组件集成”指南嵌入其他组件