antd-d,一个基于antd的配置化组件库
介绍
antd-d
是一个基于antd v5.16.0的配置化的组件库- 适用于 react web 开发
- 支持TypeScript
- 支持ESM和UMD规范
- 安装antd-d之后,会自动安装antd,可直接引入antd中的组件
- 目前封装了绝大多数Form表单项。之后会加入封装的Table
- 拥有足够的灵活性
安装
1 | npm install antd-d --save |
示例
1 | import {Form} from "antd"; |
效果
使用文档
配置型表单(FormPro)
- API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
config | 表单配置项 | IConfigItem[] | (必选) |
labelWidth | 统一设置标签的宽度 | string | { number: 2, gutter: 20 } |
gridLayout | 表单布局 | IFormGridLayout | { number: 2, gutter: 20 } |
- 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 | -- |
- 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 |
- type=’date’,表单项为日期选择框特有的属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
valueFormat | 用于格式化存储到表单的值 | string | 默认是`itemProps.format`的值,如果没有则是antd的默认format的值 |
selectableDateRange | 指定可选择的日期范围 | beforeToday、beforeTodayAndToday、afterToday、afterTodayAndTody、 | -- |
- type=’dateRange’,表单项为日期范围特有的属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
valueFormat | 用于格式化存储到表单的值 | string | 默认是`itemProps.format`的值,如果没有则是antd的默认format的值 |
selectableDateRange | 指定可选择的日期范围 | beforeToday、beforeTodayAndToday、afterToday、afterTodayAndTody | -- |
fields | 用于将时间范围的值拆分成两个字段 | [string, string] | -- |
问题
- 日历组件为什么是英文?
需要自己全局配置国际化文案。详情见antd文档
有问题请留言,谢谢
- 标题: antd-d,一个基于antd的配置化组件库
- 作者: DansRoh
- 创建于 : 2024-06-18 00:00:00
- 更新于 : 2024-06-24 16:19:25
- 链接: https://blog.shinri.me/2024/06/18/31_antd-d,一个基于antd的配置化组件库/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论