syncfusion-javascript-accordion

Syncfusion TypeScript Accordion

Accordion 是一种可垂直折叠的内容面板组件，可显示一个或多个可展开/折叠的面板。它支持单项或多项展开模式、自定义动画、图标、模板和数据绑定。

何时使用此技能

当用户需要以下功能时，请使用此技能：

• 构建响应式手风琴式导航菜单
• 创建可展开的内容区域，以减少页面高度
• 实现带验证功能的多步骤向导或表单
• 在可折叠面板中显示分层数据
• 使用图标、动画和样式自定义手风琴外观
• 从数据源或 AJAX 动态加载手风琴内容
• 将手风琴与其他组件（TreeView、表单等）集成
• 创建购物车步骤或 FAQ 区域等复杂 UI 模式

导航与文档指南

📚 文档结构

此技能分为多个专门的参考文件，涵盖不同方面：

基础知识

📄 入门指南

• 使用 npm 包进行安装和设置
• 初始化 items 数组
• 初始化 HTML 标记
• CSS 导入与主题配置
• 基本运行示例

📄 展开模式

• 单项与多项展开模式
• 展开行为与切换
• 初始展开状态
• 各模式的适用场景
• 常见工作流模式

自定义与样式

📄 自定义与样式

• CSS 自定义指南与选择器
• 标题、项和内容的样式设置
• 图标集成（内置图标和 Font Awesome）
• 动画效果与时长
• 悬停状态与选中项样式

数据与内容

📄 数据加载与内容

• 动态加载项
• items 数组方式
• DataSource 绑定方式
• AJAX 内容加载
• 嵌套手风琴
• TreeView 集成

📄 模板

• 标题模板
• 项模板
• 模板数据绑定
• 动态切换模板
• 性能优化

高级主题

📄 高级功能

• 所有方法（addItem、removeItem、enableItem、expandItem、hideItem、select、refresh 等）
• 所有事件（expanding、expanded、clicked、created、destroyed）
• 事件参数与属性
• 状态管理
• 事件侦听器
• RTL 支持与无障碍功能

📄 高级用例

• 多步骤表单向导
• 条件验证工作流
• 购物车结账流程
• 进度跟踪
• 最佳实践

完整参考

📄 API 参考 ⭐ 从这里开始查看完整 API

• 所有属性及其类型和默认值
• 所有方法及其参数和示例
• 所有事件及其事件参数
• 动画配置
• 完整代码示例

快速入门示例

import { Accordion } from '@syncfusion/ej2-navigations';

// Initialize Accordion with items array
const accordion = new Accordion({
    items: [
        { 
            header: 'Getting Started', 
            content: 'Learn the basics of Accordion component',
            expanded: true 
        },
        { 
            header: 'Features', 
            content: 'Explore rich features like templates and data binding' 
        },
        { 
            header: 'API Reference', 
            content: 'Complete list of properties, events, and methods' 
        }
    ],
    // Use animation object, not enableAnimation boolean
    animation: {
        expand: { effect: 'SlideDown', duration: 400, easing: 'ease-in' },
        collapse: { effect: 'SlideUp', duration: 400, easing: 'ease-out' }
    }
});

accordion.appendTo('#accordion-element');

常见模式

模式 1：单个面板展开（类似选项卡的行为）

const accordion = new Accordion({
    expandMode: 'Single',
    items: [
        { header: 'Tab 1', content: 'Content 1', expanded: true },
        { header: 'Tab 2', content: 'Content 2' },
        { header: 'Tab 3', content: 'Content 3' }
    ]
});

模式 2：多个面板展开

const accordion = new Accordion({
    expandMode: 'Multiple',  // Default
    items: [
        { header: 'Section A', content: 'Content A', expanded: true },
        { header: 'Section B', content: 'Content B', expanded: true },
        { header: 'Section C', content: 'Content C' }
    ]
});

模式 3：带图标的手风琴

const accordion = new Accordion({
    items: [
        { 
            header: 'Sports', 
            iconCss: 'e-sports e-acrdn-icons',
            content: 'Athletic activities content'
        },
        { 
            header: 'Games', 
            iconCss: 'e-games e-acrdn-icons',
            content: 'Gaming activities content'
        }
    ]
});

模式 4：动态管理项

const accordion = new Accordion({
    items: [...],
    created: (args) => {
        // Disable item at index 2 initially
        accordion.enableItem(2, false);
        
        // After some action, enable it
        setTimeout(() => {
            accordion.enableItem(2, true);
        }, 2000);
    }
});

主要属性

属性	类型	默认值	描述
items	AccordionItem[]	[]	手风琴项数组，包含标题、内容和选项
dataSource	object[] | DataManager	-	外部数据源（items 数组、OData、JSON、AJAX）
expandMode	'Single' | 'Multiple'	'Multiple'	单项或多项展开模式
headerTemplate	string	-	用于项标题的自定义 HTML 模板
itemTemplate	string	-	用于整个项的自定义 HTML 模板
expandedIndices	number[]	[]	初始展开项的索引
animation	AnimationSettings	{expand: {}, collapse: {}}	动画设置，包括效果、时长和缓动
height	string | number	auto	手风琴容器的高度
width	string | number	100%	手风琴容器的宽度
enableRtl	boolean	false	从右到左的文本方向
enablePersistence	boolean	false	在 localStorage 中保留展开状态
enableHtmlSanitizer	boolean	true	为安全起见清理 HTML

必要导入

// Main component
import { Accordion } from '@syncfusion/ej2-navigations';

// Optional: Enable ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

// CSS styles (choose one theme)
import '@syncfusion/ej2-base/styles/fluent2.css';
import '@syncfusion/ej2-navigations/styles/fluent2.css';

后续步骤

• 在 数据加载和内容 中了解数据绑定模式
• 在 模板 中学习模板语法，以自定义 UI
• 在 高级用例 中实现表单向导
• 查看 高级功能，了解事件处理和状态管理