低代码平台表单设计器 unione form editor 布局组件 -- 卡片布局
在企业级表单开发中，卡片布局是最常用的 "容器级" 布局组件之一，它能将一组关联的表单内容包裹在独立的卡片容器内，实现模块的分区与隔离。而 unione-form-editor 的卡片布局，不只是传统意义上的 "边框 + 背景" 卡片，它更深度融合了卡片模式与标签模式，在一张卡片内即可实现多 tab 标签切换，将 "卡片容器" 与 "标签容器" 的能力二合一，形成了一套更灵活、更强大的复合式布局方案，完美适配从简单模块分区到复杂多模块管理的各类业务场景。
和所有布局组件一样，卡片布局的本质是容器，支持拖拽所有表单组件嵌套其中；但区别于栅格、标签布局，它提供了 "卡片外观 + 标签切换" 的双重能力，既可以作为独立模块的 "容器管家"，也可以作为多模块内容的 "高效切换器"，是企业级表单中兼顾视觉规整与内容扩展性的核心布局组件。
一、卡片布局核心定位：双模式融合，兼顾规整性与扩展性
unione-form-editor 卡片布局的核心价值，在于 "常规卡片" 与 "标签卡片" 双模式设计 ，将两种高频布局能力融合为一体，无需额外嵌套其他组件，即可同时实现模块分区与多 tab 管理，适配不同复杂度的表单需求：
-
常规卡片模式：即传统卡片布局，提供独立的卡片容器，支持设置标题、图标、边框与背景，适合将一组关联表单组件包裹为一个模块，实现表单的分区与隔离，让表单结构更清晰，视觉更规整。
-
标签卡片模式：卡片布局的核心扩展能力，在常规卡片的基础上，内嵌了完整的标签布局能力。在同一个卡片容器内，可动态添加多个 tab 标签，每个标签对应独立的内容容器，无需额外嵌套标签布局组件，即可实现卡片内的多模块切换，适配更复杂的业务场景。
-
复合协同价值：卡片布局可与栅格、标签、其他卡片布局组件嵌套使用，实现 "整体卡片分区 + 卡片内标签多模块管理" 的多层级布局，完美解决复杂表单中 "模块层级多、内容杂、管理难" 的痛点。
二、卡片布局核心配置属性（结合属性面板拆解）
结合你提供的属性配置面板，卡片布局的配置围绕「卡片基础设置」「标签模式配置」「扩展功能」三大维度设计，所有属性均支持可视化配置，无需手写代码：
1. 基础属性：卡片核心标识与外观配置
- 控件名称：设计器内的组件标识，如 "卡片面板""信息卡片"，用于快速识别与管理。
- 卡片标题：卡片头部显示的标题文本，如 "基础信息""权限配置"，可随时编辑，清晰标识卡片内的模块内容。
- 卡片图标：支持为卡片标题添加自定义图标，增强模块辨识度，适配不同业务场景（如信息类、设置类卡片）。
- 启用响应：开启后，卡片布局将自动适配 PC 端、移动端，卡片宽度、内容排版随屏幕尺寸自动调整，避免多端适配问题。
2. 卡片扩展配置：自定义操作与交互
- 卡片更多：支持在卡片右上角添加 "更多" 按钮，可自定义按钮文本、图标与点击事件，如 "更多操作""导出数据""查看详情"；
- 添加自定义按钮：可在卡片标题栏添加多个自定义按钮，绑定不同的业务逻辑，如 "新增""删除""刷新"，无需额外添加独立按钮组件。
3. 卡片模式切换：常规 / 标签双模式配置
这是卡片布局的核心差异化配置，也是区别于传统卡片的关键：
- 卡片模式 ：支持两种模式切换：
- 「常规」模式：即传统卡片布局，仅显示单张卡片容器，无标签切换能力；
- 「标签」模式：开启卡片内嵌标签布局能力，卡片内可添加多个 tab 标签，实现多模块切换。
4. 标签模式专属配置：内嵌标签布局管理
当选择「标签」模式后，面板将显示标签相关配置项，完整继承标签布局的核心能力：
- 标签设置：支持动态添加、删除、编辑 tab 标签，设置标签名称、排序，与独立标签布局的配置逻辑完全一致；
- 标签更多：与卡片更多配置逻辑一致，支持在标签栏添加 "更多" 按钮与自定义按钮，适配标签模式下的扩展操作需求。
三、卡片布局双模式实操：从简单分区到复杂多模块管理
结合卡片布局的双模式特性，我们以两个高频场景为例，演示其核心用法：
场景 1：常规卡片模式 ------ 员工信息登记表分区
- 拖拽卡片布局组件至表单画布，选择「常规」模式；
- 设置卡片标题为 "员工基础信息"，添加对应图标；
- 在卡片容器内，嵌套栅格布局组件，放入文本输入、单选等功能组件，完成基础信息模块的分区；
- 再添加一个卡片布局，设置标题为 "联系方式"，放入手机号、邮箱等组件，实现表单的模块分区与隔离，让表单结构更清晰。
场景 2：标签卡片模式 ------ 员工综合信息表单多模块管理
- 拖拽卡片布局组件至表单画布，选择「标签」模式；
- 设置卡片标题为 "员工综合信息"，添加对应图标；
- 在「标签设置」中，添加 3 个 tab 标签，分别命名为 "基础信息""权限配置""备注说明"；
- 在每个 tab 对应的容器内，嵌套对应功能组件：
- 「基础信息」tab：放入文本输入、单选等组件；
- 「权限配置」tab：放入复选、单选等组件；
- 「备注说明」tab：放入多行输入组件；
- 开启 "卡片更多" 按钮，绑定 "导出员工信息" 事件，完成一张多模块员工信息表单的搭建，无需额外嵌套标签布局组件。
四、卡片布局高频适用场景
- 模块分区表单：如员工信息表、客户信息表，用多张常规卡片划分不同模块，让表单结构清晰，视觉规整；
- 单模块多业务场景：如订单管理表单，用标签卡片模式，在一张卡片内拆分 "订单信息、物流信息、审批记录" 等模块，实现多内容高效切换；
- 复合式复杂表单：用栅格布局划分整体表单区域，每个区域内嵌套标签卡片布局，实现 "大分区 + 小模块" 的多层级布局，适配企业级复杂业务表单；
- 带操作按钮的模块表单：如系统配置表单，用卡片布局的 "自定义按钮" 能力，在卡片标题栏添加 "保存""重置""导出" 等按钮，无需额外添加独立按钮组件；
- 多端适配表单：开启 "启用响应"，卡片布局自动适配 PC 端与移动端，常规卡片在移动端自动调整宽度，标签卡片的标签栏自动适配横向滑动，保证多端体验一致。
五、卡片布局核心优势与注意事项
核心优势
- 双模式融合，适配多场景：一张卡片即可实现常规分区与标签多模块管理，无需额外嵌套组件，简化复杂表单的布局层级；
- 配置一体化，高效便捷：卡片基础配置与标签配置均在同一属性面板内完成，无需切换不同组件，操作流程更简洁；
- 扩展性强，支持自定义操作：卡片与标签模式均支持添加 "更多" 按钮与自定义按钮，适配业务操作扩展需求；
- 多端适配，体验一致：开启响应式适配后，卡片布局自动适配不同终端，无需单独配置多端布局；
- 嵌套兼容，协同性强：可与栅格、标签、其他卡片布局组件嵌套使用，实现多层级复合布局。
注意事项
- 标签卡片模式下，tab 标签数量建议不超过 6 个，避免标签栏拥挤，影响操作体验；
- 卡片内嵌套栅格布局时，需注意栅格占列数，避免内容超出卡片容器宽度；
- 自定义按钮的点击事件需合理配置，避免与卡片内的表单操作冲突；
- 卡片背景色、边框样式需与表单整体风格统一，避免视觉杂乱，提升表单整体质感。
结语：双模式卡片，让布局更灵活，业务更适配
unione-form-editor 的卡片布局，突破了传统卡片布局 "仅能做分区容器" 的局限，通过「常规 + 标签」双模式设计，将卡片的规整性与标签的扩展性合二为一，形成了一套适配从简单到复杂全场景的复合式布局方案。
无论是基础的模块分区，还是复杂的单模块多业务管理，卡片布局都能灵活适配，无需额外嵌套组件，无需手写复杂代码，可视化配置即可快速搭建。它与栅格、标签布局组件形成了互补的布局体系，让企业级表单的布局更高效、更灵活、更贴合业务需求。
目前，unione-form-editor 项目已在 GitHub、Gitee 开源，欢迎前往点亮 Star，获取卡片布局组件的完整源码、详细配置教程，参与社区共建，一起打造更强大、更贴合企业需求的低代码表单设计工具！
GitHub 项目地址 ：https://github.com/unione-cloud/unione-form-editor
Gitee 项目地址 ：https://gitee.com/unione-cloud/unione-form-editor