@ant-design/pro-components
Version:
@ant-design/pro-components
1,936 lines (1,935 loc) • 145 kB
JSON
[
{
"packageName": "ProCard",
"tableData": [
{
"title": "ProCard - API",
"table": [
{
"参数": "title",
"说明": "标题",
"类型": "`React.ReactNode`",
"默认值": "-"
},
{
"参数": "subTitle",
"说明": "副标题",
"类型": "`React.ReactNode`",
"默认值": "-"
},
{
"参数": "tooltip",
"说明": "标题右侧图标 hover 提示信息",
"类型": "`string`",
"默认值": "-"
},
{
"参数": "headStyle",
"说明": "标题的 style 样式",
"类型": "`CSSProperties`",
"默认值": "-"
},
{
"参数": "bodyStyle",
"说明": "内容区的 style 样式",
"类型": "`CSSProperties`",
"默认值": "-"
},
{
"参数": "extra",
"说明": "右上角自定义区域",
"类型": "`React.ReactNode`",
"默认值": "-"
},
{
"参数": "layout",
"说明": "内容布局,支持垂直居中",
"类型": "`default` | `center`",
"默认值": "default"
},
{
"参数": "loading",
"说明": "加载中,支持自定义 loading 样式",
"类型": "`boolean` | `ReactNode`",
"默认值": "false"
},
{
"参数": "colSpan",
"说明": "栅格布局宽度,24 栅格,支持指定宽度 px 或百分比,支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`, 仅在嵌套的子卡片上设置有效。",
"类型": "`number` | `string`",
"默认值": "24"
},
{
"参数": "gutter",
"说明": "数字或使用数组形式同时设置 [水平间距,垂直间距], 支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`",
"类型": "`number` | `array`",
"默认值": "0"
},
{
"参数": "split",
"说明": "拆分卡片的方向",
"类型": "`vertical` | `horizontal`",
"默认值": "-"
},
{
"参数": "type",
"说明": "卡片类型",
"类型": "`inner` | `default`",
"默认值": "-"
},
{
"参数": "size",
"说明": "卡片尺寸",
"类型": "`default` | `small`",
"默认值": "-"
},
{
"参数": "actions",
"说明": "卡片操作组,位置在卡片底部",
"类型": "`Array<ReactNode>`",
"默认值": "-"
},
{
"参数": "direction",
"说明": "指定 Flex 方向,仅在嵌套子卡片时有效,默认方向为 row 横向",
"类型": "`column`",
"默认值": "-"
},
{
"参数": "wrap",
"说明": "是否支持换行,仅在嵌套子卡片时有效",
"类型": "false",
"默认值": "-",
"版本": "1.12.0"
},
{
"参数": "bordered",
"说明": "是否有边框",
"类型": "`boolean`",
"默认值": "false"
},
{
"参数": "ghost",
"说明": "幽灵模式,即是否取消卡片内容区域的 padding 和 卡片的背景颜色。",
"类型": "`boolean`",
"默认值": "false"
},
{
"参数": "headerBordered",
"说明": "页头是否有分割线",
"类型": "`boolean`",
"默认值": "false"
},
{
"参数": "collapsed",
"说明": "受控属性,是否折叠",
"类型": "`boolean`",
"默认值": "false"
},
{
"参数": "collapsible",
"说明": "配置是否可折叠或者指定可折叠触发的区域",
"类型": "`icon | header | boolean`,当值为`true`时默认触发区域为`header`",
"默认值": "false"
},
{
"参数": "collapsibleIconRender",
"说明": "替换默认折叠图标",
"类型": "`({ collapsed }: { collapsed: boolean }) => React.ReactNode`",
"默认值": "-"
},
{
"参数": "defaultCollapsed",
"说明": "默认折叠,受控时无效",
"类型": "`boolean`",
"默认值": "false"
},
{
"参数": "onCollapse",
"说明": "收起卡片的事件,受控时无效",
"类型": "`(collapsed: boolean) => void`",
"默认值": "-"
},
{
"参数": "tabs",
"说明": "标签页配置",
"类型": "见下面 ProCardTabs",
"默认值": "-"
}
]
},
{
"title": "ProCard - ProCardTabs",
"table": [
{
"参数": "activeKey",
"说明": "当前选中项",
"类型": "string",
"默认值": "-"
},
{
"参数": "type",
"说明": "页签的基本样式,可选 `line`、`card`、`editable-card` 类型",
"类型": "string",
"默认值": "inline"
},
{
"参数": "onChange",
"说明": "回调",
"类型": "`(activeKey: string) => void;`",
"默认值": "-"
},
{
"参数": "items",
"说明": "基于 antd 拓展的页签的基本配置,必填",
"类型": "`ItemsProps`",
"默认值": "-"
}
]
},
{
"title": "ProCard - ItemsProps",
"table": [
{
"参数": "cardProps",
"说明": "ProCard 卡片属性透传",
"类型": "`ProCard`",
"默认值": "-"
}
]
},
{
"title": "ProCard - ProCard.TabPane",
"table": [
{
"参数": "key",
"说明": "对应 activeKey,用于标定是否选中和 dom 更新,一定不要重复,不然会造成表现异常",
"类型": "`string`",
"默认值": "-"
},
{
"参数": "tab",
"说明": "选项卡头显示文字",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "disabled",
"说明": "不可用",
"类型": "`boolean`",
"默认值": "false"
},
{
"参数": "cardProps",
"说明": "ProCard 卡片属性透传",
"类型": "`ProCard`",
"默认值": "-"
}
]
},
{
"title": "ProCard - ProCard.Divider",
"table": [
{
"参数": "type",
"说明": "分隔类型",
"类型": "`horizontal | vertical`",
"默认值": "-"
}
]
}
]
},
{
"packageName": "ProCard",
"tableData": [
{
"title": "ProCard - CheckCard",
"table": [
{
"参数": "checked",
"说明": "指定当前是否选中",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "bordered",
"说明": "是否显示边框",
"类型": "boolean",
"默认值": "true",
"版本": "1.20.0"
},
{
"参数": "value",
"说明": "选项值",
"类型": "string",
"默认值": "-"
},
{
"参数": "defaultChecked",
"说明": "初始是否选中",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "disabled",
"说明": "失效状态",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "size",
"说明": "选择框大小,可选 `large` `small`",
"类型": "string",
"默认值": "`default`"
},
{
"参数": "onChange",
"说明": "变化时回调函数",
"类型": "Function(checked)",
"默认值": "-"
},
{
"参数": "loading",
"说明": "当卡片内容还在加载中时,可以用 loading 展示一个占位",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "title",
"说明": "标题",
"类型": "string | ReactNode",
"默认值": "-"
},
{
"参数": "description",
"说明": "描述",
"类型": "ReactNode",
"默认值": "-"
},
{
"参数": "avatar",
"说明": "选项元素的图片地址",
"类型": "link | ReactNode",
"默认值": "-"
},
{
"参数": "extra",
"说明": "动作区域",
"类型": "卡片右上角的操作区域",
"默认值": "-"
},
{
"参数": "cover",
"说明": "卡片背景图片,注意使用该选项后`title`,`description`和`avatar`失效",
"类型": "ReactNode",
"默认值": "-"
}
]
},
{
"title": "ProCard - CheckCard.Group",
"table": [
{
"参数": "multiple",
"说明": "多选",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "bordered",
"说明": "是否显示边框",
"类型": "boolean",
"默认值": "true",
"版本": "1.20.0"
},
{
"参数": "defaultValue",
"说明": "默认选中的选项",
"类型": "string | string[]",
"默认值": "-"
},
{
"参数": "disabled",
"说明": "整组失效",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "loading",
"说明": "当卡片组内容还在加载中时,可以用 loading 展示一个占位",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "options",
"说明": "指定可选项",
"类型": "string[] | Array<{ title: ReactNode, value: string, description?: ReactNode, avatar?: link or ReactNode, cover?:ReactNode, disabled?: boolean }>",
"默认值": "\\[]"
},
{
"参数": "value",
"说明": "指定选中的选项",
"类型": "string | string[]",
"默认值": "-"
},
{
"参数": "size",
"说明": "选择框大小,可选 `large` `small`",
"类型": "string",
"默认值": "`default`"
},
{
"参数": "onChange",
"说明": "变化时回调函数",
"类型": "Function(checkedValue)",
"默认值": "-"
}
]
}
]
},
{
"packageName": "ProCard",
"tableData": [
{
"title": "ProCard - StatisticCard",
"table": [
{
"参数": "title",
"说明": "卡片标题",
"类型": "`string|ReactNode`",
"默认值": "-"
},
{
"参数": "extra",
"说明": "卡片右上角的操作区域",
"类型": "`string|ReactNode`",
"默认值": "-"
},
{
"参数": "loading",
"说明": "当卡片内容还在加载中时,可以用 loading 展示一个占位",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "bordered",
"说明": "是否有边框",
"类型": "boolean",
"默认值": "true"
},
{
"参数": "chart",
"说明": "图表卡片",
"类型": "ReactNode",
"默认值": "-"
},
{
"参数": "statistic",
"说明": "数值统计配置,布局默认为 `vertical`",
"类型": "参数见下 Statistic",
"默认值": "-"
},
{
"参数": "chartPlacement",
"说明": "图表位置,相对于 statistic 的位置",
"类型": "`left | right | bottom`",
"默认值": "-"
},
{
"参数": "footer",
"说明": "额外指标展示",
"类型": "`ReactNode`",
"默认值": "-"
}
]
},
{
"title": "ProCard - Statistic",
"table": [
{
"参数": "prefix",
"说明": "设置数值的前缀",
"类型": "string | ReactNode",
"默认值": "-"
},
{
"参数": "suffix",
"说明": "设置数值的后缀",
"类型": "string | ReactNode",
"默认值": "-"
},
{
"参数": "title",
"说明": "数值的标题",
"类型": "string | ReactNode",
"默认值": "-"
},
{
"参数": "tip",
"说明": "标题提示",
"类型": "string| ReactNode",
"默认值": "-"
},
{
"参数": "value",
"说明": "数值内容",
"类型": "string | number",
"默认值": "-"
},
{
"参数": "icon",
"说明": "图标",
"类型": "ReactNode",
"默认值": "-"
},
{
"参数": "status",
"说明": "设置状态点,同 Badge 组件",
"类型": "`Enum{ 'success', 'processing, 'default', 'error', 'warning' }`",
"默认值": "-"
},
{
"参数": "valueStyle",
"说明": "设置数值的样式",
"类型": "style",
"默认值": "-"
},
{
"参数": "description",
"说明": "描述性标签",
"类型": "React.ReactNode | () => React.ReactNode",
"默认值": "-"
},
{
"参数": "layout",
"说明": "布局",
"类型": "`horizontal | vertical | inline`",
"默认值": "`inline`"
},
{
"参数": "trend",
"说明": "趋势",
"类型": "`up | down |`",
"默认值": "-"
}
]
},
{
"title": "ProCard - Divider",
"table": [
{
"参数": "type",
"说明": "分隔类型",
"类型": "`horizontal | vertical`",
"默认值": "-"
}
]
}
]
},
{
"packageName": "ProDescriptions",
"tableData": [
{
"title": "ProDescriptions - ProDescriptions",
"table": [
{
"参数": "title",
"说明": "描述列表的标题,显示在最顶部",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "tooltip",
"说明": "内容的补充描述,hover 后显示",
"类型": "`string`",
"默认值": "-"
},
{
"参数": "loading",
"说明": "展示一个加载的骨架屏,骨架屏和 dom 不会一一对应",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "extra",
"说明": "描述列表的操作区域,显示在右上方",
"类型": "`string` | `ReactNode`",
"默认值": "-"
},
{
"参数": "bordered",
"说明": "是否展示边框",
"类型": "boolean",
"默认值": "false"
},
{
"参数": "column",
"说明": "一行的 `ProDescriptionsItems` 数量,可以写成像素值或支持响应式的对象写法 `{ xs: 1, sm: 2, md: 3}`",
"类型": "number",
"默认值": "3"
},
{
"参数": "size",
"说明": "设置列表的大小。可以设置为 `middle` 、`small`,或不填(只有设置 `bordered={true}` 生效)",
"类型": "`default` | `middle` | `small`",
"默认值": "-"
},
{
"参数": "layout",
"说明": "描述布局",
"类型": "`horizontal` | `vertical`",
"默认值": "`horizontal`"
},
{
"参数": "colon",
"说明": "配置 `ProDescriptions.Item` 的 `colon` 的默认值",
"类型": "boolean",
"默认值": "true"
},
{
"参数": "request",
"说明": "请求数据,不设置 columns 时 ProDescriptions.Item 需设置对应的 dataIndex",
"类型": "-",
"默认值": "-"
},
{
"参数": "onRequestError",
"说明": "处理 request 的错误,默认会直接抛出错误",
"类型": "-",
"默认值": "-"
},
{
"参数": "columns",
"说明": "列定义,与 request 配合使用 [columns](/components/table#columns)",
"类型": "-",
"默认值": "-"
},
{
"参数": "editable",
"说明": "编辑的相关配置",
"类型": "-"
}
]
},
{
"title": "ProDescriptions - editable 编辑配置",
"table": [
{
"属性": "form",
"描述": "可编辑表格的 form 实例,使用 `Form.useForm` 生成后使用",
"类型": "`FormInstance`",
"默认值": "-"
},
{
"属性": "formProps",
"描述": "可以配置 form 的属性,但是不支持 onFinish",
"类型": "-"
},
{
"属性": "editableKeys",
"描述": "正在编辑的行,受控属性。 默认 `key` 会使用 `rowKey` 的配置,如果没有配置会使用 `index`,建议使用 rowKey",
"类型": "`Key[]`",
"默认值": "-"
},
{
"属性": "onChange",
"描述": "行数据被修改的时候触发",
"类型": "`(editableKeys: Key[], editableRows: T[]) => void`",
"默认值": "-"
},
{
"属性": "onSave",
"描述": "保存一行的时候触发",
"类型": "`(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>`",
"默认值": "-"
},
{
"属性": "saveText",
"描述": "保存一行的文字",
"类型": "`React.ReactNode`",
"默认值": "`保存`"
},
{
"属性": "onDelete",
"描述": "删除一行的时候触发",
"类型": "`(key: Key, row: T) => Promise<any>`",
"默认值": "-"
},
{
"属性": "deleteText",
"描述": "删除一行的文字",
"类型": "`React.ReactNode`",
"默认值": "`删除`"
},
{
"属性": "onCancel",
"描述": "取消编辑一行时触发",
"类型": "`(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>`",
"默认值": "-"
},
{
"属性": "cancelText",
"描述": "取消编辑一行的文字",
"类型": "`React.ReactNode`",
"默认值": "`取消`"
},
{
"属性": "actionRender",
"描述": "自定义编辑模式的操作栏",
"类型": "`(row: T, config: ActionRenderConfig,defaultDom) => ReactNode[]`",
"默认值": "-"
},
{
"属性": "deletePopconfirmMessage",
"描述": "删除时弹出的确认框提示消息",
"类型": "`ReactNode`",
"默认值": "`删除此项?`"
},
{
"属性": "onlyOneLineEditorAlertMessage",
"描述": "只能编辑一行的的提示",
"类型": "`ReactNode`",
"默认值": "`只能同时编辑一行`"
},
{
"属性": "onlyAddOneLineAlertMessage",
"描述": "只能同时新增一行的提示",
"类型": "`ReactNode`",
"默认值": "`只能新增一行`"
}
]
},
{
"title": "ProDescriptions - ProDescriptions.Item",
"table": [
{
"参数": "label",
"说明": "内容的描述",
"类型": "ReactNode",
"默认值": "-"
},
{
"参数": "tooltip",
"说明": "内容的补充描述,hover 后显示",
"类型": "string",
"默认值": "-"
},
{
"参数": "ellipsis",
"说明": "是否自动缩略",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "copyable",
"说明": "是否支持复制",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "span",
"说明": "包含列的数量",
"类型": "number",
"默认值": "1"
},
{
"参数": "valueType",
"说明": "格式化的类型",
"类型": "`ValueType`",
"默认值": "-"
},
{
"参数": "valueEnum",
"说明": "当前列值的枚举 [valueEnum](/components/table#valueenum)",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "request",
"说明": "从网络请求枚举数据",
"类型": "`()=>Promise<{[key:string`|`number]:any}>`",
"默认值": "-"
},
{
"参数": "dataIndex",
"说明": "返回数据的 key 与 ProDescriptions 的 request 配合使用,用于配置式的定义列表",
"类型": "`React.Text` | `React.Text[]`",
"默认值": "-"
},
{
"参数": "editable",
"说明": "在编辑表格中是否可编辑的,函数的参数和 table 的 render 一样",
"类型": "`false` | `(text: any, record: T,index: number) => boolean`",
"默认值": "true"
}
]
}
]
},
{
"packageName": "ProField",
"tableData": [
{
"title": "ProField - 参数",
"table": [
{
"参数": "text",
"说明": "需要格式化的值",
"类型": "any",
"默认值": "-"
},
{
"参数": "valueType",
"说明": "格式化的类型",
"类型": "ValueType",
"默认值": "-"
},
{
"参数": "mode",
"说明": "组件的模式",
"类型": "-",
"默认值": "-"
},
{
"参数": "plain",
"说明": "精简模式",
"类型": "-",
"默认值": "-"
},
{
"参数": "renderFormItem",
"说明": "自定义 `mode=update | edit` 下的 dom 表现,一般用于渲染编辑框",
"类型": "-",
"默认值": "-"
},
{
"参数": "render",
"说明": "自定义 `mode=read` 下的 dom 表现,只是单纯的表现形式",
"类型": "-",
"默认值": "-"
}
]
}
]
},
{
"packageName": "ProForm",
"tableData": []
},
{
"packageName": "ProForm",
"tableData": [
{
"title": "ProForm - 组件列表",
"table": [
{
"组件": "用于输入各类文本"
},
{
"组件": "用于输入数字,它自带了一个格式化 (保留 2 位小数,最小值为 0),有需要你可以关掉它。"
},
{
"组件": "用于输入密码"
},
{
"组件": "用于输入多行文本"
},
{
"组件": "ProFormCaptcha",
"使用场景": "用于输入验证码, 一般需要与发送验证码接口一起使用"
},
{
"组件": "日期选择器用于输入日期"
},
{
"组件": "日期 + 时间选择器,用于输入日期和时间"
},
{
"组件": "日期区间选择器用于输入一个日期区间"
},
{
"组件": "日期 + 时间区间选择器,用于输入一个日期 + 时间的区间"
},
{
"组件": "支持 `request` 和 `valueEnum` 两种方式来生成子项,用于从两项以上中选择一项"
},
{
"组件": "支持 `request` 和 `valueEnum` 两种方式来生成子项,用于从两项以上中选择一项"
},
{
"组件": "在 Checkbox 基础上支持了 layout,也支持 `request` 和 `valueEnum` 两种方式来生成子项"
},
{
"组件": "在 Radio 基础上也支持 `request` 和 `valueEnum` 两种方式来生成子项,用于单选某项,但是可以展示出来所有选项。"
},
{
"组件": "当用户需要在数值区间 / 自定义区间内进行选择时,可为连续或离散值。"
},
{
"组件": "用于输入互斥的两个选项,一般是 true 和 false"
},
{
"组件": "按钮样式的上传文件"
},
{
"组件": "区域的上传文件,一般用于突出上传文件的表单中"
},
{
"组件": "ProFormMoney",
"使用场景": "通用金额输入组件"
},
{
"组件": "分段控制器"
}
]
},
{
"title": "ProForm - 通用的属性",
"table": [
{
"参数": "width",
"说明": "Field 的长度,我们归纳了常用的 Field 长度以及适合的场景,支持了一些枚举 \"xs\" , \"sm\" , \"md\" ,\"lg\" , \"xl\"",
"类型": "`number | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"`",
"默认值": "-"
},
{
"参数": "rowProps",
"说明": "开启 `grid` 模式时传递给 Row, 仅在`ProFormGroup`, `ProFormList`, `ProFormFieldSet` 中有效",
"类型": "{ gutter: 8 }"
},
{
"参数": "colProps",
"说明": "开启 `grid` 模式时传递给 Col",
"类型": "{ xs: 24 }"
},
{
"参数": "tooltip",
"说明": "会在 label 旁增加一个 icon,悬浮后展示配置的信息",
"类型": "`string | tooltipProps`",
"默认值": "-"
},
{
"参数": "secondary",
"说明": "是否是次要控件,只针对 LightFilter 下有效",
"类型": "`boolean`",
"默认值": "`false`"
},
{
"参数": "allowClear",
"说明": "支持清除,针对 LightFilter 下有效,主动设置情况下同时也会透传给 `fieldProps`",
"类型": "`boolean`",
"默认值": "`true`"
}
]
},
{
"title": "ProForm - ProFormCaptcha",
"table": [
{
"参数": "onGetCaptcha",
"说明": "点击获取验证码的事件,如果配置了 phoneName 会自动注入",
"类型": "`(phone)=>Promise<any>`",
"默认值": "-"
},
{
"参数": "onTiming",
"说明": "计时数字监听",
"类型": "`(count: number)=>void`",
"默认值": "-"
},
{
"参数": "captchaProps",
"说明": "获取验证码按钮的 props,与 antd 的 props 相同",
"类型": "`ButtonProps`",
"默认值": "-"
},
{
"参数": "countDown",
"说明": "倒计时的秒数",
"类型": "number",
"默认值": "60"
},
{
"参数": "captchaTextRender",
"说明": "渲染计时的文案",
"类型": "`(timing: boolean, count: number) => React.ReactNode`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormSelect",
"table": [
{
"参数": "valueEnum",
"说明": "当前列值的枚举 [valueEnum](/components/table#valueenum)",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "request",
"说明": "从网络请求枚举数据",
"类型": "`()=>Promise<{label,value}>`",
"默认值": "-"
},
{
"参数": "debounceTime",
"说明": "防抖动时间,与 request 配合使用",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "params",
"说明": "发起网络请求的参数,与 request 配合使用",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`SelectProps `",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormTreeSelect",
"table": [
{
"参数": "valueEnum",
"说明": "当前列值的枚举 [valueEnum](/components/table#valueenum)",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "request",
"说明": "从网络请求枚举数据",
"类型": "`()=>Promise<{label,value}>`",
"默认值": "-"
},
{
"参数": "debounceTime",
"说明": "防抖动时间,与 request 配合使用",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "params",
"说明": "发起网络请求的参数,与 request 配合使用",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`TreeSelectProps`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormCheckbox",
"table": [
{
"参数": "options",
"说明": "与 select 相同,根据 options 生成子节点,推荐使用。",
"类型": "`string[]` | `{label:ReactNode,value:string}[]`",
"默认值": "-"
},
{
"参数": "layout",
"说明": "配置 checkbox 的样子,支持垂直`vertical` 和 `horizontal`",
"类型": "`horizontal` | `vertical`",
"默认值": "-"
},
{
"参数": "request",
"说明": "从网络请求枚举数据",
"类型": "`()=>Promise<{label,value}>`",
"默认值": "-"
},
{
"参数": "params",
"说明": "发起网络请求的参数,与 request 配合使用",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`CheckboxProps`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormRadio.Group",
"table": [
{
"参数": "options",
"说明": "与 select 相同,根据 options 生成子节点,推荐使用。",
"类型": "`string[]` | `{label:ReactNode,value:string}[]`",
"默认值": "-"
},
{
"参数": "request",
"说明": "从网络请求枚举数据",
"类型": "`()=>Promise<{label,value}>`",
"默认值": "-"
},
{
"参数": "radioType",
"说明": "设置是按钮模式还是 radio 模式",
"类型": "`default`|`button`",
"默认值": "`default`"
},
{
"参数": "params",
"说明": "发起网络请求的参数,与 request 配合使用",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`RadioProps`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormCascader",
"table": [
{
"参数": "options",
"说明": "与 cascader 相同,根据 options 生成子节点,推荐使用。",
"类型": "`string[]` | `{label:ReactNode,value:string}[]`",
"默认值": "-"
},
{
"参数": "request",
"说明": "从网络请求枚举数据",
"类型": "`()=>Promise<{label,value}>`",
"默认值": "-"
},
{
"参数": "params",
"说明": "发起网络请求的参数,与 request 配合使用",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`CascaderProps`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormSwitch",
"table": [
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`SwitchProps`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormRate",
"table": [
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`RateProps`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormSlider",
"table": [
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`SliderProps`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormUploadDragger",
"table": [
{
"参数": "icon",
"说明": "Dragger 的图标",
"类型": "`ReactNode`",
"默认值": "InboxOutlined"
},
{
"参数": "title",
"说明": "Dragger 的标题",
"类型": "`ReactNode`",
"默认值": "' 单击或拖动文件到此区域进行上传'"
},
{
"参数": "description",
"说明": "Dragger 的描述",
"类型": "`ReactNode`",
"默认值": "' 支持单次或批量上传'"
}
]
},
{
"title": "ProForm - ProFormUploadButton",
"table": [
{
"参数": "icon",
"说明": "Button 的图标",
"类型": "`ReactNode`",
"默认值": "UploadOutlined"
},
{
"参数": "title",
"说明": "Button 的标题",
"类型": "`ReactNode`",
"默认值": "单击上传"
},
{
"参数": "max",
"说明": "最大上传数量,超过最大数量就会隐藏上传按钮",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "imageProps",
"说明": "预览 [Image](https://ant-design.antgroup.com/components/image-cn#image) 组件的额外配置,可以自定义预览行为、工具栏以及其他 Image 组件的属性。",
"类型": "`ImageProps`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormMoney",
"table": [
{
"参数": "locale",
"说明": "单独设置的国际化地区值,根据不同的地区显示不同的货币符号,支持地区详见下面的地区目录",
"类型": "`string`",
"默认值": "`zh-Hans-CN`"
},
{
"参数": "customSymbol",
"说明": "自定义金额符号",
"类型": "`string`",
"默认值": "-"
},
{
"参数": "numberPopoverRender",
"说明": "自定义 Popover 的值,false 可以关闭他",
"类型": "`((props: InputNumberProps, defaultText: string) => React.ReactNode)`| `boolean`",
"默认值": "false"
},
{
"参数": "numberFormatOptions",
"说明": "NumberFormat 的配置,文档可以查看 [mdn](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)",
"类型": "NumberFormatOptions",
"默认值": "-"
},
{
"参数": "min",
"说明": "最小值",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "max",
"说明": "最大值",
"类型": "`number`",
"默认值": "-"
}
]
},
{
"title": "ProForm - ProFormSegmented",
"table": [
{
"参数": "valueEnum",
"说明": "当前列值的枚举 [valueEnum](/components/table#valueenum)",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "request",
"说明": "从网络请求枚举数据",
"类型": "`()=>Promise<{label,value}>`",
"默认值": "-"
},
{
"参数": "debounceTime",
"说明": "防抖动时间,与 request 配合使用",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "params",
"说明": "发起网络请求的参数,与 request 配合使用",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "fieldProps",
"说明": "antd 组件的 props",
"类型": "`Segmented`",
"默认值": "-"
}
]
}
]
},
{
"packageName": "ProForm",
"tableData": [
{
"title": "ProForm - 何时使用 ProForm?",
"table": [
{
"布局": "标准 Form,增加了 `onFinish` 中自动 `loading` 和根据 `request` 自动获取默认值的功能。"
},
{
"布局": "在 ProForm 的基础上增加了 `trigger` ,无需维护 `visible` 状态。"
},
{
"布局": "一般用于作为筛选表单,需要配合其他数据展示组件使用。"
},
{
"布局": "一般用于作为行内内置的筛选,比如卡片操作栏和表格操作栏。"
},
{
"布局": "分步表单,需要配置 StepForm 使用。"
}
]
},
{
"title": "ProForm - ProForm",
"table": [
{
"参数": "onFinish",
"说明": "提交表单且数据验证成功后回调事件,同 antd 4 `Form` 组件 API",
"类型": "`(values)=>Promise<void> | void`",
"默认值": "-"
},
{
"参数": "onReset",
"说明": "点击重置按钮的回调",
"类型": "`(e)=>void`",
"默认值": "-"
},
{
"参数": "submitter",
"说明": "提交按钮相关配置",
"类型": "`boolean` | `SubmitterProps`",
"默认值": "`true`"
},
{
"参数": "syncToUrl",
"说明": "同步参数到 url 上,url 只支持 string,在使用之前最好读一下[url 中的参数类型](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)",
"类型": "`true` | `(values,type)=>values`",
"默认值": "-"
},
{
"参数": "syncToInitialValues",
"说明": "同步结果到 initialValues,默认为 true,如果为 false,form.reset 的时候将会忽略从 url 上获取的数据",
"类型": "`boolean`",
"默认值": "`true`"
},
{
"参数": "dateFormatter",
"说明": "自动格式化数据,主要是 moment 的表单,支持 string 和 number 两种模式,此外还支持指定函数进行格式化。",
"类型": "`string| number | ((value: Moment, valueType: string) => string | number) | false`",
"默认值": "`string`"
},
{
"参数": "omitNil",
"说明": "ProForm 会自动清空 null 和 undefined 的数据,如果你约定了 nil 代表某种数据,可以设置为 false 关闭此功能",
"类型": "`boolean`",
"默认值": "`true`"
},
{
"参数": "params",
"说明": "发起网络请求的参数,与 request 配合使用",
"类型": "`Record`",
"默认值": "-"
},
{
"参数": "request",
"说明": "发起网络请求的参数,返回值会覆盖给 initialValues",
"类型": "`(params)=>Promise<data>`",
"默认值": "-"
},
{
"参数": "isKeyPressSubmit",
"说明": "是否使用回车提交",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "formRef",
"说明": "获取表单所使用的 form",
"类型": "`MutableRefObject<Instance<T>>`",
"默认值": "-"
},
{
"参数": "autoFocusFirstInput",
"说明": "自动 focus 表单第一个输入框",
"类型": "`boolean`",
"默认值": "`true`"
},
{
"参数": "grid",
"说明": "开启栅格化模式,宽度默认百分比,请使用 `colProps` 控制宽度 [查看示例](/components/form#栅格化布局)",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "rowProps",
"说明": "开启 `grid` 模式时传递给 `Row`, 仅在`ProFormGroup`, `ProFormList`, `ProFormFieldSet` 中有效",
"类型": "{ gutter: 8 }"
},
{
"参数": "注意 `LightFilter` 和 `QueryFilter` 仅支持除 `wrapperCol` | `labelCol` | `layout` 外的其他 antd `Form` 组件参数",
"说明": "-",
"类型": "-"
}
]
},
{
"title": "ProForm - ProForm.Group",
"table": [
{
"参数": "title",
"说明": "标题",
"类型": "`string`",
"默认值": "-"
},
{
"参数": "children",
"说明": "表单控件或者其他元素",
"类型": "`React.ReactNode`",
"默认值": "-"
}
]
},
{
"title": "ProForm - submitter",
"table": [
{
"参数": "onSubmit",
"说明": "提交方法",
"类型": "`()=>void`",
"默认值": "-"
},
{
"参数": "onReset",
"说明": "重置方法",
"类型": "`()=>void`",
"默认值": "-"
},
{
"参数": "searchConfig",
"说明": "搜索的配置,一般用来配置文本",
"类型": "`{resetText,submitText}`",
"默认值": "-"
},
{
"参数": "submitButtonProps",
"说明": "提交按钮的 props",
"类型": "-"
},
{
"参数": "resetButtonProps",
"说明": "重置按钮的 props",
"类型": "-"
},
{
"参数": "render",
"说明": "自定义操作的渲染",
"类型": "`false`|`(props,dom:JSX[])=>ReactNode[]`",
"默认值": "-"
}
]
},
{
"title": "ProForm - formRef",
"table": [
{
"方法名": "`getFieldsFormatValue`",
"使用描述": "使用方法与 `FormInstance` 的 `getFieldsValue` 方法相同,将返回格式化后的所有数据"
},
{
"方法名": "`getFieldFormatValue`",
"使用描述": "使用方法与 `FormInstance` 的 `getFieldValue` 方法相同,将返回格式化后的指定数据"
},
{
"方法名": "`validateFieldsReturnFormatValue`",
"使用描述": "使用方法与 `FormInstance` 的 `validateFields` 方法相同,验证通过后将返回格式化后的所有数据"
}
]
}
]
},
{
"packageName": "ProForm",
"tableData": [
{
"title": "ProForm - ProFormList API",
"table": [
{
"参数": "itemRender",
"说明": "自定义 Item,可以用来将 action 放到别的地方",
"类型": "`(doms,listMeta)=> ReactNode`",
"默认值": "-"
},
{
"参数": "creatorRecord",
"说明": "新建一行的默认值",
"类型": "`Record<string, any> | () => Record<string, any>`",
"默认值": "-"
},
{
"参数": "creatorButtonProps",
"说明": "新建一行按钮的配置",
"类型": "`buttonProps & { creatorButtonText:string,position:\"top\"|\"bottom\" }`",
"默认值": "`{creatorButtonText:\"新建一行\"}`"
},
{
"参数": "label",
"说明": "与 From.Item 相同",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "name",
"说明": "list 在 form 中的值,必填项",
"类型": "`NamePath`",
"默认值": "-"
},
{
"参数": "alwaysShowItemLabel",
"说明": "Item 中总是展示 label",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "actionRef",
"说明": "当前 List 的自带操作,可以增删改查列表项",
"类型": "`{add,remove,move,get}`",
"默认值": "-"
},
{
"参数": "actionGuard",
"说明": "FormItem 的拦截器,包含删除和添加的拦截,可以用 actionRef 拿到当前行的值",
"类型": "`{beforeAddRow:(index)=>boolean,beforeRemoveRow:(index)=>boolean}`",
"默认值": "-"
},
{
"参数": "min",
"说明": "最少条目,删除时如果当前数据条目少于该数则无法删除",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "max",
"说明": "最多条目,新增或复制时如果当前数据条目多于该数则无法新增或复制",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "copyIconProps",
"说明": "复制按钮的配置,false 可以取消",
"类型": "`{ Icon?: React.FC<any>; tooltipText?: string; } | false`",
"默认值": "-"
},
{
"参数": "deleteIconProps",
"说明": "删除按钮的配置,false 可以取消",
"类型": "`{ Icon?: React.FC<any>; tooltipText?: string; } | false`",
"默认值": "-"
},
{
"参数": "actionRender",
"说明": "自定义操作按钮",
"类型": "`(field,action,defaultActionDom,count)=>React.ReactNode[]`",
"默认值": "-"
},
{
"参数": "onAfterAdd",
"说明": "新增数据后的钩子",
"类型": "`(defaultValue: StoreValue, insertIndex: number, count: number) => void`",
"默认值": "-"
},
{
"参数": "onAfterRemove",
"说明": "删除数据后的钩子",
"类型": "`(index: number, count: number) => void`",
"默认值": "-"
},
{
"参数": "arrowSort",
"说明": "是否开启箭头按钮排序",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "upIconProps",
"说明": "向上排序按钮的配置,false 可以取消",
"类型": "`{ Icon?: React.FC<any>; tooltipText?: string; } | false`",
"默认值": "-"
},
{
"参数": "downIconProps",
"说明": "向下排序按钮的配置,false 可以取消",
"类型": "`{ Icon?: React.FC<any>; tooltipText?: string; } | false`",
"默认值": "-"
}
]
}
]
},
{
"packageName": "ProForm",
"tableData": [
{
"title": "ProForm - LoginForm",
"table": [
{
"参数": "logo",
"说明": "logo 的配置,支持 ReactNode 和 string",
"类型": "`ReactNode | url`",
"默认值": "-"
},
{
"参数": "title",
"说明": "标题,可以配置为空",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "subTitle",
"说明": "二级标题,可以配置为空",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "actions",
"说明": "自定义额外的登录功能",
"类型": "`ReactNode`"
},
{
"参数": "message",
"说明": "form 顶部的一个提示配置,可以配置一些错误的提示信息",
"类型": "`ReactNode`",
"默认值": "-"
}
]
},
{
"title": "ProForm - LoginFormPage",
"table": [
{
"参数": "logo",
"说明": "logo 的配置,支持 ReactNode 和 string",
"类型": "`ReactNode | url`",
"默认值": "-"
},
{
"参数": "title",
"说明": "标题,可以配置为空",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "subTitle",
"说明": "二级标题,可以配置为空",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "actions",
"说明": "自定义额外的登录功能",
"类型": "`ReactNode`"
},
{
"参数": "message",
"说明": "form 顶部的一个提示配置,可以配置一些错误的提示信息",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "backgroundImageUrl",
"说明": "整个区域的背景图片配置,手机端不会展示",
"类型": "`url`",
"默认值": "-"
},
{
"参数": "activityConfig",
"说明": "活动的配置,包含 title,subTitle,action,分别代表标题,次标题和行动按钮,也可配置 style 来控制区域的样式",
"类型": "`{title,subTitle,action,style}`",
"默认值": "-"
}
]
}
]
},
{
"packageName": "ProForm",
"tableData": [
{
"title": "ProForm - ModalForm",
"table": [
{
"参数": "trigger",
"说明": "用于触发 Modal 打开的 dom,一般是 button",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "open",
"说明": "是否打开",
"类型": "`open`",
"默认值": "-"
},
{
"参数": "onOpenChange",
"说明": "visible 改变时触发",
"类型": "`(open:boolean)=>void`",
"默认值": "-"
},
{
"参数": "modalProps",
"说明": "Modal 的 props,使用方式与 [antd](https://ant.design/components/modal-cn/) 相同。注意:不支持 'visible',请使用全局的 visible",
"类型": "-"
},
{
"参数": "title",
"说明": "弹框的标题",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "width",
"说明": "弹框的宽度",
"类型": "`Number`",
"默认值": "-"
},
{
"参数": "onFinish",
"说明": "提交数据时触发,如果返回一个 true。会关掉抽屉,如果配置了 `destroyOnClose` 还会重置表单。",
"类型": "`async (values)=>boolean`",
"默认值": "-"
},
{
"参数": "submitTimeout",
"说明": "提交数据时,禁用取消按钮的超时时间(毫秒)。",
"类型": "`Number`",
"默认值": "-"
},
{
"参数": "submitter",
"说明": "提交按钮相关配置,使用方式与 [ProForm](https://procomponents.ant.design/components/form) 相同。",
"类型": "-"
}
]
},
{
"title": "ProForm - DrawerForm",
"table": [
{
"参数": "trigger",
"说明": "用于触发 Modal 打开的 dom,一般是 button",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "resize",
"说明": "是否调整大小",
"类型": "`{onResize,maxWidth,minWidth}` | `Boolean`",
"默认值": "{ onResize: () => { }, maxWidth: window.innerWidth * 0.8, minWidth: 300}"
},
{
"参数": "onOpenChange",
"说明": "open 改变时触发",
"类型": "`(open:boolean)=>void`",
"默认值": "-"
},
{
"参数": "drawerProps",
"说明": "Drawer 的 props,使用方式与 [antd](https://ant.design/components/drawer-cn/) 相同。注意:不支持 'visible',请使用全局的 visible",
"类型": "-"
},
{
"参数": "title",
"说明": "抽屉的标题",
"类型": "`ReactNode`",
"默认值": "-"
},
{
"参数": "width",
"说明": "抽屉的宽度(受控属性,使用时权重高于 resize)",
"类型": "`Number`",
"默认值": "-"
},
{
"参数": "onFinish",
"说明": "提交数据时触发,如果返回一个 true。会关掉抽屉,如果配置了 `destroyOnClose` 还会重置表单。",
"类型": "`async (values)=>boolean`",
"默认值": "-"
},
{
"参数": "submitTimeout",
"说明": "提交数据时,禁用取消按钮的超时时间(毫秒)。",
"类型": "`Number`",
"默认值": "-"
}
]
}
]
},
{
"packageName": "ProForm",
"tableData": [
{
"title": "ProForm - QueryFilter",
"table": [
{
"参数": "collapsed",
"说明": "是否折叠超出的表单项,用于受控模式",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "defaultCollapsed",
"说明": "默认状态下是否折叠超出的表单项",
"类型": "`boolean`",
"默认值": "true"
},
{
"参数": "onCollapse",
"说明": "切换表单折叠状态时的回调",
"类型": "`(collapsed)=>void`",
"默认值": "-"
},
{
"参数": "hideRequiredMark",
"说明": "隐藏所有表单项的必选标记,**默认隐藏**",
"类型": "`boolean`",
"默认值": "true"
},
{
"参数": "submitterColSpanProps",
"说明": "提交按钮所在 col 的 props",
"类型": "ColProps",
"默认值": "-"
},
{
"参数": "defaultColsNumber",
"说明": "自定义折叠状态下默认显示的表单控件数量,**最多只展示一行控件**,超出时展示收起/隐藏按钮",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "defaultFormItemsNumber",
"说明": "与 defaultColsNumber 的不同点在于,设置多少就展示多少个控件,超出时展示收起/隐藏按钮",
"类型": "`number`",
"默认值": "-"
},
{
"参数": "labelWidth",
"说明": "label 宽度",
"类型": "`number` | `'auto'`",
"默认值": "`80`"
},
{
"参数": "span",
"说明": "表单项宽度",
"类型": "`number[0 - 24]`",
"默认值": "-"
},
{
"参数": "split",
"说明": "每一行是否有分割线",
"类型": "`boolean`",
"默认值": "-"
},
{
"参数": "preserve",
"说明": "是否能够查询收起的数据,如果设置为 false,收起后的表单数据将会丢失",
"类型": "`boolean`",
"默认值": "true"
}
]
},
{
"title": "ProForm - 默认布局时的规则",
"table": [
{
"容器宽度断点": "`≧ 1352px`",
"单行展示表单列数(包含操作区域)": "4 列",
"默认布局": "`horizontal`"
},
{
"容器宽度断点": "`≧ 1062px`",
"单行展示表单列数(包含操作区域)": "3 列",
"默认布局": "`horizontal`"
},
{
"容器宽度断点": "`≧ 701px && < 1063px`",
"单行展示表单列数(包含操作区域)": "3 列",
"默认布局": "`horizontal`"
},
{
"容器宽度断点": "`≧ 513px && < 701px`",
"单行展示表单列数(包含操作区域)": "2 列",
"默认布局": "`vertical`"
},
{
"容器宽度断点": "`< 513px`",
"单行展示表单列数(包含操作区域)": "1 列",
"默认布局": "`vertical`"
}
]
},
{
"title": "ProForm - 强制上下布局时的规则",
"table": [
{
"容器宽度断点": "`≧ 1057px`",
"单行展示表单列数(包含操作区域)": "4 列"
},
{
"容器宽度断点": "`≧ 785px && < 1057px`",
"单行展示表单列数(包含操作区域)": "3 列"
},
{
"容器宽度断点": "`≧ 513px && < 785px`",
"单行展示表单列数(包含操作区域)": "2 列"
},
{
"容器宽度断点": "`< 513px`",
"单行展示表单列数(包含操作区域)": "1 列"
}
]
},
{
"title": "ProForm - LightFilter",
"table": [
{
"参数": "collapse",
"说明": "是否默认折叠全部字段",
"类型": "`boolean`",
"默认值": "`false`"