syncfusion-aspnetcore-tabs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Core Tabs

实现Syncfusion Core标签页

The Syncfusion Tab component provides a navigation control for organizing content into separate, selectable tabs. Each tab consists of a header and associated content that appears when the tab is selected.

Syncfusion Tab组件提供了一个导航控件，可将内容组织到独立的、可选择的标签页中。每个标签页包含一个标题，以及选中该标签页时显示的关联内容。

When to Use This Skill

何时使用此技能

Organizing related content into logical sections with tab navigation
Creating wizard interfaces with step-by-step progression
Building collapsible accordion-like interfaces
Implementing drag-and-drop reorderable tab items
Setting up stateful tab selection with persistence
Customizing header styles, positions, and animations
Loading content dynamically or from external sources

将相关内容组织到带标签导航的逻辑区域中
创建分步式向导界面
构建类似折叠面板的可折叠界面
实现可拖拽重排的标签项
设置带持久化的状态化标签选择
自定义标题样式、位置和动画效果
动态加载内容或从外部源加载内容

Component Overview

组件概述

Key Features:

HeaderPlacement: Top, Bottom, Left, or Right positioning
Content loading modes: Init (all), Demand (lazy-load), Dynamic (replace)
Drag-and-drop reordering with event callbacks
Animation configuration for smooth transitions
RTL support and localization
State persistence across page reloads
Keyboard navigation (Tab key support)
Height management: None, Auto, Content, or Fill

Core Properties:

```
items
```
: Array of TabItem objects defining headers and content
```
selectedItem
```
: Index of the active tab
```
heightAdjustMode
```
: Controls content panel height behavior
```
allowDragAndDrop
```
: Enable/disable drag reordering
```
headerPlacement
```
: Position of tab headers
```
enablePersistence
```
: Save/restore selected tab on reload
```
loadOn
```
: Content loading strategy (Init/Demand/Dynamic)

核心特性：

HeaderPlacement：标题可置于顶部、底部、左侧或右侧
内容加载模式：初始化加载（全部）、按需加载（懒加载）、动态加载（替换）
带事件回调的拖拽重排功能
平滑过渡的动画配置
支持RTL（从右到左）布局和本地化
跨页面重载的状态持久化
键盘导航（支持Tab键）
高度管理：无、自动、内容适配、填充

核心属性：

```
items
```
：定义标题和内容的TabItem对象数组
```
selectedItem
```
：活动标签页的索引
```
heightAdjustMode
```
：控制内容面板的高度行为
```
allowDragAndDrop
```
：启用/禁用拖拽重排
```
headerPlacement
```
：标签标题的位置
```
enablePersistence
```
：在页面重载时保存/恢复选中的标签页
```
loadOn
```
：内容加载策略（Init/Demand/Dynamic）

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

NuGet package installation and setup
Tag Helper configuration
CSS/script references (CDN and NPM)
Basic Tab initialization with TagHelper
JSON items collection vs HTML element binding

📄 阅读： references/getting-started.md

NuGet包安装与设置
TagHelper配置
CSS/脚本引用（CDN和NPM）
使用TagHelper初始化基础标签页
JSON项集合与HTML元素绑定对比

Tab Configuration and Content

标签页配置与内容

📄 Read: references/tab-content-rendering.md

Tab header structure and customization
Content rendering modes (HTML, Partial View, External POST, Templates)
Dynamic content loading and population
Content templates and inline rendering

📄 阅读： references/tab-content-rendering.md

标签页标题结构与自定义
内容渲染模式（HTML、局部视图、外部POST、模板）
动态内容加载与填充
内容模板与内联渲染

Tab Interaction Features

标签页交互特性

📄 Read: references/tab-interaction.md

Tab selection programmatically and via user interaction
Click handlers and selection events
Keyboard navigation with Tab key support
Drag-and-drop reordering between tabs
Nested tabs and hierarchical structures

📄 阅读： references/tab-interaction.md

通过编程方式或用户交互选择标签页
点击处理程序与选择事件
支持Tab键的键盘导航
标签页间的拖拽重排
嵌套标签页与层级结构

Styling and Layout

样式与布局

📄 Read: references/styling-layout.md

CSS class customization (e-fill, e-background, e-accent)
Tab height and content height adjustment modes
Horizontal scrolling and popup overflow modes
Header icon positioning and orientations
Responsive design patterns

📄 阅读： references/styling-layout.md

CSS类自定义（e-fill、e-background、e-accent）
标签页高度与内容高度调整模式
水平滚动与弹出式溢出模式
标题图标位置与方向
响应式设计模式

Advanced Features

高级特性

📄 Read: references/advanced-features.md

State persistence configuration
Localization and internationalization
RTL (right-to-left) support
Animation customization (previous/next effects)
Collapsible tabs and wizard patterns
API methods for programmatic control

📄 阅读： references/advanced-features.md

状态持久化配置
本地化与国际化
RTL（从右到左）布局支持
动画自定义（切换前后的效果）
可折叠标签页与向导模式
用于编程控制的API方法

API Reference

API参考

📄 Read: references/api-reference.md

Complete API documentation
All properties with types and defaults
Event signatures and parameters
Methods for runtime manipulation

📄 阅读： references/api-reference.md

完整的API文档
所有属性的类型与默认值
事件签名与参数
用于运行时操作的方法

Quick Start Example

快速入门示例

Basic Tab with three items using TagHelper syntax:

cshtml

@using Syncfusion.EJ2.Navigations;

<ejs-tab id="ej2Tab">
    <e-tab-tabitems>
        <e-tab-tabitem header="@(new TabHeader { Text = "Home" })" content="Welcome to home tab"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Profile" })" content="Your profile information"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Settings" })" content="Adjust your settings"></e-tab-tabitem>
    </e-tab-tabitems>
</ejs-tab>

使用TagHelper语法创建包含三个项的基础标签页：

cshtml

@using Syncfusion.EJ2.Navigations;

<ejs-tab id="ej2Tab">
    <e-tab-tabitems>
        <e-tab-tabitem header="@(new TabHeader { Text = "Home" })" content="Welcome to home tab"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Profile" })" content="Your profile information"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Settings" })" content="Adjust your settings"></e-tab-tabitem>
    </e-tab-tabitems>
</ejs-tab>

Common Patterns

常见模式

Lazy-Loading Content (Demand Mode)

懒加载内容（按需模式）

cshtml

<ejs-tab id="ej2Tab" loadOn="ContentLoad.Demand">
    <e-tab-tabitems>
        <e-tab-tabitem header="@(new TabHeader { Text = "Tab1" })" content="Content loads on demand"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Tab2" })" content="Second tab content"></e-tab-tabitem>
    </e-tab-tabitems>
</ejs-tab>

cshtml

<ejs-tab id="ej2Tab" loadOn="ContentLoad.Demand">
    <e-tab-tabitems>
        <e-tab-tabitem header="@(new TabHeader { Text = "Tab1" })" content="Content loads on demand"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Tab2" })" content="Second tab content"></e-tab-tabitem>
    </e-tab-tabitems>
</ejs-tab>

Dynamic Content Only (Dynamic Mode)

仅动态内容（动态模式）

cshtml

<ejs-tab id="ej2Tab" loadOn="ContentLoad.Dynamic">
    <!-- Only the selected tab's content is in DOM -->
</ejs-tab>

cshtml

<ejs-tab id="ej2Tab" loadOn="ContentLoad.Dynamic">
    <!-- Only the selected tab's content is in DOM -->
</ejs-tab>

Drag-and-Drop Reordering

拖拽重排

cshtml

<ejs-tab id="ej2Tab" allowDragAndDrop="true">
    <!-- Tab items can be dragged and reordered -->
</ejs-tab>

cshtml

<ejs-tab id="ej2Tab" allowDragAndDrop="true">
    <!-- Tab items can be dragged and reordered -->
</ejs-tab>

Header Positioning (Vertical Navigation)

标题定位（垂直导航）

cshtml

<ejs-tab id="ej2Tab" headerPlacement="@HeaderPosition.Left">
    <!-- Headers appear on the left side -->
</ejs-tab>

cshtml

<ejs-tab id="ej2Tab" headerPlacement="@HeaderPosition.Left">
    <!-- Headers appear on the left side -->
</ejs-tab>

Height Management

高度管理

cshtml

<ejs-tab id="ej2Tab" heightAdjustMode="@HeightStyles.Auto">
    <!-- Content height auto-adjusts to tallest panel -->
</ejs-tab>

cshtml

<ejs-tab id="ej2Tab" heightAdjustMode="@HeightStyles.Auto">
    <!-- Content height auto-adjusts to tallest panel -->
</ejs-tab>

State Persistence

状态持久化

cshtml

<ejs-tab id="ej2Tab" enablePersistence="true" selectedItem="1">
    <!-- Selected tab index is saved and restored across page loads -->
</ejs-tab>

cshtml

<ejs-tab id="ej2Tab" enablePersistence="true" selectedItem="1">
    <!-- Selected tab index is saved and restored across page loads -->
</ejs-tab>

Key Events

关键事件

Event	Trigger	Use Case
`selecting`	Before tab selection	Validate tab change or prevent selection
`selected`	After tab selection	Perform actions on tab switch, detect user vs programmatic selection
`adding`	Before adding tab item	Validate new item before insertion
`added`	After adding tab item	Update UI after new tab is added
`removing`	Before removing tab item	Confirm deletion or cleanup data
`removed`	After removing tab item	Update state after removal
`onDragStart`	Before drag operation	Prevent dragging specific items
`dragging`	During drag operation	Provide visual feedback
`dragged`	After drop operation	Update data or move to external source
`created`	Component initialized	Initialize related controls
`destroyed`	Component destroyed	Clean up resources

事件	触发时机	使用场景
`selecting`	标签页选择前	验证标签页切换或阻止选择
`selected`	标签页选择后	在标签切换时执行操作，区分用户选择与编程式选择
`adding`	添加标签项前	在插入前验证新项
`added`	添加标签项后	添加新标签页后更新UI
`removing`	移除标签项前	确认删除或清理数据
`removed`	移除标签项后	移除后更新状态
`onDragStart`	拖拽操作前	阻止拖拽特定项
`dragging`	拖拽操作中	提供视觉反馈
`dragged`	拖拽完成后	更新数据或移动到外部源
`created`	组件初始化后	初始化相关控件
`destroyed`	组件销毁后	清理资源

Integration Checklist

集成检查清单

NuGet package installed:
```
Syncfusion.EJ2.AspNet.Core
```
Tag Helper registered in
```
_ViewImports.cshtml
```
CSS theme referenced in layout (CDN or NPM)
Script manager
```
<ejs-scripts>
```
in layout body
Tab component ID is unique per page
Content strategy chosen (Init/Demand/Dynamic)
Height mode configured for your layout
Events wired if dynamic behavior needed
Persistence enabled if tab state should survive reload
Accessibility verified (keyboard navigation)

Next Steps: Review the specific reference files based on your feature requirements. Start with getting-started.md for basic setup, then explore advanced features and API reference as needed.

已安装NuGet包：
```
Syncfusion.EJ2.AspNet.Core
```
已在
```
_ViewImports.cshtml
```
中注册Tag Helper
已在布局中引用CSS主题（CDN或NPM）
布局主体中已添加脚本管理器
```
<ejs-scripts>
```
标签页组件ID在每页中唯一
已选择内容策略（Init/Demand/Dynamic）
已为布局配置高度模式
已绑定动态行为所需的事件
若标签页状态需在重载后保留，已启用持久化
已验证可访问性（键盘导航）

下一步： 根据你的功能需求查看特定的参考文件。从getting-started.md开始进行基础设置，然后根据需要探索高级特性和API参考。