🎛️ 控制面板
🚀 基础功能演示
展示超级选项卡的基础功能，包括主题切换、图标支持、通知徽章等特性。
🏠 首页
欢迎使用 MyTabs 超级选项卡组件！这是一个功能强大、样式丰富的选项卡解决方案。
当前状态：已激活
// 获取当前选项卡信息
var tabInfo = {
tabValue: "home",
tabText: "首页",
isActive: true,
hasBadge: false
};
👥 用户管理
用户管理模块，支持用户的增删改查操作。
当前状态：未激活
通知数量：99+
📧 消息中心
消息中心模块，显示系统消息和用户通知。
当前状态：未激活
未读消息：12条
⚙️ 系统设置
系统设置模块，配置系统参数和用户偏好。
当前状态：未激活
🔒 管理员
管理员模块，当前已被禁用。
当前状态：已禁用
🎨 主题样式展示
展示不同的主题样式，每种主题都有独特的视觉效果。
默认主题
深色主题
浅色主题
绿色主题
紫色主题
🔧 高级功能展示
展示超级选项卡的高级功能，包括动态数据绑定、事件处理等。
动态数据绑定
支持从数据源动态生成选项卡，实时更新内容和状态。
// 数据源配置
{
"Name": "home",
"Value": "首页",
"Icon": "home",
"ShowNotification": true,
"NotificationContent": "99+"
}
事件处理
支持单击和切换事件，可绑定自定义命令和业务逻辑。
// 事件处理示例
onTabClick(tabValue, tabText) {
console.log(`点击了: ${tabText}`);
// 执行自定义逻辑
}
状态管理
支持禁用、激活等状态控制，动态修改选项卡属性。
// 设置选项卡状态
setTabStatus("users", {
disabled: false,
active: true,
badge: "99+"
});
响应式设计
支持横向和纵向布局，自动适配不同屏幕尺寸。
// 布局配置
{
direction: "horizontal", // 或 "vertical"
alignment: "left", // 对齐方式
responsive: true // 响应式
}
📖 使用说明
MyTabs 超级选项卡提供了丰富的配置选项和功能特性，以下是主要的使用方法：
1. 基础配置
在 Forguncy 设计器中拖拽"超级选项卡"到页面，设置单元格名称和基本属性。
2. 数据源绑定
配置数据源，包含 Name、Value、Icon 等字段，支持动态数据更新。
3. 样式定制
选择主题样式，调整布局属性，自定义颜色和圆角等视觉效果。
4. 事件处理
绑定单击和切换事件，实现自定义的业务逻辑和交互效果。