🚀 Ant Plus，Ant Design Form 從未如此簡單

簡介

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，體驗一種從未如此簡單的開發方式。