Ant Plus 是 Ant Design Form 的增强版,在其基础上,封装了极其简便的 Form 使用方式与 Form 相关组件的简化 API。
https://nanxiaobei.github.io/ant-plus
- 极其简便:告别繁琐的
form.getFieldDecorator
样板代码与冗长的rules
校验代码。 - 渐进增强:若不使用新的功能,完全可以把组件当作 Ant Design 中的组件来使用。
- 统一提示:可全局定义
rules
校验提示信息,统一体验,告别烦乱的自定义与不可控。 - 简化 API:对 Form 相关组件的常用 API 进行了简化,一切只为更流畅的开发。
yarn add antx
npm install antx
示例:https://codesandbox.io/s/mqxxzrj87j
import { Form, Input, Button } from 'antx';
const Demo = ({ form }) => (
<Form api={form} data={{ username: 'Emily' }}>
<Input
label="用户名"
id="username"
rules={['required', 'string', 'max=10']}
max={10}
msg="full"
/>
<Button htmlType="submit">提交</Button>
</Form>
);
export default Form.create()(Demo);
表单控件的 Props 中,id
为表单域唯一标识,label
为 Form.Item 的 label
。getFieldDecorator(id, options)
options
参数中的项,均可直接用于组件的 Props,如 rules
、initialValue
等。
Ant Plus 还对 rules
做了优化,可使用简洁的字符串,来设置校验规则。同时提供了体验更好的校验提示 UI。
是的,一切就是如此的简洁清晰。完整使用介绍,请查阅 Ant Plus Form 组件文档。
使用 Ant Plus 与使用传统 Ant Design 搭建 Form 的代码对比。