antd-d，一个基于antd的配置化组件库

介绍

• antd-d是一个基于antd v5.16.0的配置化的组件库
• 适用于 react web 开发
• 支持TypeScript
• 支持ESM和UMD规范
• 安装antd-d之后，会自动安装antd，可直接引入antd中的组件
• 目前封装了绝大多数Form表单项。之后会加入封装的Table
• 拥有足够的灵活性

安装

npm install antd-d --save

示例

import {Form} from "antd";
import {FormPro, IConfigItem} from "antd-d";

function App() {
  const [form] = Form.useForm();
  
  const itemConfig:IConfigItem[] = [
    { name: 'name', label: '姓名'},
    { name: 'sex', label: '性别', type: 'radio', itemProps: {options: ['男','女']} },
    { name: 'birth', label: '出生年月', type: 'date' },
    { name: 'love', label: '爱好', type: 'textArea'},
    { name: 'area', label: '出生地区', type: 'cascader', itemProps: {options: [{}]}}
  ]

  return (
    <div>
      <Form form={form}>
        <FormPro gridLayout={{number: 3, gutter: 20}} form={form} config={itemConfig}></FormPro>
      </Form>
    </div>
  )
}

export default App

效果

使用文档

配置型表单(FormPro)

1. API

属性	说明	类型	默认值
config	表单配置项	IConfigItem[]	(必选)
labelWidth	统一设置标签的宽度	string	{ number: 2, gutter: 20 }
gridLayout	表单布局	IFormGridLayout	{ number: 2, gutter: 20 }

2. IConfigItem
   IConfigItem是一个表单项的配置,以下是一些公共属性

属性	说明	类型	默认值
type	表单项的类型	input、textArea、select、date、rangeDate、	input
name	表单项字段值	string、number、(string、number)[]	--
label	标签文本	React.ReactNode	--
itemProps	该属性会传给表单元素,例如Input, Select	具体参考antd	--
formItemProps	该属性会传给Form.Item	参考antd	--
show	决定表单项是否显示	()=> boolean	--

3. type=’select’,表单项为下拉选择框时特有的属性

属性	说明	类型	默认值
options	选择框的下拉选项	string[] | Option[]	-
request	获取下拉选项的请求	Promise	-
labelKey	指定label的key值	string	label
valueKey	指定value的key值	string	value
renderLabel	决定如何显示label	(data) => string|React Node	-
showAllOption	是否添加一个“全部”选项	boolean	false

4. type=’date’,表单项为日期选择框特有的属性

属性	说明	类型	默认值
valueFormat	用于格式化存储到表单的值	string	默认是`itemProps.format`的值，如果没有则是antd的默认format的值
selectableDateRange	指定可选择的日期范围	beforeToday、beforeTodayAndToday、afterToday、afterTodayAndTody、	--

5. type=’dateRange’,表单项为日期范围特有的属性

属性	说明	类型	默认值
valueFormat	用于格式化存储到表单的值	string	默认是`itemProps.format`的值，如果没有则是antd的默认format的值
selectableDateRange	指定可选择的日期范围	beforeToday、beforeTodayAndToday、afterToday、afterTodayAndTody	--
fields	用于将时间范围的值拆分成两个字段	[string, string]	--

问题

1. 日历组件为什么是英文？

   需要自己全局配置国际化文案。详情见antd文档

有问题请留言，谢谢