???? Ant Plus,Ant Design Form 从未如此简单

53次阅读

共计 1003 个字符,预计需要花费 3 分钟才能阅读完成。

简介
Ant Plus 是 Ant Design Form 的增强版,在其基础上,封装了极其简便的 Form 使用方式与 Form 相关组件的简化 API。
文档
https://nanxiaobei.github.io/ant-plus
特点

???? 极其简便:告别繁琐的 form.getFieldDecorator 样板代码与冗长的 rules 校验代码。

???? 渐进增强:若不使用新的功能,完全可以把组件当作 Ant Design 中的组件来使用。

⛳️ 统一提示:可全局定义 rules 校验提示信息,统一体验,告别烦乱的自定义与不可控。

???? 简化 API:对 Form 相关组件的常用 API 进行了简化,一切只为更流畅的开发。

安装
Yarn
yarn add antx
npm
npm install antx
使用
表单域组件的 Props 中,id 为表单域唯一标识,label 为 Form.Item 的 label。getFieldDecorator(id, options) options 参数中的项,均可直接用于组件的 Props,例如 rules、initialValue 等。
Ant Plus 还对 rules 做了优化,可使用简洁的字符串,来简化校验规则的生成。
完整的使用介绍,请查阅 Ant Plus Form 组件文档。
import {Button} from ‘antd’;
import {Form, Input} from ‘antx’;

const App = ({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()(App);
是的,一切就是如此的简洁清晰。示例:https://codesandbox.io/s/q75nvj6vrj。
对比
使用 Ant Plus 与使用传统 Ant Design 搭建 Form 的代码对比。

链接
GitHub: https://github.com/nanxiaobei/ant-plus
npm: https://www.npmjs.com/package/antx
最后
欢迎尝试,欢迎 Star,体验一种从未如此简单的开发方式。

正文完
 0