syncfusion-react-accordion

用途

Syncfusion React Accordion 组件用于在 React 应用中展示可折叠的内容面板。它以堆叠面板的形式组织内容，每个面板由可点击切换的标题和内容区域组成，适合创建可展开的内容区块、FAQ、多步骤表单和导航菜单等界面。

主要能力

• 面板结构：每个面板包含标题（可点击切换）和内容区域；标题可以是简单文本或自定义模板；内容可以是静态、动态或由其他 React 组件渲染。
• 展开模式：支持单展开模式（一次仅一个面板展开）和多展开模式（可同时展开多个面板，为默认模式）。
• 初始展开状态：通过 expandedIndices 属性设置初始展开的面板索引数组，也可在单个面板上使用 expanded 属性。
• 动画效果：内置展开/折叠动画（默认展开为 SlideDown、折叠为 SlideUp），可选择 FadeIn、ZoomIn 等效果，配置缓动与持续时间，也可完全禁用动画。
• 内容加载：支持通过 addItem() 方法动态添加面板项，通过 dataSource 属性从数据源绑定内容，通过 HTTP 请求获取内容，以及使用 headerTemplate、itemTemplate 进行模板化渲染。
• 事件与生命周期：提供组件生命周期事件（created、destroyed）、展开/折叠事件（expanding、expanded）、点击事件（clicked），可通过 event.cancel 阻止默认行为。
• 样式与定制：提供标题、面板、内容区域的 CSS 类，内置主题选项与主题切换，支持 Tailwind、Bootstrap 等工具类自定义样式，支持 RTL（从右到左）布局和响应式设计，可通过 cssClass 属性应用自定义样式。
• 高级功能：提供 expandItem、enableItem、hideItem 等组件方法，支持嵌套手风琴与层级结构，可与 React hooks（useState、useRef、useEffect）集成，具备键盘导航与无障碍特性（ARIA 属性、屏幕阅读器支持），并针对大型手风琴列表提供性能优化。

使用方式

安装包：@syncfusion/ej2-react-navigations。需导入相应 CSS 主题文件（如 tailwind3.css）。

基本用法示例：

import React from 'react';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';
import '@syncfusion/ej2-popups/styles/tailwind3.css';
import '@syncfusion/ej2-react-navigations/styles/tailwind3.css';

export default function App() {
  return (
    <AccordionComponent expandMode='Multiple'>
      <AccordionItemsDirective>
        <AccordionItemDirective 
          header='HTML' 
          content='HTML is a markup language used to create web pages.' 
        />
        <AccordionItemDirective 
          header='CSS' 
          content='CSS is used to style HTML elements and create layouts.' 
        />
        <AccordionItemDirective 
          header='JavaScript' 
          content='JavaScript adds interactivity to web applications.' 
        />
      </AccordionItemsDirective>
    </AccordionComponent>
  );
}

初始化方式有两种：Items API 与 HTML 标记。

适用场景

• FAQ 区块（单展开模式，一次仅显示一个问题）
• 设置面板（多展开模式，可同时勾选多个选项）
• 多步骤表单（单展开模式，按顺序引导用户）
• 内容组织器（多展开模式，同时浏览多个主题）
• 导航菜单（单展开模式，树状层级导航）
• 数据仪表盘（多展开模式，同时查看多个数据区块）

限制

资料未提供关于收费、价格、平台兼容性、性能上限或具体效果保证的说明，这些信息暂未提供。