syncfusion-blazor-accordion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Blazor Accordion Component

Syncfusion Blazor Accordion 组件

The Blazor Accordion is a vertically collapsible content container that displays one or more panels. Each panel consists of a header and expandable content section. It supports single or multiple panel expansion, nested accordions, animations, and is fully accessible with WCAG compliance.

Blazor Accordion是一个垂直可折叠的内容容器，可显示一个或多个面板。每个面板包含一个标题和可展开的内容区域。它支持单面板或多面板展开、嵌套折叠面板、动画效果，并且完全符合WCAG标准，具备无障碍访问能力。

When to Use This Skill

适用场景

Use this skill when you need to:

Create collapsible content sections in Blazor applications
Build FAQ sections with expandable answers
Implement navigation menus with nested items
Organize large amounts of content in compact, expandable panels
Create wizard-like interfaces with sequential steps
Display hierarchical data with nested accordions
Implement accessible collapsible components with keyboard navigation
Configure expand/collapse animations and behavior
Bind dynamic data to accordion items
Customize accordion appearance and styling

当你需要以下功能时，可使用本技能：

在Blazor应用中创建可折叠内容区域
构建带有可展开答案的FAQ板块
实现包含嵌套项的导航菜单
将大量内容组织到紧凑的可展开面板中
创建带有连续步骤的向导式界面
使用嵌套折叠面板展示层级数据
实现支持键盘导航的无障碍可折叠组件
配置展开/折叠动画及行为
为折叠面板项绑定动态数据
自定义折叠面板的外观和样式

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installing Syncfusion.Blazor.Navigations NuGet package
Namespace imports and service registration
Adding theme and script references
Creating your first accordion with basic items
Implementing accordions using templates (HeaderTemplate, ContentTemplate)

📄 阅读： references/getting-started.md

安装Syncfusion.Blazor.Navigations NuGet包
命名空间导入与服务注册
添加主题和脚本引用
创建首个基础折叠面板
使用模板（HeaderTemplate、ContentTemplate）实现折叠面板

Expand Modes and Behavior

展开模式与行为

📄 Read: references/expand-modes.md

Single expand mode (only one panel open at a time)
Multiple expand mode (multiple panels can be open)
Configuring initial expanded state with ExpandedIndices
Setting individual item expansion with Expanded property
Controlling default expand behavior

📄 阅读： references/expand-modes.md

单展开模式（同一时间仅一个面板处于展开状态）
多展开模式（可同时展开多个面板）
使用ExpandedIndices配置初始展开状态
使用Expanded属性设置单个项的展开状态
控制默认展开行为

Content Rendering

内容渲染

📄 Read: references/content-rendering.md

LoadOnDemand property for performance optimization
Rendering all content at initial load
On-demand content loading (default behavior)
Performance considerations for large accordions

📄 阅读： references/content-rendering.md

用于性能优化的LoadOnDemand属性
初始加载时渲染所有内容
按需加载内容（默认行为）
大型折叠面板的性能考量

Data Binding and Events

数据绑定与事件

📄 Read: references/data-binding-events.md

Binding local data with foreach loops
Using HeaderTemplate and ContentTemplate for dynamic content
Handling Created and Destroyed lifecycle events
Responding to Clicked events
Managing Expanding/Expanded and Collapsing/Collapsed events
Preventing default expand/collapse behavior with event args

📄 阅读： references/data-binding-events.md

使用foreach循环绑定本地数据
使用HeaderTemplate和ContentTemplate渲染动态内容
处理Created和Destroyed生命周期事件
响应Clicked事件
管理Expanding/Expanded和Collapsing/Collapsed事件
通过事件参数阻止默认的展开/折叠行为

Customization and Styling

自定义与样式

📄 Read: references/customization-styling.md

Customizing accordion border and appearance
Styling accordion items with CSS
Customizing header content and expand/collapse icons
Applying hover and selected item styles
Using CssClass property on individual items
CSS class structure and available classes
Theme integration and responsive design

📄 阅读： references/customization-styling.md

自定义折叠面板的边框与外观
使用CSS为折叠面板项设置样式
自定义标题内容和展开/折叠图标
设置悬停和选中项样式
在单个项上使用CssClass属性
CSS类结构及可用类
主题集成与响应式设计

Accessibility and Animations

无障碍与动画

📄 Read: references/accessibility-animations.md

WCAG 2.2 and Section 508 compliance
ARIA attributes and screen reader support
Keyboard navigation (Arrow keys, Space/Enter, Home/End)
RTL support and color contrast
Configuring expand/collapse animations
Animation effects (SlideDown, SlideUp, FadeIn, FadeOut, ZoomIn, ZoomOut, None)
Customizing animation duration and easing

📄 阅读： references/accessibility-animations.md

符合WCAG 2.2和Section 508标准
ARIA属性与屏幕阅读器支持
键盘导航（方向键、空格/回车、Home/End）
RTL支持与颜色对比度
配置展开/折叠动画
动画效果（SlideDown、SlideUp、FadeIn、FadeOut、ZoomIn、ZoomOut、None）
自定义动画时长与缓动效果

How-To Scenarios

场景实践

📄 Read: references/how-to-scenarios.md

Adding custom icons to accordion headers
Creating nested accordions (accordion within accordion)
Dynamically adding and removing accordion items
Creating wizard interfaces with sequential validation
Enabling or disabling specific accordion items
Integrating other components (TreeView, etc.) inside accordion content
Preventing expand/collapse for specific conditions
Showing or hiding accordion items conditionally

📄 阅读： references/how-to-scenarios.md

为折叠面板标题添加自定义图标
创建嵌套折叠面板（折叠面板内嵌套折叠面板）
动态添加和移除折叠面板项
创建带连续验证的向导界面
启用或禁用特定折叠面板项
在折叠面板内容中集成其他组件（如TreeView等）
针对特定条件阻止展开/折叠
根据条件显示或隐藏折叠面板项

Quick Start

快速开始示例

Basic Accordion

基础折叠面板

cshtml

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies for building Web applications."></AccordionItem>
        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller pattern separates an application into three components."></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript is an interpreted programming language for web development."></AccordionItem>
    </AccordionItems>
</SfAccordion>

cshtml

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies for building Web applications."></AccordionItem>
        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller pattern separates an application into three components."></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript is an interpreted programming language for web development."></AccordionItem>
    </AccordionItems>
</SfAccordion>

Accordion with Templates

带模板的折叠面板

cshtml

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem>
            <HeaderTemplate>
                <div>Employee Details</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div>
                    <b>Name:</b> John Doe<br />
                    <b>Position:</b> Software Engineer
                </div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

cshtml

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem>
            <HeaderTemplate>
                <div>Employee Details</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div>
                    <b>Name:</b> John Doe<br />
                    <b>Position:</b> Software Engineer
                </div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Data-Bound Accordion

数据绑定折叠面板

cshtml

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        @foreach (var item in AccordionData)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div>@item.Title</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<DataItem> AccordionData = new List<DataItem>() {
        new DataItem { Title = "Item 1", Content = "Content 1" },
        new DataItem { Title = "Item 2", Content = "Content 2" }
    };
    
    public class DataItem {
        public string Title { get; set; }
        public string Content { get; set; }
    }
}

cshtml

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        @foreach (var item in AccordionData)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div>@item.Title</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<DataItem> AccordionData = new List<DataItem>() {
        new DataItem { Title = "Item 1", Content = "Content 1" },
        new DataItem { Title = "Item 2", Content = "Content 2" }
    };
    
    public class DataItem {
        public string Title { get; set; }
        public string Content { get; set; }
    }
}

Common Patterns

常见模式

Single Expand Mode

单展开模式

Use when only one panel should be open at a time (like FAQs):

cshtml

<SfAccordion ExpandMode="ExpandMode.Single">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="Question 1" Content="Answer 1"></AccordionItem>
        <AccordionItem Header="Question 2" Content="Answer 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

适用于同一时间仅需显示一个面板的场景（如FAQ）：

cshtml

<SfAccordion ExpandMode="ExpandMode.Single">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="Question 1" Content="Answer 1"></AccordionItem>
        <AccordionItem Header="Question 2" Content="Answer 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

Handling Expand Events

处理展开事件

Use when you need to perform actions during expand/collapse:

cshtml

<SfAccordion>
    <AccordionEvents Expanding="OnExpanding" Expanded="OnExpanded"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public void OnExpanding(ExpandEventArgs args) {
        // Perform validation or load data before expansion
    }
    
    public void OnExpanded(ExpandedEventArgs args) {
        // Handle post-expansion actions
    }
}

需要在展开/折叠过程中执行操作时使用：

cshtml

<SfAccordion>
    <AccordionEvents Expanding="OnExpanding" Expanded="OnExpanded"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public void OnExpanding(ExpandEventArgs args) {
        // Perform validation or load data before expansion
    }
    
    public void OnExpanded(ExpandedEventArgs args) {
        // Handle post-expansion actions
    }
}

Dynamic Item Management

动态项管理

Use when items need to be added or removed at runtime:

cshtml

<SfButton @onclick="AddItem">Add Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem Header="@item.Header" Content="@item.Content"></AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<ItemData> Items = new List<ItemData>();
    
    void AddItem() {
        Items.Add(new ItemData { Header = "New Item", Content = "New Content" });
    }
}

需要在运行时添加或移除项时使用：

cshtml

<SfButton @onclick="AddItem">Add Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem Header="@item.Header" Content="@item.Content"></AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<ItemData> Items = new List<ItemData>();
    
    void AddItem() {
        Items.Add(new ItemData { Header = "New Item", Content = "New Content" });
    }
}

Nested Accordion

嵌套折叠面板

Use when you need hierarchical collapsible sections:

cshtml

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Parent Item">
            <ContentTemplate>
                <SfAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Child Item 1" Content="Child Content 1"></AccordionItem>
                        <AccordionItem Header="Child Item 2" Content="Child Content 2"></AccordionItem>
                    </AccordionItems>
                </SfAccordion>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

需要层级可折叠区域时使用：

cshtml

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Parent Item">
            <ContentTemplate>
                <SfAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Child Item 1" Content="Child Content 1"></AccordionItem>
                        <AccordionItem Header="Child Item 2" Content="Child Content 2"></AccordionItem>
                    </AccordionItems>
                </SfAccordion>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

Key Properties and Configuration

核心属性与配置

Core Properties

核心属性

Property	Type	Default	Description
`ExpandMode`	ExpandMode	Multiple	Controls whether single or multiple items can be expanded
`ExpandedIndices`	int[]	null	Array of indices for initially expanded items
`LoadOnDemand`	bool	true	Whether to load content on demand or at initial render

属性	类型	默认值	描述
`ExpandMode`	ExpandMode	Multiple	控制是否允许展开单个或多个面板
`ExpandedIndices`	int[]	null	初始展开项的索引数组
`LoadOnDemand`	bool	true	内容是按需加载还是初始加载时渲染

AccordionItem Properties

AccordionItem 属性

Property	Type	Default	Description
`Header`	string	null	Text content for the accordion header
`Content`	string	null	Text content for the accordion panel
`HeaderTemplate`	RenderFragment	null	Custom template for the header
`ContentTemplate`	RenderFragment	null	Custom template for the content
`Expanded`	bool	false	Whether the item is initially expanded
`Disabled`	bool	false	Whether the item is disabled
`Visible`	bool	true	Whether the item is visible
`IconCss`	string	null	CSS class for custom header icon
`CssClass`	string	null	Custom CSS class for the item

属性	类型	默认值	描述
`Header`	string	null	折叠面板标题的文本内容
`Content`	string	null	折叠面板的文本内容
`HeaderTemplate`	RenderFragment	null	标题的自定义模板
`ContentTemplate`	RenderFragment	null	内容的自定义模板
`Expanded`	bool	false	该项是否初始展开
`Disabled`	bool	false	该项是否禁用
`Visible`	bool	true	该项是否可见
`IconCss`	string	null	标题自定义图标的CSS类
`CssClass`	string	null	该项的自定义CSS类

Animation Properties

动画属性

Configure expand/collapse animations using

AccordionAnimationSettings

cshtml

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="AnimationEffect.SlideDown" Duration="400"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.SlideUp" Duration="400"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <!-- Items here -->
    </AccordionItems>
</SfAccordion>

Available animation effects:

SlideDown

SlideUp

FadeIn

FadeOut

FadeZoomIn

FadeZoomOut

ZoomIn

ZoomOut

None

使用

AccordionAnimationSettings

配置展开/折叠动画：

cshtml

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="AnimationEffect.SlideDown" Duration="400"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.SlideUp" Duration="400"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        <!-- Items here -->
    </AccordionItems>
</SfAccordion>

可用动画效果：

SlideDown

SlideUp

FadeIn

FadeOut

FadeZoomIn

FadeZoomOut

ZoomIn

ZoomOut

None

Common Use Cases

常见应用场景

FAQ Section

FAQ板块

Perfect for FAQs where only one answer should be visible at a time:

Use
```
ExpandMode.Single
```
Set first item as
```
Expanded="true"
```
Style headers to look like questions

非常适合FAQ场景，同一时间仅显示一个答案：

使用
```
ExpandMode.Single
```
设置第一个项为
```
Expanded="true"
```
将标题样式设置为问题样式

Multi-Step Form/Wizard

多步骤表单/向导

Create guided workflows with sequential steps:

Use
```
Disabled
```
property to prevent skipping steps
Use
```
Expanded
```
property to control which step is active
Handle
```
Expanding
```
event to validate before moving to next step

创建带连续步骤的引导式工作流：

使用
```
Disabled
```
属性防止跳过步骤
使用
```
Expanded
```
属性控制当前激活的步骤
处理
```
Expanding
```
事件，在进入下一步前执行验证

导航菜单

Organize navigation items hierarchically:

Use nested accordions for sub-menus
Use
```
IconCss
```
for menu icons
Handle
```
Clicked
```
event for navigation actions

层级化组织导航项：

使用嵌套折叠面板实现子菜单
使用
```
IconCss
```
添加菜单图标
处理
```
Clicked
```
事件执行导航操作

Content Organization

内容组织

Organize large amounts of content in compact form:

Use
```
LoadOnDemand="true"
```
for performance
Use
```
Multiple
```
expand mode for flexible viewing
Provide clear, descriptive headers

将大量内容组织为紧凑形式：

使用
```
LoadOnDemand="true"
```
优化性能
使用多展开模式提升查看灵活性
提供清晰、描述性的标题

Data Display

数据展示

Display structured data in collapsible sections:

Use data binding with
```
foreach
```
Use templates for rich content display
Handle events for lazy-loading detailed data

在可折叠区域中展示结构化数据：

使用foreach进行数据绑定
使用模板展示富内容
处理事件实现详细数据的懒加载

Next Steps

下一步

For installation and setup, read references/getting-started.md
For expand behavior configuration, read references/expand-modes.md
For event handling and data binding, read references/data-binding-events.md
For styling and customization, read references/customization-styling.md
For practical examples, read references/how-to-scenarios.md

如需安装和设置，请阅读 references/getting-started.md
如需配置展开行为，请阅读 references/expand-modes.md
如需事件处理和数据绑定，请阅读 references/data-binding-events.md
如需样式与自定义，请阅读 references/customization-styling.md
如需实践示例，请阅读 references/how-to-scenarios.md

syncfusion-blazor-accordion

Original

Translation

Syncfusion Blazor Accordion Component

Syncfusion Blazor Accordion 组件

When to Use This Skill

适用场景

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

Expand Modes and Behavior

展开模式与行为

Content Rendering

内容渲染

Data Binding and Events

数据绑定与事件

Customization and Styling

自定义与样式

Accessibility and Animations

无障碍与动画

How-To Scenarios

场景实践

Quick Start

快速开始示例

Basic Accordion

基础折叠面板

Accordion with Templates

带模板的折叠面板

Data-Bound Accordion

数据绑定折叠面板

Common Patterns

常见模式

Single Expand Mode

单展开模式

Handling Expand Events

处理展开事件

Dynamic Item Management

动态项管理

Nested Accordion

嵌套折叠面板

Key Properties and Configuration

核心属性与配置

Core Properties

核心属性

AccordionItem Properties

AccordionItem 属性

Animation Properties

动画属性

Common Use Cases

常见应用场景

FAQ Section

FAQ板块

Multi-Step Form/Wizard

多步骤表单/向导

Navigation Menu

导航菜单

Content Organization

内容组织

Data Display

数据展示

Next Steps

下一步