syncfusion-blazor-card

实现 Syncfusion Blazor 卡片组件

Syncfusion Blazor 卡片组件是一个轻量、灵活的容器，可用于组织标题、图像、文本、操作按钮和自定义样式等内容。卡片非常适合以美观的形式展示分组信息。

何时使用此技能

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

• 创建可复用的卡片容器，以展示井然有序的内容
• 展示包含标题、副标题和图像的内容
• 为卡片添加操作按钮和页脚
• 以水平或垂直布局排列卡片
• 为卡片应用自定义样式和主题
• 构建响应式卡片式 UI 布局
• 将相关内容组织到各自独立、视觉上相互区分的容器中
• 使用分隔线分隔卡片区域

组件概述

SfCard 组件提供：

• 灵活的结构：组合标题、图像、内容和页脚，构建卡片
• 多种布局：垂直（默认）和水平方向
• 丰富的内容支持：文本、图像、按钮和 HTML 元素
• 样式设置：内置 CSS 类和自定义样式选项
• 基于组件的架构：使用 CardHeader、CardContent、CardImage、CardFooter 等 Blazor 组件

文档与导航指南

开始设置卡片

📄 阅读： references/getting-started.md

• 安装和 NuGet 包
• 项目设置（WASM、Web App、Server App 的不同配置）
• 导入命名空间并注册服务
• 创建基本卡片组件
• 首次渲染的最小可运行示例

构建卡片结构

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

• 标题元素（Title、SubTitle、ImageUrl）
• 内容区域和文本位置
• 用于视觉元素的 CardImage 组件
• 用于分隔区域的分隔线
• 单张卡片中的多个内容区域
• 包含嵌套元素的复杂卡片布局

卡片布局与方向

📄 阅读： references/card-layouts-and-orientation.md

• 默认的垂直卡片布局
• 水平方向（CardOrientation.Horizontal）
• 用于垂直区域的 CardStacked 组件
• 组合多种方向
• 响应式布局和对齐方式

操作按钮和页脚

📄 阅读： references/action-buttons-and-footers.md

• CardFooter 和 CardFooterContent 组件
• 在卡片页脚中添加按钮
• 垂直按钮方向
• 按钮样式设置和集成
• 点击处理程序和交互性

样式设置与自定义

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

• CSS 类自定义（.e-card、.e-card-header 等）
• 设置标题元素和标题的样式
• 内容和分隔线样式设置
• 图像样式设置和背景
• 按钮页脚样式设置
• 主题自定义和高级样式设置

API 参考

📄 阅读： references/api-reference.md

• 所有组件的完整属性参考
• 枚举值和接受的参数
• 用于样式设置的 CSS 类列表
• 组件层次结构和集成
• 快速参考示例

快速入门示例

带标题和内容的基本卡片

@using Syncfusion.Blazor.Cards

<SfCard>
    <CardHeader Title="Welcome" SubTitle="Getting Started"></CardHeader>
    <CardContent Content="This is a basic Syncfusion Blazor Card component with header and content."></CardContent>
</SfCard>

带图像和操作按钮的卡片

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardImage Image="images/card.png"/>
    <CardHeader Title="Product Title" SubTitle="by Company"></CardHeader>
    <CardContent Content="Description of the product goes here with key features and benefits."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-outline e-primary">BUY NOW</SfButton>
            <SfButton CssClass="e-btn e-outline">DETAILS</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

带堆叠区域的水平卡片

@using Syncfusion.Blazor.Cards

<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <CardHeader Title="Syncfusion Card" />
        <CardContent Content="The Syncfusion Blazor Card component is used to display content in organized containers." />
    </CardStacked>
    <img src="images/card-image.png" alt="Card" />
</SfCard>

常见模式

模式 1：产品卡片

组合图像、标题、说明和操作按钮，用于展示产品列表。

<SfCard>
    <CardImage Image="product.png"/>
    <CardHeader Title="Product Name" SubTitle="$49.99"/>
    <CardContent Content="High-quality product description with key features."/>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">ADD TO CART</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

模式 2：个人资料卡片

使用头像和操作按钮展示用户信息。

<SfCard>
    <CardHeader Title="John Doe" SubTitle="UI Designer" ImageUrl="avatar.png"/>
    <CardContent Content="Creative designer with 5+ years experience in web and mobile design."/>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-outline">FOLLOW</SfButton>
            <SfButton CssClass="e-btn e-outline">MESSAGE</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

模式 3：多区域卡片

使用多个 CardContent 元素和分隔线来组织信息。

<SfCard>
    <CardHeader Title="City Information" />
    <CardContent EnableSeparator="true">
        <strong>Sydney</strong><br/>
        Capital of New South Wales, Australia
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Location</strong><br/>
        East coast of Australia
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Population</strong><br/>
        Approximately 4 million residents
    </CardContent>
</SfCard>

核心组件

组件	用途
SfCard	卡片根容器，可选设置 Orientation 属性
CardHeader	显示标题、副标题和可选的 ImageUrl
CardImage	在卡片中呈现图像元素
CardContent	包含文本和 HTML 内容，可选设置 EnableSeparator
CardFooter	操作按钮的页脚区域
CardFooterContent	页脚内容（按钮）的容器
CardStacked	在水平卡片中创建垂直区域

主要属性

属性	值	用途
Orientation	Vertical（默认）、Horizontal	排列卡片元素
ID	string	卡片的唯一标识符
Title	string	卡片标题栏的主标题
SubTitle	string	卡片标题栏的副标题
ImageUrl	string	标题栏图像的路径
Content	string	卡片内容文本
EnableSeparator	true/false	在区域之间添加分隔线
Image	string	CardImage 源路径

快速决策树

选择卡片布局时：

• 垂直卡片：默认布局，适用于产品列表、个人资料和信息卡片
• 水平卡片：适用于带有大图的精选项目
• 多个区域：使用带有 EnableSeparator 的 CardContent 来组织数据
• 操作按钮：交互式卡片始终使用 CardFooter + CardFooterContent

集成方式

• 与 SfButton 搭配：用于卡片页脚中的交互式操作按钮
• 与 CSS 类搭配：应用 .e-card、.e-card-header、.e-card-content 进行样式设置
• 与 HTML 搭配：直接在 CardContent 中嵌入自定义 HTML
• 与图像搭配：使用 CardImage 或 img 标签添加视觉内容

---

参考资料

• Syncfusion Blazor Card 文档
• 系统要求
• NuGet 包