syncfusion-blazor-card

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Card Component

实现Syncfusion Blazor Card组件

The Syncfusion Blazor Card component is a lightweight, flexible container for organizing content with headers, images, text, action buttons, and custom styling. Cards are ideal for displaying grouped information in a visually appealing format.

Syncfusion Blazor Card组件是一款轻量灵活的容器组件，可用于组织包含标题、图片、文本、操作按钮及自定义样式的内容。卡片非常适合以视觉美观的格式展示分组信息。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Create reusable card containers for displaying organized content
Display content with headers, subtitles, and images
Add action buttons and footers to cards
Arrange cards in horizontal or vertical layouts
Apply custom styling and theming to cards
Build responsive card-based UI layouts
Organize related content into discrete, visually distinct containers
Implement dividers to separate card sections

在以下场景中可使用本技能：

创建可复用的卡片容器来展示结构化内容
展示带有标题、副标题和图片的内容
为卡片添加操作按钮和页脚
以水平或垂直布局排列卡片
为卡片应用自定义样式和主题
构建基于卡片的响应式UI布局
将相关内容组织到独立的、视觉区分明显的容器中
实现分隔线来区分卡片的不同部分

Component Overview

组件概述

The SfCard component provides:

Flexible Structure: Compose cards with headers, images, content, and footers
Multiple Layouts: Vertical (default) and horizontal orientations
Rich Content Support: Text, images, buttons, and HTML elements
Styling: Built-in CSS classes and custom styling options
Component-Based Architecture: Use Blazor components like
```
CardHeader
```
,
```
CardContent
```
,
```
CardImage
```
,
```
CardFooter
```

SfCard组件提供以下特性：

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

Documentation and Navigation Guide

文档与导航指南

Getting Started with Card Setup

卡片组件入门设置

📄 Read: references/getting-started.md

Installation and NuGet packages
Project setup (WASM, Web App, Server App variations)
Import namespaces and register services
Basic card component creation
Minimal working example with first render

📄 阅读文档：references/getting-started.md

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

Building Card Structure

构建卡片结构

📄 Read: references/building-card-structure.md

Header elements (Title, SubTitle, ImageUrl)
Content sections and text placement
CardImage component for visual elements
Dividers to separate sections
Multiple content sections in single card
Complex card layouts with nested elements

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

标题元素（Title、SubTitle、ImageUrl）
内容区域与文本排版
用于视觉元素的CardImage组件
分隔线区分不同区域
单卡片中的多内容区域
包含嵌套元素的复杂卡片布局

Card Layouts and Orientation

卡片布局与方向

📄 Read: references/card-layouts-and-orientation.md

Default vertical card layout
Horizontal orientation (CardOrientation.Horizontal)
CardStacked component for vertical sections
Combining multiple orientations
Responsive layouts and alignment

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

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

Action Buttons and Footers

操作按钮与页脚

📄 Read: references/action-buttons-and-footers.md

CardFooter and CardFooterContent components
Adding buttons to card footers
Vertical button orientation
Button styling and integration
Click handlers and interactivity

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

CardFooter与CardFooterContent组件
为卡片页脚添加按钮
按钮垂直排列
按钮样式与集成
点击事件处理与交互性

Styling and Customization

样式与定制

📄 Read: references/styling-and-customization.md

CSS class customization (.e-card, .e-card-header, etc.)
Styling header elements and titles
Content and divider styling
Image styling and backgrounds
Button footer styling
Theme customization and advanced styling

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

CSS类定制（.e-card、.e-card-header等）
标题元素与标题样式
内容与分隔线样式
图片样式与背景设置
页脚按钮样式
主题定制与高级样式设置

API Reference

API参考

📄 Read: references/api-reference.md

Complete property reference for all components
Enumeration values and accepted parameters
CSS class listings for styling
Component hierarchy and integration
Quick reference examples

📄 阅读文档：references/api-reference.md

所有组件的完整属性参考
枚举值与可接受参数
用于样式的CSS类列表
组件层级与集成方式
快速参考示例

Quick Start Example

快速入门示例

Basic Card with Header and Content

带标题和内容的基础卡片

razor

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

razor

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

Card with Image and Action Buttons

带图片和操作按钮的卡片

razor

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

razor

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

Horizontal Card with Stacked Section

带堆叠区域的水平卡片

razor

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

razor

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

Common Patterns

常见模式

Pattern 1: Product Card

模式1：产品卡片

Combine image, header, description, and action buttons for product listings.

razor

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

结合图片、标题、描述和操作按钮，用于产品列表展示。

razor

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

Pattern 2: Profile Card

模式2：个人资料卡片

Display user information with avatar and action buttons.

razor

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

展示用户信息，包含头像和操作按钮。

razor

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

Pattern 3: Multi-Section Card

模式3：多区域卡片

Use multiple CardContent elements with dividers to organize information.

razor

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

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

razor

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

Key Components

核心组件

Component	Purpose
`SfCard`	Root card container with optional Orientation property
`CardHeader`	Displays Title, SubTitle, and optional ImageUrl
`CardImage`	Renders image elements within card
`CardContent`	Contains text and HTML content with optional EnableSeparator
`CardFooter`	Footer section for action buttons
`CardFooterContent`	Container for footer content (buttons)
`CardStacked`	Creates vertical section in horizontal cards

组件	用途
`SfCard`	卡片根容器，可选Orientation属性
`CardHeader`	展示Title、SubTitle和可选的ImageUrl
`CardImage`	在卡片内渲染图片元素
`CardContent`	包含文本和HTML内容，可选EnableSeparator属性
`CardFooter`	用于放置操作按钮的页脚区域
`CardFooterContent`	页脚内容（按钮）的容器
`CardStacked`	在水平卡片中创建垂直区域

Key Properties

核心属性

Property	Values	Purpose
`Orientation`	`Vertical` (default), `Horizontal`	Arranges card elements
`ID`	string	Unique identifier for card
`Title`	string	Card header main title
`SubTitle`	string	Card header subtitle
`ImageUrl`	string	Path to header image
`Content`	string	Card content text
`EnableSeparator`	true/false	Adds divider between sections
`Image`	string	CardImage source path

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

Quick Decision Tree

快速决策树

When choosing card layout:

Vertical cards: Default, use for product listings, profiles, information cards
Horizontal cards: Use for featured items with large images
Multiple sections: Use CardContent with EnableSeparator for organized data
Action buttons: Always use CardFooter + CardFooterContent for interactive cards

选择卡片布局时：

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

Integration Points

集成要点

With SfButton: Use for interactive action buttons in card footers
With CSS Classes: Apply .e-card, .e-card-header, .e-card-content for styling
With HTML: Embed custom HTML directly in CardContent
With Images: Use CardImage or img tags for visual content

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

References

参考链接

Syncfusion Blazor Card Documentation
System Requirements
NuGet Packages

Syncfusion Blazor Card官方文档
系统要求
NuGet包