syncfusion-angular-accordion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Accordion Component

实现Syncfusion Angular Accordion组件

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Create collapsible content panels - Organize related content into expandable sections that collapse to save space
Build step-by-step wizards - Create multi-step forms or workflows where users progress through accordion items
Implement FAQ sections - Display frequently asked questions with expandable answers
Create navigation menus - Build hierarchical menus or navigation structures with nested expandable items
Load content dynamically - Fetch and display content on-demand as users expand accordion items
Add custom animations - Enhance user experience with smooth expand/collapse transitions
Organize complex data - Display structured data with expandable categories and subcategories

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

创建可折叠内容面板 - 将相关内容组织为可展开区域，折叠后节省空间
构建多步骤向导 - 创建用户可通过手风琴项逐步完成的多步骤表单或工作流
实现FAQ板块 - 展示带有可展开答案的常见问题
创建导航菜单 - 构建带有嵌套可展开项的层级菜单或导航结构
动态加载内容 - 用户展开手风琴项时，按需获取并展示内容
添加自定义动画 - 通过流畅的展开/折叠过渡提升用户体验
组织复杂数据 - 展示带有可展开分类和子分类的结构化数据

Component Overview

组件概述

The Syncfusion Angular Accordion component displays a vertically collapsible content panel where users can expand one or more sections at a time. Key capabilities include:

Single/Multiple expand modes - Control whether one or multiple items can be open simultaneously
Data binding - Bind accordion items from arrays or OData services
Dynamic item management - Add, remove, or update items at runtime
Event handling - Respond to expand, collapse, and click events
Custom animations - Configure smooth transitions with custom effects and duration
Nested accordions - Create hierarchical accordion structures for complex navigation
TreeView integration - Embed other components like TreeView for advanced navigation
Content projection - Use Angular's
```
ng-content
```
for reusable content components

Syncfusion Angular Accordion组件展示垂直可折叠的内容面板，用户可同时展开一个或多个板块。核心功能包括：

单/多展开模式 - 控制是否允许同时打开一个或多个项
数据绑定 - 从数组或OData服务绑定手风琴项
动态项管理 - 在运行时添加、删除或更新项
事件处理 - 响应展开、折叠和点击事件
自定义动画 - 配置带有自定义效果和时长的平滑过渡
嵌套手风琴 - 为复杂导航创建层级手风琴结构
TreeView集成 - 嵌入TreeView等其他组件以实现高级导航
内容投影 - 使用Angular的
```
ng-content
```
实现可复用内容组件

Master Table of Contents

主目录

Quick Navigation to Documentation:

Getting Started - Installation, setup, and basic initialization
Expand Modes - Single vs. Multiple expand modes, configuration
Data Binding - Data sources, OData, REST APIs, refresh strategies
Dynamic Loading and Interactions - Events, methods, dynamic item management
Advanced Features - Animations, nested accordions, styling, RTL
Use Cases and Patterns - Real-world implementations and patterns

文档快速导航：

快速入门 - 安装、设置和基础初始化
展开模式 - 单展开与多展开模式、配置
数据绑定 - 数据源、OData、REST API、刷新策略
动态加载与交互 - 事件、方法、动态项管理
高级功能 - 动画、嵌套手风琴、样式、RTL
用例与模式 - 实际场景实现与模式

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

When to use:

Setting up your first Accordion component
Installing required packages and dependencies
Understanding CSS imports and theme configuration
Learning basic initialization methods (template-based, items array, HTML elements)
Creating your first working example

📄 阅读： references/getting-started.md

适用场景：

设置你的第一个Accordion组件
安装所需包和依赖
理解CSS导入和主题配置
学习基础初始化方法（基于模板、项数组、HTML元素）
创建第一个可运行示例

Expand Modes

展开模式

📄 Read: references/expand-modes.md

When to use:

Deciding whether users should expand one or multiple items
Configuring single mode (only one item open at a time)
Using multiple mode for simultaneously open items
Selecting the right mode for your use case
Handling performance with large datasets

📄 阅读： references/expand-modes.md

适用场景：

决定是否允许用户展开一个或多个项
配置单模式（同一时间仅一个项打开）
使用多模式实现同时打开多个项
为你的用例选择合适的模式
处理大数据集时的性能问题

Data Binding

数据绑定

📄 Read: references/data-binding.md

When to use:

Binding accordion data from external sources
Using DataManager to fetch from OData services
Mapping data properties to headers and content
Working with structured data arrays
Refreshing accordion content after data updates

📄 阅读： references/data-binding.md

适用场景：

从外部源绑定手风琴数据
使用DataManager从OData服务获取数据
将数据属性映射到标题和内容
处理结构化数据数组
数据更新后刷新手风琴内容

Dynamic Loading and Interactions

动态加载与交互

📄 Read: references/dynamic-loading-and-interactions.md

When to use:

Adding items dynamically at runtime
Handling expand/collapse/click events
Loading content via AJAX or remote requests
Implementing checkbox-controlled expansion
Preventing item collapse or forcing items to stay open
Using
```
ng-content
```
for reusable content components
Creating always-open accordion items

📄 阅读： references/dynamic-loading-and-interactions.md

适用场景：

在运行时动态添加项
处理展开/折叠/点击事件
通过AJAX或远程请求加载内容
实现复选框控制的展开功能
阻止项折叠或强制项保持打开状态
使用
```
ng-content
```
实现可复用内容组件
创建始终保持打开的手风琴项

Advanced Features

高级功能

📄 Read: references/advanced-features.md

When to use:

Customizing expand/collapse animations with effects and easing
Creating nested accordions for hierarchical structures
Integrating TreeView components within accordion items
Applying custom CSS styling and theming
Enabling RTL (right-to-left) support
Styling headers, items, and expand/collapse icons

📄 阅读： references/advanced-features.md

适用场景：

自定义展开/折叠动画的效果和缓动函数
为层级结构创建嵌套手风琴
在手指风琴项中集成TreeView组件
应用自定义CSS样式和主题
启用RTL（从右到左）布局支持
为标题、项和展开/折叠图标设置样式

Use Cases and Patterns

用例与模式

📄 Read: references/use-cases-patterns.md

When to use:

Building FAQ sections with best practices
Creating multi-step wizard forms with validation
Designing settings panels with categories
Building navigation menus and organizational hierarchies
Displaying help and documentation sections
Learning real-world patterns and code organization strategies

📄 阅读： references/use-cases-patterns.md

适用场景：

按最佳实践构建FAQ板块
创建带有验证的多步骤向导表单
设计带有分类的设置面板
构建导航菜单和组织层级
展示帮助和文档板块
学习实际应用模式和代码组织策略

Quick Start Example

快速入门示例

Basic template-based accordion with three items:

typescript

import { Component } from '@angular/core';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AccordionModule],
  template: `
    <ejs-accordion>
      <e-accordionitems>
        <e-accordionitem expanded="true">
          <ng-template #header>
            <div>ASP.NET</div>
          </ng-template>
          <ng-template #content>
            <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.</div>
          </ng-template>
        </e-accordionitem>
        
        <e-accordionitem>
          <ng-template #header>
            <div>ASP.NET MVC</div>
          </ng-template>
          <ng-template #content>
            <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.</div>
          </ng-template>
        </e-accordionitem>
        
        <e-accordionitem>
          <ng-template #header>
            <div>JavaScript</div>
          </ng-template>
          <ng-template #content>
            <div>JavaScript (JS) is an interpreted computer programming language used for creating interactive web pages and applications.</div>
          </ng-template>
        </e-accordionitem>
      </e-accordionitems>
    </ejs-accordion>
  `
})
export class AppComponent {}

Using items array approach:

typescript

import { Component } from '@angular/core';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AccordionModule],
  template: `<ejs-accordion [items]="accordionItems"></ejs-accordion>`
})
export class AppComponent {
  public accordionItems = [
    {
      header: 'ASP.NET',
      content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications.',
      expanded: true
    },
    {
      header: 'ASP.NET MVC',
      content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components.'
    },
    {
      header: 'JavaScript',
      content: 'JavaScript (JS) is an interpreted computer programming language used for creating interactive web pages.'
    }
  ];
}

基于模板的基础手风琴（包含三个项）：

typescript

import { Component } from '@angular/core';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AccordionModule],
  template: `
    <ejs-accordion>
      <e-accordionitems>
        <e-accordionitem expanded="true">
          <ng-template #header>
            <div>ASP.NET</div>
          </ng-template>
          <ng-template #content>
            <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.</div>
          </ng-template>
        </e-accordionitem>
        
        <e-accordionitem>
          <ng-template #header>
            <div>ASP.NET MVC</div>
          </ng-template>
          <ng-template #content>
            <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.</div>
          </ng-template>
        </e-accordionitem>
        
        <e-accordionitem>
          <ng-template #header>
            <div>JavaScript</div>
          </ng-template>
          <ng-template #content>
            <div>JavaScript (JS) is an interpreted computer programming language used for creating interactive web pages and applications.</div>
          </ng-template>
        </e-accordionitem>
      </e-accordionitems>
    </ejs-accordion>
  `
})
export class AppComponent {}

使用项数组的实现方式：

typescript

import { Component } from '@angular/core';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AccordionModule],
  template: `<ejs-accordion [items]="accordionItems"></ejs-accordion>`
})
export class AppComponent {
  public accordionItems = [
    {
      header: 'ASP.NET',
      content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications.',
      expanded: true
    },
    {
      header: 'ASP.NET MVC',
      content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components.'
    },
    {
      header: 'JavaScript',
      content: 'JavaScript (JS) is an interpreted computer programming language used for creating interactive web pages.'
    }
  ];
}

Common Patterns

常见模式

Pattern 1: Single Expand Mode (One Item Open)

模式1：单展开模式（仅一个项打开）

Use when you want only one accordion item open at a time, common for navigation menus and settings panels.

typescript

<ejs-accordion expandMode="Single">
  <!-- items here -->
</ejs-accordion>

适用于希望同一时间仅一个手风琴项打开的场景，常见于导航菜单和设置面板。

typescript

<ejs-accordion expandMode="Single">
  <!-- items here -->
</ejs-accordion>

Pattern 2: Dynamic Item Addition

模式2：动态添加项

Add items programmatically in response to user actions or data loading.

typescript

@ViewChild('accordion') accordionObj?: AccordionComponent;

addNewItem() {
  this.accordionObj?.addItem({
    header: 'New Item',
    content: 'New content here'
  });
}

响应用户操作或数据加载，以编程方式添加项。

typescript

@ViewChild('accordion') accordionObj?: AccordionComponent;

addNewItem() {
  this.accordionObj?.addItem({
    header: 'New Item',
    content: 'New content here'
  });
}

Pattern 3: Event-Driven Workflows

模式3：事件驱动工作流

Respond to accordion events for custom logic like validation or data loading.

typescript

<ejs-accordion (expanding)="onExpanding($event)" (expanded)="onExpanded($event)">
  <!-- items here -->
</ejs-accordion>

onExpanding(event: ExpandEventArgs) {
  // Prevent collapse of currently open item
  event.cancel = true;
}

响应手风琴事件以实现自定义逻辑，比如验证或数据加载。

typescript

<ejs-accordion (expanding)="onExpanding($event)" (expanded)="onExpanded($event)">
  <!-- items here -->
</ejs-accordion>

onExpanding(event: ExpandEventArgs) {
  // Prevent collapse of currently open item
  event.cancel = true;
}

Pattern 4: Animated Expand/Collapse

模式4：动画化展开/折叠

Add smooth animations for better visual feedback.

typescript

<ejs-accordion [animation]="animationSettings">
  <!-- items here -->
</ejs-accordion>

animationSettings = {
  expand: { effect: 'SlideDown', duration: 400, easing: 'ease' },
  collapse: { effect: 'SlideUp', duration: 400, easing: 'ease' }
};

添加平滑动画以提供更好的视觉反馈。

typescript

<ejs-accordion [animation]="animationSettings">
  <!-- items here -->
</ejs-accordion>

animationSettings = {
  expand: { effect: 'SlideDown', duration: 400, easing: 'ease' },
  collapse: { effect: 'SlideUp', duration: 400, easing: 'ease' }
};

Complete API Reference

完整API参考

For detailed documentation on each API element with working code examples, refer to the reference files. Below is a comprehensive summary.

如需每个API元素的详细文档及可运行代码示例，请参考参考文件。以下是综合摘要。

Accordion Component Properties (13 Total)

Accordion组件属性（共13个）

Property	Type	Default	Purpose	Learn More
`items`	`AccordionItemModel[]`	`[]`	Collection of accordion items	Data Binding
`dataSource`	`DataManager \| Object[]`	`null`	Data source for binding items	Data Binding
`expandMode`	`'Single' \| 'Multiple'`	`'Multiple'`	Controls single or multiple item expansion	Expand Modes
`expandedIndices`	`number[]`	`[]`	Indices of initially expanded items	Expand Modes
`animation`	`AccordionAnimationSettingsModel`	`{ expand: { effect: 'SlideDown', duration: 400, easing: 'linear' }, collapse: { effect: 'SlideUp', duration: 400, easing: 'linear' } }`	Expand/collapse animation settings	Advanced Features
`headerTemplate`	`string \| Function`	`null`	Template for item headers	Getting Started
`itemTemplate`	`string \| Function`	`null`	Template for item content	Getting Started
`height`	`string \| number`	`auto`	Component height	Getting Started
`width`	`string \| number`	`100%`	Component width	Getting Started
`enableRtl`	`boolean`	`false`	Enable right-to-left layout	Advanced Features
`enablePersistence`	`boolean`	`false`	Save expanded state in localStorage	Getting Started
`enableHtmlSanitizer`	`boolean`	`true`	Sanitize HTML in content	Data Binding
`locale`	`string`	`'en-US'`	Localization culture	Advanced Features

属性	类型	默认值	用途	了解更多
`items`	`AccordionItemModel[]`	`[]`	手风琴项集合	数据绑定
`dataSource`	`DataManager \| Object[]`	`null`	用于绑定项的数据源	数据绑定
`expandMode`	`'Single' \| 'Multiple'`	`'Multiple'`	控制单/多项展开	展开模式
`expandedIndices`	`number[]`	`[]`	初始展开项的索引	展开模式
`animation`	`AccordionAnimationSettingsModel`	`{ expand: { effect: 'SlideDown', duration: 400, easing: 'linear' }, collapse: { effect: 'SlideUp', duration: 400, easing: 'linear' } }`	展开/折叠动画设置	高级功能
`headerTemplate`	`string \| Function`	`null`	项标题模板	快速入门
`itemTemplate`	`string \| Function`	`null`	项内容模板	快速入门
`height`	`string \| number`	`auto`	组件高度	快速入门
`width`	`string \| number`	`100%`	组件宽度	快速入门
`enableRtl`	`boolean`	`false`	启用从右到左布局	高级功能
`enablePersistence`	`boolean`	`false`	在localStorage中保存展开状态	快速入门
`enableHtmlSanitizer`	`boolean`	`true`	清理内容中的HTML	数据绑定
`locale`	`string`	`'en-US'`	本地化语言	高级功能

AccordionItem Properties (8 Total)

AccordionItem属性（共8个）

Property	Type	Default	Purpose	Learn More
`header`	`string \| HTMLElement`	`''`	Item header text or element	Getting Started
`content`	`string \| HTMLElement \| Function`	`''`	Item content text, HTML, or function	Getting Started
`expanded`	`boolean`	`false`	Initial expanded state	Expand Modes
`disabled`	`boolean`	`false`	Disable item interaction	Dynamic Loading
`visible`	`boolean`	`true`	Item visibility	Dynamic Loading
`cssClass`	`string`	`''`	Custom CSS class for item	Advanced Features
`iconCss`	`string`	`''`	Font Awesome/Bootstrap icon class	Getting Started
`id`	`string`	`''`	Unique item identifier	Getting Started

属性	类型	默认值	用途	了解更多
`header`	`string \| HTMLElement`	`''`	项标题文本或元素	快速入门
`content`	`string \| HTMLElement \| Function`	`''`	项内容文本、HTML或函数	快速入门
`expanded`	`boolean`	`false`	初始展开状态	展开模式
`disabled`	`boolean`	`false`	禁用项交互	动态加载
`visible`	`boolean`	`true`	项可见性	动态加载
`cssClass`	`string`	`''`	项的自定义CSS类	高级功能
`iconCss`	`string`	`''`	Font Awesome/Bootstrap图标类	快速入门
`id`	`string`	`''`	项的唯一标识符	快速入门

Methods (7 Total)

方法（共7个）

Method	Signature	Purpose	Learn More
`addItem()`	`addItem(item: AccordionItemModel \| Object[], index?: number): void`	Add items at specific index or end	Dynamic Loading
`removeItem()`	`removeItem(index: number): void`	Remove item at index	Dynamic Loading
`expandItem()`	`expandItem(isExpand: boolean, index?: number): void`	Expand/collapse specific or all items	Dynamic Loading, Expand Modes
`enableItem()`	`enableItem(index: number, isEnable: boolean): void`	Enable/disable item interaction	Dynamic Loading
`hideItem()`	`hideItem(index: number, isHidden?: boolean): void`	Show/hide item without removal	Dynamic Loading
`select()`	`select(index: number): void`	Set focus to item header	Dynamic Loading
`destroy()`	`destroy(): void`	Clean up component resources	Dynamic Loading

方法	签名	用途	了解更多
`addItem()`	`addItem(item: AccordionItemModel \| Object[], index?: number): void`	在指定索引或末尾添加项	动态加载
`removeItem()`	`removeItem(index: number): void`	删除指定索引的项	动态加载
`expandItem()`	`expandItem(isExpand: boolean, index?: number): void`	展开/折叠指定项或所有项	动态加载, 展开模式
`enableItem()`	`enableItem(index: number, isEnable: boolean): void`	启用/禁用项交互	动态加载
`hideItem()`	`hideItem(index: number, isHidden?: boolean): void`	显示/隐藏项（不删除）	动态加载
`select()`	`select(index: number): void`	将焦点设置到项标题	动态加载
`destroy()`	`destroy(): void`	清理组件资源	动态加载

Events (5 Total)

事件（共5个）

Event	Event Args	Triggered When	Learn More
`created`	`Event`	Component rendering completes	Dynamic Loading
`expanding`	`ExpandEventArgs`	Item begins to expand (cancellable)	Dynamic Loading
`expanded`	`ExpandEventArgs`	Item finishes expanding	Dynamic Loading
`clicked`	`AccordionClickArgs`	Header or content clicked	Dynamic Loading
`destroyed`	`Event`	Component destroyed	Dynamic Loading

事件	事件参数	触发时机	了解更多
`created`	`Event`	组件渲染完成时	动态加载
`expanding`	`ExpandEventArgs`	项开始展开时（可取消）	动态加载
`expanded`	`ExpandEventArgs`	项完成展开时	动态加载
`clicked`	`AccordionClickArgs`	标题或内容被点击时	动态加载
`destroyed`	`Event`	组件被销毁时	动态加载

Animation Effects (6 Types)

动画效果（共6种）

Effect	Expand Behavior	Collapse Behavior	Best For
`SlideDown`	Content slides down	N/A (use with SlideUp)	Default, smooth animations
`SlideUp`	N/A (use with SlideDown)	Content slides up	Default collapse effect
`FadeDown`	Content fades in while sliding	N/A (use with FadeUp)	Professional appearance
`FadeUp`	N/A (use with FadeDown)	Content fades out while sliding	Professional appearance
`Zoom`	Content zooms in	Content zooms out	Attention-grabbing effects
`None`	Instant	Instant	Best performance

效果	展开行为	折叠行为	最佳适用场景
`SlideDown`	内容向下滑动	N/A（搭配SlideUp使用）	默认效果，平滑动画
`SlideUp`	N/A（搭配SlideDown使用）	内容向上滑动	默认折叠效果
`FadeDown`	内容淡入并向下滑动	N/A（搭配FadeUp使用）	专业外观
`FadeUp`	N/A（搭配FadeDown使用）	内容淡出并向上滑动	专业外观
`Zoom`	内容放大	内容缩小	吸引注意力的效果
`None`	即时完成	即时完成	最佳性能

Easing Functions (5 Types)

缓动函数（共5种）

Easing	Curve	Best For	Typical Use
`linear`	Constant speed	Simple animations	Straightforward expand/collapse
`ease`	Slow start/end, fast middle	Default behavior	Balanced feel
`ease-in`	Accelerating	Collapse action	Speeds up as it closes
`ease-out`	Decelerating	Expand action	Slows down as it opens
`ease-in-out`	Slow start and end	Symmetric animations	Equal timing both directions

缓动类型	曲线	最佳适用场景	典型用途
`linear`	匀速	简单动画	直接的展开/折叠
`ease`	慢启动/结束，中间快速	默认行为	平衡的体验
`ease-in`	加速	折叠操作	关闭时速度加快
`ease-out`	减速	展开操作	打开时速度减慢
`ease-in-out`	慢启动和结束	对称动画	双向时长一致

Common Use Cases

常见用例

FAQ Section - Expandable question/answer pairs with single expand mode
Multi-Step Wizard - Sequential items with validation and conditional enabling
Settings Panel - Grouped settings organized in expandable sections
Navigation Menu - Hierarchical navigation with nested accordions
Data Explorer - Expandable data categories with dynamic loading
Help Documentation - Collapsible help sections organized by topic

FAQ板块 - 采用单展开模式的可展开问答对
多步骤向导 - 带有验证和条件启用的顺序项
设置面板 - 按可展开板块分组的设置项
导航菜单 - 带有嵌套手风琴的层级导航
数据浏览器 - 带有动态加载的可展开数据分类
帮助文档 - 按主题组织的可折叠帮助板块

Troubleshooting Quick Reference

故障排查快速参考

Item won't expand?

Check if item is disabled with
```
enableItem(false, index)
```
Verify
```
expandMode
```
setting matches your requirement

Content not loading?

Ensure
```
header
```
and
```
content
```
properties are set
Check CSS imports are included in styles

Animation not smooth?

Verify CSS is properly imported
Check browser console for errors
Consider reducing animation duration for slower devices

Multiple items closing unexpectedly?

Verify
```
expandMode
```
is set to 'Multiple' if multiple should be open
Check event handlers aren't calling
```
e.cancel = true
```

For detailed information on any aspect, refer to the documentation and navigation guide above. Start with getting-started.md if you're new to the component.

项无法展开？

检查是否通过
```
enableItem(false, index)
```
禁用了项
验证
```
expandMode
```
设置是否符合需求

内容未加载？

确保已设置
```
header
```
和
```
content
```
属性
检查样式中是否包含CSS导入

动画不流畅？

验证CSS是否正确导入
检查浏览器控制台是否有错误
考虑为较慢设备缩短动画时长

多个项意外关闭？

若允许同时打开多个项，验证
```
expandMode
```
是否设置为'Multiple'
检查事件处理程序是否调用了
```
e.cancel = true
```

如需任何方面的详细信息，请参考上述文档与导航指南。如果是首次使用该组件，请从getting-started.md开始。