syncfusion-javascript-card

用途

Syncfusion JavaScript Card 组件用于创建灵活、响应式的内容容器，以结构化方式组织并展示信息。适用场景包括：产品卡片、服务介绍、团队成员档案、仪表盘或作品集布局、内容卡片（文章、博客、新闻摘要）、设置面板以及结构化数据展示等。

主要能力

纯 CSS 组件：基本功能无需 JavaScript 依赖。
灵活结构：支持头部、内容、图片和操作按钮。
多种布局：垂直（默认）与水平排列选项，并支持横向布局内堆叠内容。
可定制：提供丰富的 CSS 自定义能力，用于样式调整和响应式设计。
组件集成：可在卡片内嵌入其他 Syncfusion 控件，如 ListView、DropDownList。
可访问性：采用语义化 HTML 结构，支持 tabindex。

核心结构与 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：圆角（图片样式）

使用方式

基本卡片

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

常见模式

产品卡片：组合头部图片、标题、描述和操作按钮，用于电商或市场界面。

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

团队成员卡片：显示个人资料信息，含头部图片、姓名、角色和联系按钮。

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

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

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

水平卡片：图片与堆叠内容并排布局。

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

适用场景

产品列表：构建含图片、名称、价格和购买按钮的电商产品卡片。
仪表盘组件：创建用于指标、图表和状态显示的自包含卡片组件。
团队目录：展示员工或团队成员档案，含照片和联系信息。
内容卡片：呈现文章、博客文章或新闻条目，含特色图片和摘要。
服务展示：展示服务描述、图标和行动号召按钮。
作品集条目：显示项目展示，含图片、描述和项目链接。
设置面板：在卡片式布局中组织配置或偏好选项。
数据卡片：呈现结构化数据，含头部、内容区块和操作按钮。

安装

Card 组件需要 @syncfusion/ej2-layouts 包。详细的安装与基本设置说明请参阅 Getting Started 参考文档。

限制

资料中未明确列出该组件的具体限制。基本功能为纯 CSS 实现，无需 JavaScript 依赖；如需嵌入其他 Syncfusion 控件，则需相应组件与依赖。安装与主题配置细节暂未在资料中完整提供，建议参考官方文档获取最新信息。