选项卡表格

简介

选项卡组件用于在表格顶部提供多个标签页切换，实现数据分类展示。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 使用选项卡（指定URL参数名）
  $builder->useTabs('tab');
  
  // 添加选项卡
  $builder->addTab('全部', '');
  $builder->addTab('进行中', 'active');
  $builder->addTab('已完成', 'completed');
});

带图标的选项卡

Builder::crud(function($builder) {
  $builder->useTabs('status');
  
  // 添加带图标的选项卡
  $builder->addTab('全部', '', 'fa fa-list');
  $builder->addTab('待审核', 'pending', 'fa fa-clock-o');
  $builder->addTab('已通过', 'approved', 'fa fa-check');
  $builder->addTab('已拒绝', 'rejected', 'fa fa-times');
});

批量添加选项卡

Builder::crud(function($builder) {
  $builder->useTabs('type');
  
  // 批量添加
  $builder->addTabs([
    ['label' => '全部', 'value' => ''],
    ['label' => '文章', 'value' => 'article', 'icon' => 'fa fa-file-text'],
    ['label' => '视频', 'value' => 'video', 'icon' => 'fa fa-video-camera'],
    ['label' => '图片', 'value' => 'image', 'icon' => 'fa fa-image']
  ]);
});

限制选项卡数量

Builder::crud(function($builder) {
  // 获取选项卡实例并设置最大数量
  $tabs = $builder->useTabs('category');
  $tabs->count(5); // 最多显示5个选项卡
  
  // 添加选项卡（超过5个的不会显示）
  $builder->addTab('全部', '');
  $builder->addTab('分类1', '1');
  $builder->addTab('分类2', '2');
  // ... 更多选项卡
});

可用方法

方法名参数返回值说明
useTabsfieldXbTabs启用选项卡并指定URL参数名
addTablabel, value, iconthis添加单个选项卡
addTabsitemsthis批量添加选项卡

方法参数说明

useTabs

参数名类型默认值说明
fieldstring'_tab'URL参数名，用于标识选中的选项卡

addTab

参数名类型默认值说明
labelstring必填选项卡显示文本
valuemixed必填选项卡的值
iconstring''图标类名

addTabs

参数名类型默认值说明
itemsarray必填选项卡数组，每项包含 label、value、icon 等字段

选项卡配置

字段名类型必填说明
labelstring是显示文本
valuemixed是值（将作为URL参数）
iconstring否图标类名

选项卡组件属性

属性名类型默认值说明
fieldstring_tabURL参数字段名
countint-最大显示数量
itemsarray[]选项卡列表

使用场景

  • 状态分类展示
  • 类型快速切换
  • 数据分组查看
  • 内容分类导航

注意事项

  1. 选项卡显示在表格顶部
  2. 点击选项卡会自动更新URL参数并刷新数据
  3. 当前选中的选项卡会高亮显示
  4. 可以通过 count 属性限制显示数量
  5. 超过数量限制的选项卡不会显示
  6. 选项卡值为空字符串表示"全部"或不筛选
  7. URL参数会保留其他筛选条件