syncfusion-blazor-accordion

Syncfusion Blazor Accordion 组件

Blazor Accordion 是一种垂直折叠的内容容器，可显示一个或多个面板。每个面板都包含标题和可展开的内容区域。它支持展开单个或多个面板、嵌套 Accordion、动画，并完全符合 WCAG 无障碍要求。

何时使用此技能

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

• 在 Blazor 应用程序中创建可折叠的内容区域
• 构建可展开答案的常见问题解答区域
• 实现包含嵌套项的导航菜单
• 在紧凑、可展开的面板中整理大量内容
• 创建类似向导的分步界面
• 使用嵌套 Accordion 显示分层数据
• 实现支持键盘导航的无障碍折叠组件
• 配置展开/折叠动画和行为
• 将动态数据绑定到 Accordion 项
• 自定义 Accordion 的外观和样式

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装 Syncfusion.Blazor.Navigations NuGet 包
• 导入命名空间并注册服务
• 添加主题和脚本引用
• 使用基本项创建第一个 Accordion
• 使用模板（HeaderTemplate、ContentTemplate）实现 Accordion

展开模式和行为

📄 阅读： references/expand-modes.md

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

内容呈现

📄 阅读： references/content-rendering.md

• 使用 LoadOnDemand 属性优化性能
• 在初始加载时呈现所有内容
• 按需加载内容（默认行为）
• 大型 Accordion 的性能注意事项

数据绑定和事件

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

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

自定义和样式

📄 阅读： references/customization-styling.md

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

无障碍和动画

📄 阅读： references/accessibility-animations.md

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

操作场景

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

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

快速入门

基本 Accordion

@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

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

数据绑定的 Accordion

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

常见模式

单项展开模式

适用于任何时候只应展开一个面板的场景（例如常见问题解答）：

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

处理展开事件

适用于需要在展开或折叠期间执行操作的场景：

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

动态管理项目

适用于需要在运行时添加或移除项目的场景：

<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" });
    }
}

嵌套手风琴

适用于需要分层折叠区域的场景：

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

关键属性和配置

核心属性

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

AccordionItem 属性

属性	类型	默认值	描述
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 类

动画属性

使用 AccordionAnimationSettings 配置展开和折叠动画：

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

可用的动画效果：SlideDown、SlideUp、FadeIn、FadeOut、FadeZoomIn、FadeZoomOut、ZoomIn、ZoomOut、None

常见用例

常见问题解答区域

适用于任何时候只显示一个答案的常见问题解答：

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

多步骤表单／向导

通过连续步骤创建引导式工作流：

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

导航菜单

按层级组织导航项：

• 使用嵌套手风琴创建子菜单
• 使用 IconCss 设置菜单图标
• 处理 Clicked 事件以执行导航操作

内容组织

以紧凑的形式组织大量内容：

• 使用 LoadOnDemand="true" 提升性能
• 使用 Multiple 展开模式，灵活查看内容
• 提供清晰、描述性强的标题

数据展示

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

• 使用 foreach 进行数据绑定
• 使用模板展示丰富内容
• 处理事件以延迟加载详细数据

后续步骤

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