Form 用于组织表单标题、必填标识与右侧控件区域;右侧支持灵活传入任意组件,也内置 Input、Dropdown Menu、Radio、Checkbox 的默认调用方式。
展示完整 Form 在 left align、right align、vertical 三种布局下的组合方式,右侧控件继续复用已有组件。
Input 作为 Form 的默认调用类型,通过 Tabs 切换 left align、right align 和 vertical。
Dropdown Menu 作为 Form 的默认调用类型,右侧控件复用已有下拉菜单组件。
Textarea 复用 Input 组件的 textarea 类型,并由 Form 控制标题对齐,Tabs 中切换不同布局。
Radio 与 Checkbox 作为 Form 的默认调用类型,Tabs 中切换 horizontal、vertical、left align、right align 等展示。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 表单项标题 | string | - | 'Username' |
| required | 是否展示必填星号 | boolean | true | false | true |
| layout | 标签与控件排列方式 | string | 'align-left' | 'align-right' | 'vertical' | 'align-left' |
| labelAlign | 纵向布局下标题行对齐方式 | string | 'left' | 'right' | 'left' |
| valign | 横向布局时标签垂直对齐方式 | string | 'center' | 'top' | 'center' |
| labelWidth | 横向布局标签宽度 | number | - | 100 / 80 |
| controlWidth | 控件区域宽度 | number | - | 240 |
| controlType | 右侧默认调用的控件类型 | string | 'input' | 'textarea' | 'dropdown' | 'radio' | 'checkbox' | 'custom' | 'custom' |
| controlProps | 传递给默认控件的配置项 | object | - | {} |
| control | 自定义右侧组件插槽,优先级高于 controlType | Node | string | - | null |
| help | 辅助说明文本 | string | - | '' |
| className | 自定义类名 | string | - | '' |
| id | 自定义 id | string | - | '' |