Form
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| size | enum | 'md' | 配合表单控件的size使用 | |
| itemProps | shape | 如果存在会在所有包裹的 item 上附加该 props |
说明
表单 UI 组件，只负责布局和展示，不提供任何逻辑功能，表单校验、数据收集请看 ZForm 组件。
API 设计说明
完整的表单不止包含视觉规范、布局等，还包含了大量的逻辑处理，为了让开发者可以自由选择表单逻辑处理的方式，将表单拆分为 UI 布局组件 - Form 和表单逻辑组件 - ZForm，开发者如果对表单用法不喜，可自行选择合适的表单逻辑进行封装而不用担心样式。
演示
普通使用
itemProps - 统一设置 item 的 props
Group
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | node | 标题项 | ||
| itemProps | shape | 如果存在会在所有包裹的 item 上附加该 props，会覆盖来自上层包裹的 itemProps |
说明
表单组控件，用于包裹表单项成为表单组
演示
布局
Item
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| label | ReactNode | required | 表单项标签 | |
| labelCol | ColShape | 标签的col配置 | ||
| controllerCol | ColShape | 控件的col配置 | ||
| help | ReactNode | 表单项的提示描述 | ||
| required | boolean | 表单项是否为必填/必选，仅影响 UI，逻辑必须请看 ZForm rules 的 required | ||
| status | 'default' | 'success' | 'warning' | 'error' | 'loading' | 影响提示的状态/类型、包裹的控件的状态 | ||
| shareStatus | boolean | 是否将状态传递给 item 下的表单控件（目前仅 Input 支持部分状态） | ||
| tip | | { /** 自定义提示图标 */ icon?: ReactNode; /** 提示内容 */ content?: ReactNode; } | ReactNode | 提示信息 |
说明
表单项，用于包裹表单控件（Input、Select 等）
演示
labelCol, controllerCol - 布局
help - 帮助内容
required - 是否必填/必选
status - 状态
tip - 自定义提示/报错文案
shareStatus - 状态共享给控件
itemProps 的使用与覆盖
SubArea
Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
| itemProps | shape | 如果存在会在所有包裹的 item 上附加该 props，会覆盖来自上层包裹的 itemProps |
说明
表单组控件，用于包裹表单项成为一个小的组