syncfusion-aspnetcore-tabs

实现 Syncfusion Core Tabs

Syncfusion Tab 组件提供导航控件，可将内容组织到独立且可选的选项卡中。每个选项卡都包含一个标题及关联内容，选中该选项卡时会显示相应内容。

何时使用此技能

• 使用选项卡导航将相关内容组织到逻辑分区中
• 创建逐步推进的向导界面
• 构建类似手风琴的可折叠界面
• 实现可通过拖放重新排序的选项卡项
• 设置支持持久化的有状态选项卡选择
• 自定义标题样式、位置和动画
• 动态加载内容或从外部源加载内容

组件概览

主要功能：

• HeaderPlacement：顶部、底部、左侧或右侧位置
• 内容加载模式：Init（全部加载）、Demand（延迟加载）、Dynamic（替换）
• 支持拖放重新排序，并提供事件回调
• 动画配置，可实现平滑过渡
• 支持 RTL 和本地化
• 页面重新加载后仍可保留状态
• 键盘导航（支持 Tab 键）
• 高度管理：None、Auto、Content 或 Fill

核心属性：

• items：用于定义标题和内容的 TabItem 对象数组
• selectedItem：当前活动选项卡的索引
• heightAdjustMode：控制内容面板的高度行为
• allowDragAndDrop：启用或禁用拖动重新排序
• headerPlacement：选项卡标题的位置
• enablePersistence：重新加载时保存或恢复所选选项卡
• loadOn：内容加载策略（Init/Demand/Dynamic）

文档与导航指南

入门

📄 阅读： references/getting-started.md

• NuGet 包安装与设置
• Tag Helper 配置
• CSS/脚本引用（CDN 和 NPM）
• 使用 TagHelper 初始化基础 Tab
• JSON 项集合与 HTML 元素绑定

选项卡配置与内容

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

• 选项卡标题结构与自定义
• 内容呈现模式（HTML、Partial View、外部 POST、模板）
• 动态加载和填充内容
• 内容模板与内联呈现

选项卡交互功能

📄 阅读： references/tab-interaction.md

• 通过编程或用户交互选择选项卡
• 点击处理程序和选择事件
• 支持 Tab 键的键盘导航
• 在选项卡之间拖放重新排序
• 嵌套选项卡和分层结构

样式与布局

📄 阅读： references/styling-layout.md

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

高级功能

📄 阅读： references/advanced-features.md

• 状态持久化配置
• 本地化与国际化
• RTL（从右向左）支持
• 动画自定义（上一个/下一个效果）
• 可折叠选项卡和向导模式
• 用于编程控制的 API 方法

API 参考

📄 阅读： references/api-reference.md

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

快速入门示例

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

@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>

常见模式

延迟加载内容（Demand 模式）

<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 模式）

<ejs-tab id="ej2Tab" loadOn="ContentLoad.Dynamic">
    
</ejs-tab>

拖放重新排序

<ejs-tab id="ej2Tab" allowDragAndDrop="true">
    
</ejs-tab>

标题定位（垂直导航）

<ejs-tab id="ej2Tab" headerPlacement="@HeaderPosition.Left">
    
</ejs-tab>

高度管理

<ejs-tab id="ej2Tab" heightAdjustMode="@HeightStyles.Auto">
    
</ejs-tab>

状态持久化

<ejs-tab id="ej2Tab" enablePersistence="true" selectedItem="1">
    
</ejs-tab>

关键事件

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

集成检查清单

• 已安装 NuGet 包：Syncfusion.EJ2.AspNet.Core
• 已在 _ViewImports.cshtml 中注册 Tag Helper
• 已在布局中引用 CSS 主题（CDN 或 NPM）
• 已在布局正文中添加脚本管理器 <ejs-scripts>
• 每个页面上的 Tab 组件 ID 均唯一
• 已选择内容策略（Init/Demand/Dynamic）
• 已根据布局配置高度模式
• 如需动态行为，已绑定事件
• 如需在重新加载后保留标签页状态，已启用持久化
• 已验证无障碍功能（键盘导航）

---

后续步骤： 根据功能需求查看相应的参考文件。先从 getting-started.md 开始进行基本设置，然后按需了解高级功能和 API 参考。