syncfusion-angular-tab

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Tabs

实现Syncfusion Angular Tabs组件

The Syncfusion Angular Tab component provides a flexible, responsive way to organize and display content in a tabbed interface. Tabs allow users to switch between multiple content panels, making it ideal for multi-step workflows, settings panels, navigation structures, and organized data displays.

Syncfusion Angular Tab组件提供了一种灵活、响应式的方式，在标签式界面中组织和展示内容。标签允许用户在多个内容面板之间切换，非常适合多步骤工作流、设置面板、导航结构和结构化数据展示场景。

When to Use This Skill

何时使用该技能

Building tabbed navigation: Organize related content into separate tabs with easy switching
Multi-step workflows: Create wizard-like experiences or step-by-step processes
Responsive layouts: Adapt tab display for mobile, tablet, and desktop screens (different orientations)
Dynamic content management: Add, remove, reorder, or drag-drop tabs at runtime
Complex applications: Integrate Grids, Charts, Calendars, Forms within tabs
State preservation: Save and restore user selections across browser sessions
Localized applications: Support multiple languages with localized UI text
Multiple orientations: Vertical or horizontal tab headers based on layout needs
Large data sets: Load tabs from remote APIs or databases
Customized UI: Style headers, icons, animations, overflow modes, and content areas
User preferences: Remember last selected tab with state persistence

构建标签式导航： 将相关内容整理到不同标签中，方便切换
多步骤工作流： 创建类似向导的体验或分步流程
响应式布局： 适配移动端、平板和桌面端的标签展示（支持不同布局方向）
动态内容管理： 运行时添加、删除、重排或拖放标签
复杂应用： 在标签中集成表格、图表、日历、表单等组件
状态保留： 在浏览器会话之间保存和恢复用户的选择
本地化应用： 支持多语言的本地化UI文本
多种布局方向： 根据布局需求选择垂直或水平标签头
大数据集： 从远程API或数据库加载标签内容
自定义UI： 样式化标签头、图标、动画、溢出模式和内容区域
用户偏好记忆： 通过状态持久化记住用户最后选择的标签

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Package installation and setup
Angular CLI configuration (standalone vs module)
CSS imports and theme setup
Three rendering methods: JSON items, ng-template, HTML elements
Basic usage examples and minimal setup

📄 阅读： references/getting-started.md

包安装与配置
Angular CLI配置（独立组件 vs 模块方式）
CSS导入与主题设置
三种渲染方式：JSON项、ng-template、HTML元素
基础使用示例与最简配置

Content Rendering Modes

内容渲染模式

📄 Read: references/rendering-modes.md

On Demand (default): Load active tab content, preserve state
Dynamic: Memory-optimized, single content in DOM
Init: All content upfront, access between tabs
Performance tradeoffs and use case selection
Code examples for each mode

📄 阅读： references/rendering-modes.md

按需加载（默认）： 加载激活标签的内容，保留状态
动态模式： 内存优化，仅单个内容在DOM中
初始化加载： upfront加载所有内容，支持标签间内容访问
性能权衡与使用场景选择
每种模式的代码示例

Content Management & Data

内容管理与数据处理

📄 Read: references/content-management.md

DataSource binding and data-driven tabs
Dynamic tab addition/removal (.addTab(), .removeTab())
AJAX and server-side content loading
Show/hide tabs dynamically
Reactive forms within tabs (FormGroup, FormControl)
Content reuse with TemplateRef

📄 阅读： references/content-management.md

数据源绑定与数据驱动的标签
动态添加/删除标签（.addTab()、.removeTab()方法）
AJAX与服务器端内容加载
动态显示/隐藏标签
标签内的响应式表单（FormGroup、FormControl）
使用TemplateRe复用内容

Tab Selection & Navigation

标签选择与导航

📄 Read: references/selection-navigation.md

Tab selection events (selecting, selected)
Programmatic tab selection (.select() method)
Determining user vs programmatic selection (isInteracted)
Keyboard navigation (Tab key, arrow keys, Enter/Space)
Click handlers and selection callbacks

📄 阅读： references/selection-navigation.md

标签选择事件（selecting、selected）
程序化选择标签（.select()方法）
区分用户触发与程序化选择（isInteracted属性）
键盘导航（Tab键、方向键、Enter/Space键）
点击处理程序与选择回调

Customization & Styling

自定义与样式化

📄 Read: references/customization-styling.md

Header styles and CSS classes (fill, background, accent)
Icon positioning and icon CSS customization
Content height management and auto-sizing
Scroll step configuration
Animation control and custom animations
CSS customization guide for advanced styling
Responsive header display

📄 阅读： references/customization-styling.md

标签头样式与CSS类（填充、背景、强调色）
图标定位与图标CSS自定义
内容高度管理与自动调整
滚动步长配置
动画控制与自定义动画
高级样式化的CSS自定义指南
响应式标签头展示

Drag and Drop Reordering

拖放重排

📄 Read: references/drag-and-drop-reordering.md

Enable drag and drop with
```
allowDragAndDrop
```
property
Configure drag area with
```
dragArea
```
property
Handle
```
onDragStart
```
,
```
dragging
```
,
```
dragged
```
events
Prevent dragging/dropping specific tabs
Reorder active tab in popup overflow mode
Drag items between multiple Tab components
Drag Tab items to external components (TreeView, etc.)

📄 阅读： references/drag-and-drop-reordering.md

使用
```
allowDragAndDrop
```
属性启用拖放
使用
```
dragArea
```
属性配置拖拽区域
处理
```
onDragStart
```
、
```
dragging
```
、
```
dragged
```
事件
禁止特定标签的拖拽/放置
在弹出溢出模式下重排激活标签
在多个Tab组件之间拖拽项
将Tab项拖拽到外部组件（如TreeView）

Localization and Orientation

本地化与布局方向

📄 Read: references/localization-and-orientation.md

Localize UI text using
```
locale
```
property and L10n class
Header placement options (Top, Bottom, Left, Right)
Overflow modes (Scrollable vs Popup)
```
scrollStep
```
configuration for scroll speed
Responsive orientation changes based on screen size
Multi-language support with custom translations

📄 阅读： references/localization-and-orientation.md

使用
```
locale
```
属性和L10n类本地化UI文本
标签头位置选项（顶部、底部、左侧、右侧）
溢出模式（滚动式 vs 弹出式）
配置
```
scrollStep
```
调整滚动速度
根据屏幕尺寸自动切换响应式布局方向
支持多语言的自定义翻译

State Persistence and Data Binding

状态持久化与数据绑定

📄 Read: references/state-persistence-and-data-binding.md

Enable persistence with
```
enablePersistence
```
property
Automatic state saving to browser localStorage
Binding tabs to data sources (arrays, APIs, DataManager)
Loading tab data from remote servers (OData, HTTP)
Load tab content through POST requests
Combined persistence with dynamic data binding

📄 阅读： references/state-persistence-and-data-binding.md

使用
```
enablePersistence
```
属性启用持久化
自动将状态保存到浏览器localStorage
将标签绑定到数据源（数组、API、DataManager）
从远程服务器加载标签数据（OData、HTTP）
通过POST请求加载标签内容
结合持久化与动态数据绑定

Advanced Scenarios

高级场景

📄 Read: references/advanced-scenarios.md

Nested tabs (multiple levels of tabbed content)
Collapsible tabs with accordion-like behavior
Wizard pattern implementation (step validation)
State persistence with LocalStorage/SessionStorage
Component initialization from events
Edge cases and best practices

📄 阅读： references/advanced-scenarios.md

嵌套标签（多层标签内容）
类似手风琴的可折叠标签
向导模式实现（步骤验证）
使用LocalStorage/SessionStorage实现状态持久化
通过事件初始化组件
边缘案例与最佳实践

Responsive & Adaptive Behavior

响应式与自适应行为

📄 Read: references/responsive-adaptive.md

Adaptive rendering for constrained spaces
Overflow modes: Scrollable and Popup
Responsive tab display on mobile/desktop
Orientation changes (horizontal/vertical)
Prevent swipe selection on touch devices
Width and height constraints

📄 阅读： references/responsive-adaptive.md

受限空间下的自适应渲染
溢出模式：滚动式与弹出式
移动端/桌面端的响应式标签展示
布局方向切换（水平/垂直）
禁止触摸设备上的滑动选择
宽度与高度约束

Troubleshooting & Best Practices

故障排除与最佳实践

📄 Read: references/troubleshooting.md

Common implementation issues and solutions
Performance optimization techniques
Content rendering gotchas
State management pitfalls
Accessibility and keyboard support
Animation performance
Migration from EJ1 to EJ2

📄 阅读： references/troubleshooting.md

常见实现问题与解决方案
性能优化技巧
内容渲染注意事项
状态管理陷阱
可访问性与键盘支持
动画性能优化
从EJ1迁移到EJ2

Quick Start Example

快速入门示例

Basic Tab with multiple content panels:

typescript

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

@Component({
  imports: [TabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-tab id="element">
      <e-tabitems>
        <e-tabitem [header]="headerText[0]" [content]="content0"></e-tabitem>
        <e-tabitem [header]="headerText[1]" [content]="content1"></e-tabitem>
        <e-tabitem [header]="headerText[2]" [content]="content2"></e-tabitem>
      </e-tabitems>
    </ejs-tab>
  `
})
export class AppComponent {
  public headerText: object[] = [
    { text: 'Home' },
    { text: 'Settings' },
    { text: 'Profile' }
  ];

  public content0 = 'Welcome to the home tab with your dashboard content.';
  public content1 = 'Configure application settings and preferences here.';
  public content2 = 'View and edit your user profile information.';
}

包含多个内容面板的基础标签组件：

typescript

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

@Component({
  imports: [TabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-tab id="element">
      <e-tabitems>
        <e-tabitem [header]="headerText[0]" [content]="content0"></e-tabitem>
        <e-tabitem [header]="headerText[1]" [content]="content1"></e-tabitem>
        <e-tabitem [header]="headerText[2]" [content]="content2"></e-tabitem>
      </e-tabitems>
    </ejs-tab>
  `
})
export class AppComponent {
  public headerText: object[] = [
    { text: 'Home' },
    { text: 'Settings' },
    { text: 'Profile' }
  ];

  public content0 = 'Welcome to the home tab with your dashboard content.';
  public content1 = 'Configure application settings and preferences here.';
  public content2 = 'View and edit your user profile information.';
}

Common Patterns

常见模式

Pattern 1: Dynamic Tab Creation

模式1：动态创建标签

typescript

// Add new tab at specific index
const newTab = { 
  header: { text: 'New Tab' }, 
  content: 'New content here' 
};
this.tabObj.addTab([newTab], 2);

typescript

// 在指定索引处添加新标签
const newTab = { 
  header: { text: 'New Tab' }, 
  content: 'New content here' 
};
this.tabObj.addTab([newTab], 2);

Pattern 2: Selection with Event Handling

模式2：带事件处理的标签选择

typescript

// Handle tab selection changes
onTabSelected(args: SelectEventArgs) {
  console.log('Selected tab index:', args.selectedIndex);
  // Refresh data for selected tab
  this.loadDataForTab(args.selectedIndex);
}

typescript

// 处理标签选择变化
onTabSelected(args: SelectEventArgs) {
  console.log('Selected tab index:', args.selectedIndex);
  // 刷新选中标签的数据
  this.loadDataForTab(args.selectedIndex);
}

Pattern 3: Responsive Tab Header with Icons

模式3：带图标的响应式标签头

typescript

public headerText: object[] = [
  { text: 'Dashboard', iconCss: 'e-icons e-home' },
  { text: 'Products', iconCss: 'e-icons e-shopping-cart' },
  { text: 'Orders', iconCss: 'e-icons e-receipt' }
];

typescript

public headerText: object[] = [
  { text: 'Dashboard', iconCss: 'e-icons e-home' },
  { text: 'Products', iconCss: 'e-icons e-shopping-cart' },
  { text: 'Orders', iconCss: 'e-icons e-receipt' }
];

Pattern 4: Content Rendering Mode Selection

模式4：选择内容渲染模式

typescript

// Use Dynamic mode for memory optimization
<ejs-tab 
  loadOn="Dynamic"  // Only active content in DOM
  heightAdjustMode="Auto">
</ejs-tab>

typescript

// 使用动态模式优化内存
<ejs-tab 
  loadOn="Dynamic"  // 仅激活内容在DOM中
  heightAdjustMode="Auto">
</ejs-tab>

Pattern 5: Keyboard Navigation

模式5：键盘导航

typescript

// Tab component has built-in keyboard support
// Tab key - focus next header
// Arrow keys - navigate between tabs
// Enter/Space - activate tab
// Users can switch tabs without mouse

typescript

// Tab组件内置键盘支持
// Tab键 - 聚焦下一个标签头
// 方向键 - 在标签间导航
// Enter/Space键 - 激活标签
// 用户无需鼠标即可切换标签

Key Properties & Methods

核心属性与方法

Common Properties:

```
items
```
- Tab item collection
```
selectedIndex
```
- Currently active tab index
```
heightAdjustMode
```
- How content height is managed
```
loadOn
```
- Content rendering mode (Default, Dynamic, Init)
```
overflowMode
```
- Handling overflow (Scrollable, Popup)
```
animation
```
- Animation configuration
```
allowDragAndDrop
```
- Enable/disable drag-drop (boolean)
```
dragArea
```
- CSS selector for drag boundary
```
reorderActiveTab
```
- Reorder active from popup (boolean)
```
headerPlacement
```
- Header position (Top, Bottom, Left, Right)
```
enablePersistence
```
- Save/restore state (boolean)
```
locale
```
- Language/culture code (e.g., 'en-US', 'fr-FR')
```
scrollStep
```
- Pixels to scroll per click

Key Methods:

```
.select(index)
```
- Programmatically select tab
```
.addTab(items, index)
```
- Add new tabs
```
.removeTab(index)
```
- Remove tab
```
.hideTab(index, hide)
```
- Hide/show tab (hide=true to hide, false to show)
```
.refresh()
```
- Refresh tab layout
```
.dataBind()
```
- Update data binding

Important Events:

```
selecting
```
- Before tab selection
```
selected
```
- After tab selection
```
onDragStart
```
- Before drag begins (cancellable)
```
dragging
```
- During drag operation
```
dragged
```
- After drop completes (cancellable)
```
created
```
- Tab component initialized
```
destroyed
```
- Tab component destroyed

常用属性：

```
items
```
- 标签项集合
```
selectedIndex
```
- 当前激活的标签索引
```
heightAdjustMode
```
- 内容高度管理方式
```
loadOn
```
- 内容渲染模式（默认、动态、初始化）
```
overflowMode
```
- 溢出处理方式（滚动式、弹出式）
```
animation
```
- 动画配置
```
allowDragAndDrop
```
- 启用/禁用拖放（布尔值）
```
dragArea
```
- 拖拽边界的CSS选择器
```
reorderActiveTab
```
- 在弹出模式下重排激活标签（布尔值）
```
headerPlacement
```
- 标签头位置（顶部、底部、左侧、右侧）
```
enablePersistence
```
- 保存/恢复状态（布尔值）
```
locale
```
- 语言/区域代码（如'en-US'、'fr-FR'）
```
scrollStep
```
- 每次点击的滚动像素数

核心方法：

```
.select(index)
```
- 程序化选择标签
```
.addTab(items, index)
```
- 添加新标签
```
.removeTab(index)
```
- 删除标签
```
.hideTab(index, hide)
```
- 显示/隐藏标签（hide=true为隐藏，false为显示）
```
.refresh()
```
- 刷新标签布局
```
.dataBind()
```
- 更新数据绑定

重要事件：

```
selecting
```
- 标签选择前触发
```
selected
```
- 标签选择后触发
```
onDragStart
```
- 拖拽开始前触发（可取消）
```
dragging
```
- 拖拽过程中触发
```
dragged
```
- 拖拽完成后触发（可取消）
```
created
```
- Tab组件初始化完成后触发
```
destroyed
```
- Tab组件销毁后触发

syncfusion-angular-tab

Original

Translation

Implementing Syncfusion Angular Tabs

实现Syncfusion Angular Tabs组件

When to Use This Skill

何时使用该技能

Navigation Guide

导航指南

Getting Started

快速入门

Content Rendering Modes

内容渲染模式

Content Management & Data

内容管理与数据处理

Tab Selection & Navigation

标签选择与导航

Customization & Styling

自定义与样式化

Drag and Drop Reordering

拖放重排

Localization and Orientation

本地化与布局方向

State Persistence and Data Binding

状态持久化与数据绑定

Advanced Scenarios

高级场景

Responsive & Adaptive Behavior

响应式与自适应行为

Troubleshooting & Best Practices

故障排除与最佳实践

Quick Start Example

快速入门示例

Common Patterns

常见模式

Pattern 1: Dynamic Tab Creation

模式1：动态创建标签

Pattern 2: Selection with Event Handling

模式2：带事件处理的标签选择

Pattern 3: Responsive Tab Header with Icons

模式3：带图标的响应式标签头

Pattern 4: Content Rendering Mode Selection

模式4：选择内容渲染模式

Pattern 5: Keyboard Navigation

模式5：键盘导航

Key Properties & Methods

核心属性与方法

Related Skills

相关技能