UNPKG

@ant-design/pro-components

Version:
1,936 lines (1,935 loc) 145 kB
[ { "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&lt;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`"