单选框按钮组表单项
单选框按钮组表单项组件,用于在表单中添加按钮组样式的单选组件,支持垂直、平铺等多种布局模式。
用法示例
<?php
use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;
// 创建表单
Builder::form(function (Form $builder) {
// 添加单选框按钮组
$builder->addRowRadioButton('status', '状态', '1', function ($component) {
$component->options([
['label' => '启用', 'value' => '1'],
['label' => '禁用', 'value' => '0'],
]);
$component->btnLevel('primary');
$component->btnActiveLevel('success');
});
// 垂直模式
$builder->addRowRadioButton('type', '类型', '', function ($component) {
$component->options([
['label' => '类型1', 'value' => '1'],
['label' => '类型2', 'value' => '2'],
['label' => '类型3', 'value' => '3'],
]);
$component->vertical(true);
});
// 平铺模式
$builder->addRowRadioButton('level', '等级', '', function ($component) {
$component->options([
['label' => '初级', 'value' => '1'],
['label' => '中级', 'value' => '2'],
['label' => '高级', 'value' => '3'],
]);
$component->tiled(true);
});
});组件参数
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| field | string | - | 字段名,必填 |
| title | string | - | 标题,必填 |
| value | mixed | '' | 默认值 |
| vertical | bool | false | 是否使用垂直模式 |
| tiled | bool | false | 是否使用平铺模式 |
| btnLevel | string | 'default' | 按钮样式,可选:link/primary/secondary/info/success/warning/danger/light/dark/default |
| btnActiveLevel | string | 'primary' | 选中按钮样式,可选值同btnLevel |
| options | array | [] | 选项组,格式:[['label'=>'名称', 'value'=>'值']] |
| multiple | bool | false | 是否多选 |
| labelField | string | 'label' | 选项标签字段名 |
| valueField | string | 'value' | 选项值字段名 |
| joinValues | bool | true | 是否拼接值 |
| extractValue | bool | false | 是否提取值 |
| autoFill | array | [] | 自动填充配置 |
使用说明
- 基本使用:通过
addRowRadioButton()方法添加单选框按钮组,必须提供字段名和标题 - 选项配置:使用
options()方法设置选项数组,每个选项包含label和value - 按钮样式:通过
btnLevel()设置默认按钮样式,btnActiveLevel()设置选中状态样式 - 布局模式:使用
vertical()启用垂直布局,使用tiled()启用平铺布局 - 多选模式:设置
multiple(true)可启用多选功能 - 字段映射:可通过
labelField()和valueField()自定义选项的标签和值字段 - 值处理:
joinValues()控制是否拼接值,extractValue()控制是否提取值