简介

卡片组件用于在表格列中以卡片形式展示复杂内容，支持标题、副标题、图片等多种内容组合。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 添加卡片列（必须指定fields参数）
  $builder->addColumnCard('info', '信息', [
    'title' => 'name',  // 必填：卡片标题字段
    'subTitle' => 'desc', // 可选：副标题字段
    'image' => 'avatar' // 可选：图片字段
  ]);
});

完整配置

Builder::crud(function($builder) {
  // 带完整配置的卡片
  $builder->addColumnCard('product_info', '产品信息', 
    [
      'title' => 'product_name',
      'subTitle' => 'product_desc',
      'image' => 'product_image'
    ],
    function($component) {
      $component->width(300);
      $component->className('custom-card');
    }
  );
  
  // 使用数组方式配置
  $builder->addColumnCard('user_info', '用户卡片',
    [
      'title' => 'username',
      'subTitle' => 'email',
      'image' => 'avatar'
    ],
    [
      'width' => 250,
      'className' => 'user-card'
    ]
  );
});

组件参数

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

卡片字段配置（fields）

字段名	类型	必填	说明
title	string	是	卡片标题对应的数据字段名
subTitle	string	否	卡片副标题对应的数据字段名
image	string	否	卡片图片对应的数据字段名

卡片组件属性

属性名	类型	默认值	说明
className	string	-	外层组件的类名
href	string	-	外部链接地址
header	array	-	卡片头部内容设置（自动生成）
body	array	-	内容容器，主要用来放置非表单项组件
actions	array	-	按钮集合
actionsCount	int	-	按钮集合每行个数
itemAction	array	-	点击卡片的行为
media	array	-	多媒体部分内容设置
secondary	string	-	次要说明
toolbar	array	-	工具栏按钮
dragging	bool	-	是否显示拖拽图标
selectable	bool	-	卡片是否可选
checkable	bool	-	卡片选择按钮是否禁用
selected	bool	-	卡片选择按钮是否选中
hideCheckToggler	bool	-	卡片选择按钮是否隐藏
multiple	bool	-	卡片是否为多选
useCardLabel	bool	-	卡片内容区的表单项 label 是否使用 Card 内部的样式

使用场景

产品信息展示
用户资料卡片
文章列表展示
商品详情预览

注意事项

fields 参数中的 title 字段是必填的
图片和副标题是可选的，根据需要配置
卡片会自动设置缩略图样式类 'thumb-sm'
支持动态数据绑定，使用 <%= this.字段名 %> 格式
图片字段使用 ${字段名|raw} 格式进行数据绑定