简介

进度组件用于在表格列中展示进度条，可视化显示数值进度。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 添加进度列
  $builder->addColumnProgress('progress', '完成进度');
});

自定义配置

Builder::crud(function($builder) {
  // 使用回调函数自定义配置
  $builder->addColumnProgress('completion', '完成率', function($component) {
    $component->showLabel(true); // 显示百分比标签
    $component->mode('line'); // 线性进度条
    $component->map([
      'success' => '<= 100',
      'warning' => '> 60 && < 100',
      'danger' => '<= 60'
    ]);
  });
  
  // 使用数组方式配置
  $builder->addColumnProgress('score', '得分', [
    'showLabel' => true,
    'className' => 'progress-bar-striped'
  ]);
});

组件参数

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

进度组件属性

属性名	类型	默认值	说明
mode	string	line	进度条模式：'line'（线性）、'circle'（圆形）、'dashboard'（仪表盘）
className	string	-	CSS 类名
showLabel	bool	false	是否显示百分比标签
stripe	bool	-	是否显示斑马纹
animate	bool	-	是否显示动画效果
map	array	-	颜色映射配置
width	int\|string	-	列宽度

颜色映射配置

可以根据进度值设置不同的颜色：

'map' => [
  'success' => '>= 80',      // 绿色：大于等于80
  'warning' => '>= 60 && < 80', // 黄色：60-80之间
  'danger' => '< 60'         // 红色：小于60
]

使用场景

任务完成进度
下载上传进度
学习进度展示
目标达成率
考试成绩展示

注意事项

数据库字段应存储0-100之间的数值
支持三种显示模式：线性、圆形、仪表盘
可以通过 map 配置根据进度值显示不同颜色
showLabel 可以在进度条上显示具体百分比