syncfusion-react-cards

实现 React 卡片组件

Syncfusion React 卡片组件是一个轻量、灵活的容器，可用于展示结构化内容，并支持标题、图像、分隔线、操作按钮和集成组件。

何时使用此技能

在以下情况下使用此技能：

• 创建简单或复杂的卡片式布局
• 构建带有标题、图像和操作区的卡片
• 在卡片中使用分隔符或分隔线展示内容
• 为卡片添加操作按钮（水平或垂直）
• 创建带有堆叠内容的水平卡片布局
• 在卡片中嵌入其他 Syncfusion 组件（ListView、Charts 等）
• 使用图像、标题和位置自定义卡片外观
• 构建响应式卡片式用户界面

导航指南

根据要实现的内容，参阅以下指南：

入门

📄 阅读： references/getting-started.md

• 软件包安装与设置
• 基本卡片结构和 CSS 导入
• 简单卡片示例
• 必需的依赖项

卡片结构和标题

📄 阅读： references/card-structure-headers.md

• 卡片根元素和类
• 包含标题和副标题的标题结构
• 标题图像及其位置
• 内容区和组织方式

图像、标题和分隔线

📄 阅读： references/images-titles-dividers.md

• 向卡片添加图像
• 图像标题和叠加效果
• 用于分隔内容区的分隔线
• 标题位置和自定义

操作按钮

📄 阅读： references/action-buttons.md

• 向卡片添加按钮和链接
• 水平按钮布局（默认）
• 垂直按钮对齐
• 图标按钮和样式

布局和高级功能

📄 阅读： references/layouts-customization.md

• 水平卡片布局
• 卡片内的堆叠区块
• 图像标题位置类
• CSS 定位和样式

嵌入组件

📄 阅读： references/embedding-components.md

• 将 ListView 集成到卡片中
• 嵌入图表和数据组件
• 动态内容模式
• 实用场景

快速开始示例

带标题和内容的基本卡片：

import React from 'react';
import '@syncfusion/ej2-layouts/styles/tailwind3.css';

export default function BasicCard() {
  return (
    <div className="e-card">
      <div className="e-card-header">
        <div className="e-card-header-caption">
          <div className="e-card-header-title">Card Title</div>
          <div className="e-card-sub-title">Subtitle</div>
        </div>
      </div>
      <div className="e-card-content">
        This is the main content of the card. Add any HTML content here.
      </div>
    </div>
  );
}

带操作按钮的卡片：

import React from 'react';

export default function CardWithButtons() {
  return (
    <div className="e-card">
      <div className="e-card-header-title">Product Card</div>
      <div className="e-card-content">
        High-quality product description goes here.
      </div>
      <div className="e-card-actions">
        <button className="e-card-btn">View</button>
        <button className="e-card-btn">Buy Now</button>
        <button className="e-card-btn">Share</button>
      </div>
    </div>
  );
}

水平布局卡片：

import React from 'react';

export default function HorizontalCard() {
  return (
    <div className="e-card e-card-horizontal" style={{ width: '400px' }}>
      <img src="./image.png" alt="Card" style={{ height: '180px' }} />
      <div className="e-card-stacked">
        <div className="e-card-header">
          <div className="e-card-header-caption">
            <div className="e-card-header-title">Title</div>
          </div>
        </div>
        <div className="e-card-content">
          Content displayed vertically within horizontal layout
        </div>
      </div>
    </div>
  );
}

常见模式

模式 1：用户资料卡片

组合标题图像、标题和操作按钮，为用户列表或团队页面创建资料卡片。

<div className="e-card">
  <div className="e-card-header">
    <div className="e-card-header-image" style={{ backgroundImage: 'url(./profile.jpg)', width: '60px', height: '60px', borderRadius: '50%' }} />
    <div className="e-card-header-caption">
      <div className="e-card-header-title">John Doe</div>
      <div className="e-card-sub-title">Product Manager</div>
    </div>
  </div>
  <div className="e-card-content">
    Experienced in building user-centric products.
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Message</button>
    <button className="e-card-btn">Follow</button>
  </div>
</div>

模式 2：带图像的产品卡片

在产品列表中使用卡片图像和标题，并展示价格和操作按钮。

<div className="e-card">
  <div className="e-card-image" style={{ backgroundImage: 'url(./product.jpg)', height: '200px' }}>
    <div className="e-card-title">Product Name</div>
  </div>
  <div className="e-card-content">
    <p>$99.99</p>
    <p>High-quality product with excellent features</p>
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Add to Cart</button>
    <button className="e-card-btn">Buy Now</button>
  </div>
</div>

模式 3：博客文章卡片

组合标题、分隔线和内容区，创建博客文章卡片。

<div className="e-card">
  <div className="e-card-header-title">Blog Post Title</div>
  <div className="e-card-sub-title">Published on March 26, 2026</div>
  <div className="e-card-separator" />
  <div className="e-card-content">
    Blog post excerpt and content goes here...
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Read More</button>
    <button className="e-card-btn">Share</button>
  </div>
</div>

主要 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-actions	按钮容器
e-card-btn	单个按钮的样式
e-card-vertical	垂直按钮对齐
e-card-separator	分隔线元素
e-card-horizontal	水平卡片布局
e-card-stacked	水平布局中的垂直堆叠
e-card-corner	图像圆角

基本设置

1. 安装软件包：

   npm install @syncfusion/ej2-layouts
   

2. 导入 CSS：

   @import '@syncfusion/ej2-layouts/styles/tailwind3.css';
   

3. 创建卡片元素：

   • 为根 div 添加 e-card 类
   • 按需添加标题、内容、图像或按钮
   • 应用其他类以设置布局和样式

常见用例

• 仪表板卡片：显示关键指标或数据摘要
• 产品列表：展示带图片和价格的产品
• 团队成员：显示用户资料和联系信息
• 博客文章：展示带元信息的文章预览
• 功能亮点：介绍功能及其描述
• 数据报告：在卡片中整理表格或列表数据
• 通知卡片：显示提醒或消息
• 设置卡片：将相关设置归为一组

---

后续步骤： 根据具体需求选择参考示例，然后按照提供的示例和模式实现卡片布局。