Form 是表单容器组件,用于包裹表单控件并处理提交事件。
它继承了 Box 组件的布局能力,同时支持定义表单提交动作。
通过 direction 控制子组件的排列方向,通过 children 定义表单内的控件,gap 用于设置子元素之间的间距。
下面示例展示了一个用户登录表单,包括用户名和密码输入框,以及提交按钮。
Template 示例:
<Form direction="col" gap="16px" onSubmitAction={{ type: "submit_form", payload: { formId: "user-form" } }}> <Input name="username" placeholder="用户名" /> <Input name="password" inputType="password" placeholder="密码" /> <Button label="提交" submit={true} /></Form>
效果展示如下:
属性名 | 类型 | 描述 | 默认值 |
onSubmitAction |
| 表单提交时触发的动作 | - |
属性名 | 类型 | 描述 | 默认值 |
direction |
| 布局方向 |
|
children |
| 子组件列表 | - |
align |
| 交叉轴对齐方式 | - |
justify |
| 主轴对齐方式 | - |
wrap |
| 换行方式 |
|
flex |
| Flex 值 | - |
gap |
| 子元素间距 | - |
padding |
| 内边距 | - |
border |
| 边框配置 | - |
background |
| 背景颜色 | - |
属性名 | 类型 | 描述 | 默认值 |
height |
| 高度 | - |
width |
| 宽度 | - |
size |
| 同时设置宽高 | - |
minHeight |
| 最小高度 | - |
minWidth |
| 最小宽度 | - |
minSize |
| 最小尺寸 | - |
maxHeight |
| 最大高度 | - |
maxWidth |
| 最大宽度 | - |
maxSize |
| 最大尺寸 | - |
aspectRatio |
| 宽高比 | - |
radius |
| 圆角 | - |
margin |
| 外边距 | - |
Form 组件继承了 Box 组件的所有布局能力,详细类型定义请参见 Box 盒子。