syncfusion-aspnetcore-accordion

实现 Syncfusion Accordion

何时使用此技能

当用户需要执行以下操作时，请使用此技能：

• 将内容整理到可折叠的分区中
• 构建包含可展开条目的常见问题或帮助分区
• 使用 Accordion 面板创建类似标签页的导航
• 实现渐进式内容展示
• 构建分层嵌套的 Accordion 结构
• 配置单项或多项展开模式
• 从数据源动态加载 Accordion 内容
• 自定义 Accordion 动画和交互
• 将 Accordion 集成到 ASP.NET Core 应用程序中

当您需要垂直堆叠的可折叠内容面板，并且一次显示一个或多个面板时，Accordion 组件是理想之选。

组件概览

Syncfusion Accordion 是一种可垂直折叠的内容面板控件，具有以下功能：

• 支持 Single 和 Multiple 展开模式
• 处理静态条目和数据绑定内容
• 支持构建用于展示分层内容的嵌套 Accordion 结构
• 可配置展开/折叠操作的动画
• 触发生命周期事件（created、expanding、expanded、collapsing、collapsed、clicked）
• 支持从分部视图或通过 POST 请求加载内容
• 允许通过 expandItem() 等公共方法进行编程控制
• 在页面重新加载后保留状态
• 提供 RTL 支持和 HTML 清理功能

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 系统先决条件和 NuGet 程序包安装
• ASP.NET Core 的 TagHelper 注册
• 样式表和脚本资源配置
• 创建第一个 Accordion 控件
• 了解 AccordionItem 结构和标记模式

展开模式和行为

📄 阅读： references/expand-modes.md

• 单项展开模式：展开的条目互斥
• 多项展开模式：条目可独立展开（默认）
• 切换行为和用户交互
• 始终保持一个面板处于打开状态
• 展开模式配置示例

数据绑定和动态内容

📄 阅读： references/data-binding.md

• 使用 AccordionItem 元素绑定静态条目
• DataSource 属性和动态数据绑定
• 使用 DataManager 集成 OData 服务
• 从数据映射标题和内容属性
• 处理复杂数据结构

高级内容加载

📄 阅读： references/content-loading.md

• 从分部视图加载内容
• 用于提升性能的延迟加载策略
• 动态内容呈现和更新
• 基于 POST 的内容请求
• 内容刷新和状态管理

自定义和动画

📄 阅读： references/customization-animation.md

• 配置展开/折叠动画
• 动画设置：效果、持续时间、缓动
• 事件处理：expanding、expanded、collapsing、collapsed
• 使用 expandItem() 方法以编程方式展开/折叠
• 高级交互模式和顺序操作

嵌套 Accordion 结构

📄 阅读： references/nested-accordion.md

• 创建多层 Accordion 层级
• 引用嵌套的 Accordion 元素
• 内容元素 ID 引用
• 大规模使用时的性能注意事项

完整 API 参考

📄 阅读： api-reference.md

• 所有可用的属性、方法和事件
• AccordionItem 配置选项
• 动画设置和事件参数
• 详细指南请参阅技能文件，此处不重复

快速入门示例

<div class="control_wrapper accordion-control-section">
    <ejs-accordion id="myAccordion" expand-mode="Multiple">
        <e-accordion-accordionitems>
            <e-accordion-accordionitem expanded="true" 
                header="Getting Started" 
                content="Learn the basics of Accordion component integration">
            </e-accordion-accordionitem>
            <e-accordion-accordionitem 
                header="Features" 
                content="Explore expand modes, data binding, and customization options">
            </e-accordion-accordionitem>
            <e-accordion-accordionitem 
                header="Advanced Topics" 
                content="Discover nested accordions, animations, and event handling">
            </e-accordion-accordionitem>
        </e-accordion-accordionitems>
    </ejs-accordion>
</div>

此示例创建一个包含三个条目的基本 Accordion，默认展开第一项。

常见模式

使用单项展开模式的常见问题分区

当一次只能显示一个常见问题的答案时，请使用 Single 展开模式：

<ejs-accordion expand-mode="Single">

同时打开多个面板的文档

使用 Multiple 展开模式（默认），让读者可以同时比较多个章节。

动态加载内容

将手风琴项绑定到 DataSource，以动态加载内容：

<ejs-accordion data-source="Model.AccordionItems">

始终保持一个面板处于打开状态

在 Single 模式下，配置 expanding 事件，以防止最后一个打开的项被折叠。

关键属性

属性	类型	默认值	用途
expandMode	Single | Multiple	Multiple	控制能否同时展开一个或多个项
items	AccordionItemModel[]	[]	要显示的手风琴项数组
dataSource	Object[]	[]	将动态数据绑定到手风琴项
expandedIndices	number[]	[]	指定初始加载时展开的项
height	string | number	auto	设置手风琴容器的高度
width	string | number	100%	设置手风琴容器的宽度
animation	AccordionAnimationSettingsModel	Configured	自定义展开/折叠动画
enablePersistence	boolean	false	在页面重新加载后保留展开状态
enableHtmlSanitizer	boolean	true	清理不可信的 HTML 内容

何时使用各展开模式

Single 模式：当内容互斥或一次只应显示一个章节时使用（例如，分步向导、类似单选按钮的行为）。

Multiple 模式：当用户需要同时查看多个章节时使用（例如，常见问题解答、文档、功能列表）。

---

**后续步骤：**根据需要选择一个参考文件，或从入门指南开始，完整了解设置流程。