阅读 2948

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

简介

Ant Plus 是 Ant Design Form 的增强版,在其基础上,封装了极其简便的 Form 使用方式与 Form 相关组件的简化 API。

文档

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 的 labelgetFieldDecorator(id, options) options 参数中的项,均可直接用于组件的 Props,例如 rulesinitialValue 等。

Ant Plus 还对 rules 做了优化,可使用简洁的字符串,来设置校验规则。同时提供了体验更好的校验提示 UI。

完整的使用介绍,请查阅 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);
复制代码

是的,一切就是如此的简洁清晰。示例:codesandbox.io/s/q75nvj6vr…

对比

使用 Ant Plus 与使用传统 Ant Design 搭建 Form 的代码对比。

代码对比图

链接

GitHub: github.com/nanxiaobei/…

npm: www.npmjs.com/package/ant…

最后

欢迎尝试,欢迎 Star,体验一种从未如此简单的开发方式。

关注下面的标签,发现更多相似文章
评论