图标展示

简介

图标组件用于在表格列中展示图标，支持 FontAwesome 等图标库。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

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

自定义配置

Builder::crud(function($builder) {
  // 使用回调函数自定义配置
  $builder->addColumnIcon('type_icon', '类型图标', function($component) {
    $component->className('text-primary');
    $component->width(80);
  });
  
  // 使用数组方式配置
  $builder->addColumnIcon('status_icon', '状态图标', [
    'width' => 60,
    'align' => 'center'
  ]);
});

组件参数

参数名类型默认值说明
namestring必填字段名称，对应数据库字段（存储图标类名）
labelstring必填列标题，显示在表格头部
optioncallable|array[]配置选项，可以是回调函数或数组

图标组件属性

属性名类型默认值说明
classNamestring-外层 CSS 类名
widthint|string-列宽度
alignstring-水平对齐方式
vAlignstring-垂直对齐方式

使用场景

  • 文件类型图标展示
  • 状态图标展示
  • 功能类型标识
  • 分类图标

注意事项

  1. 数据库字段应存储完整的图标类名（如：'fa fa-user'）
  2. 支持 FontAwesome、Material Icons 等图标库
  3. 可以通过 className 添加颜色样式
  4. 建议设置合适的列宽度以优化显示效果