简介

标签组件用于在表格列中以标签形式展示内容，支持多种颜色和显示模式。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 添加标签列
  $builder->addColumnTag('tag', '标签');
});

自定义配置

Builder::crud(function($builder) {
  // 使用回调函数自定义配置
  $builder->addColumnTag('labels', '标签', function($component) {
    $component->color('primary'); // 设置颜色
    $component->displayMode('normal'); // 显示模式
  });
  
  // 使用数组方式配置
  $builder->addColumnTag('category', '分类', [
    'color' => 'success',
    'displayMode' => 'normal'
  ]);
});

组件参数

参数名	类型	默认值	说明
name	string	必填	字段名称，对应数据库字段
label	string	必填	列标题，显示在表格头部
option	callable\|array	[]	配置选项，可以是回调函数或数组

标签组件属性

属性名	类型	默认值	说明
color	string	active	标签颜色：'active'、'primary'、'success'、'warning'、'danger'、'info'
displayMode	string	normal	显示模式：'normal'、'rounded'、'status'
className	string	-	CSS 类名
width	int\|string	-	列宽度
align	string	center	水平对齐方式（默认居中）
vAlign	string	-	垂直对齐方式

颜色选项

颜色值	说明	视觉效果
active	激活色	蓝色
primary	主色	深蓝色
success	成功色	绿色
warning	警告色	黄色
danger	危险色	红色
info	信息色	浅蓝色

显示模式

模式	说明
normal	普通标签模式
rounded	圆角标签模式
status	状态点模式

使用场景

分类标签展示
状态标识
热门标记
优先级显示
类型标识

注意事项

默认颜色为 'active'（蓝色）
默认显示模式为 'normal'
默认居中对齐显示
支持多种预定义颜色样式
可以通过 className 自定义更多样式