ant-design__ant-design-cli/data/v4.6.6.json

{
  "version": "4.6.6",
  "majorVersion": "v4",
  "components": [
    {
      "name": "Affix",
      "category": "Navigation",
      "description": "",
      "whenToUse": "On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.\n\nPlease note that Affix should not cover other content on the page, especially when the size of the viewport is small.",
      "whenToUseZh": "当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。\n\n页面可视范围过小时，慎用此功能以免遮挡页面内容。",
      "props": [
        {
          "name": "offsetBottom",
          "type": "number",
          "default": "-",
          "description": "Offset from the bottom of the viewport (in pixels)",
          "descriptionZh": ""
        },
        {
          "name": "offsetTop",
          "type": "number",
          "default": "0",
          "description": "Offset from the top of the viewport (in pixels)",
          "descriptionZh": ""
        },
        {
          "name": "onChange",
          "type": "function(affixed)",
          "default": "-",
          "description": "Callback for when Affix state is changed",
          "descriptionZh": ""
        },
        {
          "name": "target",
          "type": "() => HTMLElement",
          "default": "() => window",
          "description": "Specifies the scrollable area DOM node",
          "descriptionZh": ""
        }
      ],
      "tokens": [
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of popup",
          "descriptionZh": "弹出层的 z-index"
        }
      ],
      "faq": [
        {
          "question": "Affix bind container with `target`, sometime move out of container.",
          "answer": "We don't listen window scroll for performance consideration. You can add listener if you still want: <https://codesandbox.io/s/2xyj5zr85p>\n\nRelated issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)"
        }
      ],
      "categoryZh": "导航",
      "nameZh": "固钉",
      "since": "4.0.0",
      "doc": "\nWrap Affix around another component to make it stick the viewport.\n\n## When To Use\n\nOn longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.\n\nPlease note that Affix should not cover other content on the page, especially when the size of the viewport is small.\n\n## API\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |\n| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |\n| onChange | Callback for when Affix state is changed | function(affixed) | - |\n| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |\n\n**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:\n\n```jsx\n<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>\n```\n\n## FAQ\n\n### Affix bind container with `target`, sometime move out of container.\n\nWe don't listen window scroll for performance consideration. You can add listener if you still want: <https://codesandbox.io/s/2xyj5zr85p>\n\nRelated issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)\n",
      "docZh": "\n将页面元素钉在可视范围。\n\n## 何时使用\n\n当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。\n\n页面可视范围过小时，慎用此功能以免遮挡页面内容。\n\n## API\n\n| 成员 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |\n| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - |\n| onChange | 固定状态改变时触发的回调函数 | function(affixed) | - |\n| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |\n\n**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：\n\n```jsx\n<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>\n```\n\n## FAQ\n\n### Affix 使用 `target` 绑定容器时，元素会跑到容器外。\n\n从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听：<https://codesandbox.io/s/2xyj5zr85p>\n\n相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)\n"
    },
    {
      "name": "Alert",
      "category": "Feedback",
      "description": "",
      "whenToUse": "- When you need to show alert messages to users.\n- When you need a persistent static container which is closable by user actions.",
      "whenToUseZh": "- 当某个页面需要向用户显示警告的信息时。\n- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。",
      "props": [
        {
          "name": "afterClose",
          "type": "() => void",
          "default": "-",
          "description": "Called when close animation is finished",
          "descriptionZh": "关闭动画结束后触发的回调函数"
        },
        {
          "name": "banner",
          "type": "boolean",
          "default": "false",
          "description": "Whether to show as banner",
          "descriptionZh": "是否用作顶部公告"
        },
        {
          "name": "closable",
          "type": "boolean",
          "default": "-",
          "description": "Whether Alert can be closed",
          "descriptionZh": "默认不显示关闭按钮"
        },
        {
          "name": "closeText",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Close text to show",
          "descriptionZh": "自定义关闭按钮"
        },
        {
          "name": "description",
          "type": "ReactNode",
          "default": "{{ error stack }}",
          "description": "Additional content of Alert",
          "descriptionZh": "自定义错误内容，如果未指定会展示报错堆栈"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "-",
          "description": "Custom icon, effective when `showIcon` is true",
          "descriptionZh": "自定义图标，`showIcon` 为 true 时有效"
        },
        {
          "name": "message",
          "type": "ReactNode",
          "default": "{{ error }}",
          "description": "Content of Alert",
          "descriptionZh": "自定义错误标题，如果未指定会展示原生报错信息"
        },
        {
          "name": "showIcon",
          "type": "boolean",
          "default": "false, in `banner` mode default is true",
          "description": "Whether to show icon",
          "descriptionZh": "是否显示辅助图标"
        },
        {
          "name": "type",
          "type": "string",
          "default": "`info`, in `banner` mode default is `warning`",
          "description": "Type of Alert styles, options: `success`, `info`, `warning`, `error`",
          "descriptionZh": "指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`"
        },
        {
          "name": "onClose",
          "type": "(e: MouseEvent) => void",
          "default": "-",
          "description": "Callback when Alert is closed",
          "descriptionZh": "关闭时触发的回调函数"
        },
        {
          "name": "message",
          "type": "ReactNode",
          "default": "{{ error }}",
          "description": "Custom error message to show",
          "descriptionZh": "自定义错误标题，如果未指定会展示原生报错信息"
        },
        {
          "name": "description",
          "type": "ReactNode",
          "default": "{{ error stack }}",
          "description": "Custom error description to show",
          "descriptionZh": "自定义错误内容，如果未指定会展示报错堆栈"
        }
      ],
      "tokens": [
        {
          "name": "defaultPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Default padding",
          "descriptionZh": "默认内间距"
        },
        {
          "name": "withDescriptionIconSize",
          "type": "number",
          "default": "",
          "description": "Icon size with description",
          "descriptionZh": "带有描述时的图标尺寸"
        },
        {
          "name": "withDescriptionPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding with description",
          "descriptionZh": "带有描述的内间距"
        }
      ],
      "subComponents": [
        "Alert.ErrorBoundary"
      ],
      "categoryZh": "反馈",
      "nameZh": "警告提示",
      "since": "4.0.0",
      "doc": "\nAlert component for feedback.\n\n## When To Use\n\n- When you need to show alert messages to users.\n- When you need a persistent static container which is closable by user actions.\n\n## API\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| afterClose | Called when close animation is finished | () => void | - |\n| banner | Whether to show as banner | boolean | false |\n| closable | Whether Alert can be closed | boolean | - |\n| closeText | Close text to show | string \\| ReactNode | - |\n| description | Additional content of Alert | string \\| ReactNode | - |\n| icon | Custom icon, effective when `showIcon` is true | ReactNode | - |\n| message | Content of Alert | string \\| ReactNode | - |\n| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |\n| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |\n| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |\n\n### Alert.ErrorBoundary\n\n| Property | Description | Type | Default | Version |\n| ----------- | -------------------------------- | --------- | ----------------- | ------- |\n| message | Custom error message to show | ReactNode | {{ error }} | |\n| description | Custom error description to show | ReactNode | {{ error stack }} | |\n",
      "docZh": "\n警告提示，展现需要关注的信息。\n\n## 何时使用\n\n- 当某个页面需要向用户显示警告的信息时。\n- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |\n| banner | 是否用作顶部公告 | boolean | false |\n| closable | 默认不显示关闭按钮 | boolean | - |\n| closeText | 自定义关闭按钮 | string \\| ReactNode | - |\n| description | 警告提示的辅助性文字介绍 | string \\| ReactNode | - |\n| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - |\n| message | 警告提示内容 | string \\| ReactNode | - |\n| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |\n| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |\n| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |\n\n### Alert.ErrorBoundary\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |\n| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |\n"
    },
    {
      "name": "Anchor",
      "category": "Navigation",
      "description": "",
      "whenToUse": "For displaying anchor hyperlinks on page and jumping between them.",
      "whenToUseZh": "需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。",
      "props": [
        {
          "name": "affix",
          "type": "boolean",
          "default": "true",
          "description": "Fixed mode of Anchor",
          "descriptionZh": ""
        },
        {
          "name": "bounds",
          "type": "number",
          "default": "5",
          "description": "Bounding distance of anchor area",
          "descriptionZh": ""
        },
        {
          "name": "getContainer",
          "type": "() => HTMLElement",
          "default": "() => window",
          "description": "Scrolling container",
          "descriptionZh": ""
        },
        {
          "name": "offsetTop",
          "type": "number",
          "default": "0",
          "description": "Pixels to offset from top when calculating position of scroll",
          "descriptionZh": ""
        },
        {
          "name": "showInkInFixed",
          "type": "boolean",
          "default": "false",
          "description": "Whether show ink-balls when `affix={false}`",
          "descriptionZh": ""
        },
        {
          "name": "onClick",
          "type": "function(e: Event, link: Object)",
          "default": "-",
          "description": "Set the handler to handle `click` event",
          "descriptionZh": ""
        },
        {
          "name": "getCurrentAnchor",
          "type": "() => string",
          "default": "-",
          "description": "Customize the anchor highlight",
          "descriptionZh": ""
        },
        {
          "name": "targetOffset",
          "type": "number",
          "default": "-",
          "description": "Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset)",
          "descriptionZh": ""
        },
        {
          "name": "onChange",
          "type": "(currentActiveLink: string) => void",
          "default": "-",
          "description": "Listening for anchor link change",
          "descriptionZh": ""
        },
        {
          "name": "href",
          "type": "string",
          "default": "-",
          "description": "The target of hyperlink",
          "descriptionZh": ""
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The content of hyperlink",
          "descriptionZh": ""
        },
        {
          "name": "target",
          "type": "string",
          "default": "-",
          "description": "Specifies where to display the linked URL",
          "descriptionZh": ""
        }
      ],
      "tokens": [
        {
          "name": "linkPaddingBlock",
          "type": "number",
          "default": "",
          "description": "Vertical padding of link",
          "descriptionZh": "链接纵向内间距"
        },
        {
          "name": "linkPaddingInlineStart",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of link",
          "descriptionZh": "链接横向内间距"
        }
      ],
      "categoryZh": "导航",
      "nameZh": "锚点",
      "since": "4.0.0",
      "doc": "\nHyperlinks to scroll on one page.\n\n## When To Use\n\nFor displaying anchor hyperlinks on page and jumping between them.\n\n## API\n\n### Anchor Props\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| affix | Fixed mode of Anchor | boolean | true | |\n| bounds | Bounding distance of anchor area | number | 5 | |\n| getContainer | Scrolling container | () => HTMLElement | () => window | |\n| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |\n| showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false | |\n| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - | |\n| getCurrentAnchor | Customize the anchor highlight | () => string | - | |\n| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | |\n| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | |\n\n### Link Props\n\n| Property | Description | Type | Default | Version |\n| -------- | ----------------------------------------- | ------------------- | ------- | ------- |\n| href | The target of hyperlink | string | | |\n| title | The content of hyperlink | string \\| ReactNode | | |\n| target | Specifies where to display the linked URL | string | | |\n",
      "docZh": "\n用于跳转到页面指定位置。\n\n## 何时使用\n\n需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。\n\n## API\n\n### Anchor Props\n\n| 成员 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| affix | 固定模式 | boolean | true | |\n| bounds | 锚点区域边界 | number | 5 | |\n| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |\n| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |\n| showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false | |\n| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - | |\n| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | |\n| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - | |\n| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |\n\n### Link Props\n\n| 成员 | 说明 | 类型 | 默认值 | 版本 |\n| ------ | -------------------------------- | ------------------- | ------ | ---- |\n| href | 锚点链接 | string | - | |\n| title | 文字内容 | string \\| ReactNode | - | |\n| target | 该属性指定在何处显示链接的资源。 | string | - | |\n"
    },
    {
      "name": "AutoComplete",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "When there is a need for autocomplete functionality.",
      "whenToUseZh": "需要自动完成时。",
      "props": [
        {
          "name": "allowClear",
          "type": "boolean",
          "default": "false",
          "description": "Show clear button, effective in multiple mode only",
          "descriptionZh": "支持清除, 单选模式有效"
        },
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "If get focus when component mounted",
          "descriptionZh": "自动获取焦点"
        },
        {
          "name": "backfill",
          "type": "boolean",
          "default": "false",
          "description": "If backfill selected item the input when using keyboard",
          "descriptionZh": "使用键盘选择选项的时候把选中项回填到输入框中"
        },
        {
          "name": "children (for customize input element)",
          "type": "HTMLInputElement | HTMLTextAreaElement | React.ReactElement<InputProps>",
          "default": "<Input />",
          "description": "Customize input element",
          "since": "React.ReactElement<InputProps>",
          "descriptionZh": ""
        },
        {
          "name": "children (for dataSource)",
          "type": "React.ReactElement<OptionProps> | Array<React.ReactElement<OptionProps>>",
          "default": "-",
          "description": "Data source to auto complete",
          "since": "-",
          "descriptionZh": ""
        },
        {
          "name": "defaultActiveFirstOption",
          "type": "boolean",
          "default": "true",
          "description": "Whether active first option by default",
          "descriptionZh": "是否默认高亮第一个选项"
        },
        {
          "name": "defaultValue",
          "type": "string",
          "default": "-",
          "description": "Initial selected option",
          "descriptionZh": "指定默认选中的条目"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Whether disabled select",
          "descriptionZh": "是否禁用"
        },
        {
          "name": "dropdownClassName",
          "type": "string",
          "default": "-",
          "description": "The className of dropdown menu",
          "descriptionZh": "下拉菜单的 className 属性"
        },
        {
          "name": "dropdownMatchSelectWidth",
          "type": "boolean | number",
          "default": "true",
          "description": "Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll",
          "since": "true",
          "descriptionZh": "下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动"
        },
        {
          "name": "filterOption",
          "type": "boolean | function(inputValue, option)",
          "default": "true",
          "description": "If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded",
          "since": "true",
          "descriptionZh": "是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false"
        },
        {
          "name": "placeholder",
          "type": "string",
          "default": "-",
          "description": "The placeholder of input",
          "descriptionZh": "输入框提示"
        },
        {
          "name": "value",
          "type": "string",
          "default": "-",
          "description": "Selected option",
          "descriptionZh": "指定当前选中的条目"
        },
        {
          "name": "onBlur",
          "type": "function()",
          "default": "-",
          "description": "Called when leaving the component",
          "descriptionZh": "失去焦点时的回调"
        },
        {
          "name": "onChange",
          "type": "function(value)",
          "default": "-",
          "description": "Called when select an option or input value change, or value of input is changed",
          "descriptionZh": "选中 option，或 input 的 value 变化时，调用此函数"
        },
        {
          "name": "onFocus",
          "type": "function()",
          "default": "-",
          "description": "Called when entering the component",
          "descriptionZh": "获得焦点时的回调"
        },
        {
          "name": "onSearch",
          "type": "function(value)",
          "default": "-",
          "description": "Called when searching items",
          "descriptionZh": "搜索补全项的时候调用"
        },
        {
          "name": "onSelect",
          "type": "function(value, option)",
          "default": "-",
          "description": "Called when a option is selected. param is option's value and option instance",
          "descriptionZh": "被选中时调用，参数为选中项的 value 值"
        },
        {
          "name": "defaultOpen",
          "type": "boolean",
          "default": "-",
          "description": "Initial open state of dropdown",
          "descriptionZh": "是否默认展开下拉菜单"
        },
        {
          "name": "open",
          "type": "boolean",
          "default": "-",
          "description": "Controlled open state of dropdown",
          "descriptionZh": "是否展开下拉菜单"
        },
        {
          "name": "options",
          "type": "{ label, value }[]",
          "default": "-",
          "description": "Select options. Will get better perf than jsx definition",
          "descriptionZh": "数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能"
        },
        {
          "name": "onDropdownVisibleChange",
          "type": "function(open)",
          "default": "-",
          "description": "Call when dropdown open",
          "descriptionZh": "展开下拉菜单的回调"
        },
        {
          "name": "notFoundContent",
          "type": "string",
          "default": "`Not Found`",
          "description": "Specify content to show when no result matches",
          "descriptionZh": "当下拉列表为空时显示的内容"
        }
      ],
      "faq": [
        {
          "question": "Why doesn't the text composition system work well with onSearch in controlled mode?",
          "answer": "Please use `onChange` to manage control state. `onSearch` is used for searching input which is not same as `onChange`. Besides, clicking on the option will not trigger the `onSearch` event.\n\nRelated issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)"
        },
        {
          "question": "Part of api from v3 not available in v4?",
          "answer": "AutoComplete is a Input component support auto complete tips which should not support `labelInValue` prop to modify dispaly value in input. In v3, AutoComplete realization can not handle case that user type match of both `value` & `label` are the same. v4 not longer support `label` as the value input.\n\nBesides, to unique API, `dataSource` replaced with `options`:\n\n#### v3\n\n```tsx\ndataSource = ['light', 'bamboo'];\n// or\ndataSource = [\n { value: 'light', text: 'Light' },\n { value: 'bamboo', text: 'Bamboo' },\n];\n```\n\n#### v4\n\n```tsx\noptions = [\n { value: 'light', label: 'Light' },\n { value: 'bamboo', label: 'Bamboo' },\n];\n```"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "自动完成",
      "since": "4.0.0",
      "doc": "\nAutocomplete function of input field.\n\n## When To Use\n\nWhen there is a need for autocomplete functionality.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| allowClear | Show clear button, effective in multiple mode only | boolean | false | |\n| autoFocus | If get focus when component mounted | boolean | false | |\n| backfill | If backfill selected item the input when using keyboard | boolean | false | |\n| children (for customize input element) | Customize input element | HTMLInputElement \\| HTMLTextAreaElement \\| React.ReactElement&lt;InputProps> | &lt;Input /> | |\n| children (for dataSource) | Data source to auto complete | React.ReactElement&lt;OptionProps> \\| Array&lt;React.ReactElement&lt;OptionProps>> | - | |\n| defaultActiveFirstOption | Whether active first option by default | boolean | true | |\n| defaultValue | Initial selected option | string | - | |\n| disabled | Whether disabled select | boolean | false | |\n| dropdownClassName | The className of dropdown menu | string | - | |\n| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \\| number | true | |\n| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \\| function(inputValue, option) | true | |\n| placeholder | The placeholder of input | string | - | |\n| value | Selected option | string | - | |\n| onBlur | Called when leaving the component | function() | - | |\n| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | |\n| onFocus | Called when entering the component | function() | - | |\n| onSearch | Called when searching items | function(value) | - | |\n| onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - | |\n| defaultOpen | Initial open state of dropdown | boolean | - | |\n| open | Controlled open state of dropdown | boolean | - | |\n| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | |\n| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |\n| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |\n\n## Methods\n\n| Name | Description | Version |\n| ------- | ------------ | ------- |\n| blur() | Remove focus | |\n| focus() | Get focus | |\n\n## FAQ\n\n### Why doesn't the text composition system work well with onSearch in controlled mode?\n\nPlease use `onChange` to manage control state. `onSearch` is used for searching input which is not same as `onChange`. Besides, clicking on the option will not trigger the `onSearch` event.\n\nRelated issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)\n\n### Part of api from v3 not available in v4?\n\nAutoComplete is a Input component support auto complete tips which should not support `labelInValue` prop to modify dispaly value in input. In v3, AutoComplete realization can not handle case that user type match of both `value` & `label` are the same. v4 not longer support `label` as the value input.\n\nBesides, to unique API, `dataSource` replaced with `options`:\n\n#### v3\n\n```tsx\ndataSource = ['light', 'bamboo'];\n// or\ndataSource = [\n { value: 'light', text: 'Light' },\n { value: 'bamboo', text: 'Bamboo' },\n];\n```\n\n#### v4\n\n```tsx\noptions = [\n { value: 'light', label: 'Light' },\n { value: 'bamboo', label: 'Bamboo' },\n];\n```\n",
      "docZh": "\n输入框自动完成功能。\n\n## 何时使用\n\n需要自动完成时。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowClear | 支持清除, 单选模式有效 | boolean | false | |\n| autoFocus | 自动获取焦点 | boolean | false | |\n| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |\n| children (自定义输入框) | 自定义输入框 | HTMLInputElement \\| HTMLTextAreaElement \\| React.ReactElement&lt;InputProps> | &lt;Input /> | |\n| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement&lt;OptionProps> \\| Array&lt;React.ReactElement&lt;OptionProps>> | - | |\n| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |\n| defaultValue | 指定默认选中的条目 | string | - | |\n| disabled | 是否禁用 | boolean | false | |\n| dropdownClassName | 下拉菜单的 className 属性 | string | - | |\n| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \\| number | true | |\n| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \\| function(inputValue, option) | true | |\n| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |\n| placeholder | 输入框提示 | string | - | |\n| value | 指定当前选中的条目 | string | - | |\n| onBlur | 失去焦点时的回调 | function() | - | |\n| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | |\n| onFocus | 获得焦点时的回调 | function() | - | |\n| onSearch | 搜索补全项的时候调用 | function(value) | - | |\n| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - | |\n| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |\n| open | 是否展开下拉菜单 | boolean | - | |\n| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |\n| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |\n| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - | |\n\n## 方法\n\n| 名称 | 描述 | 版本 |\n| ------- | -------- | ---- |\n| blur() | 移除焦点 | |\n| focus() | 获取焦点 | |\n\n## FAQ\n\n### 为何受控状态下使用 onSearch 无法输入中文？\n\n请使用 `onChange` 进行受控管理。`onSearch` 触发于搜索输入，与 `onChange` 时机不同。此外，点选选项时也不会触发 `onSearch` 事件。\n\n相关 issue：[#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)\n\n### v3 的部分属性为何在 v4 中没有了？\n\nAutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有 `labelInValue` 等影响 value 展示的属性。在 v3 版本，AutoComplete 实现存在输入值如果遇到 `value` 与 `label` 相同时无法映射的问题。 v4 中不再支持 `label` 为值的输入形态。\n\n此外为了统一 API，`dataSource` 改为 `options` 你可以如下转换：\n\n#### v3\n\n```tsx\ndataSource = ['light', 'bamboo'];\n// or\ndataSource = [\n { value: 'light', text: 'Light' },\n { value: 'bamboo', text: 'Bamboo' },\n];\n```\n\n#### v4\n\n```tsx\noptions = [\n { value: 'light', label: 'Light' },\n { value: 'bamboo', label: 'Bamboo' },\n];\n```\n"
    },
    {
      "name": "Avatar",
      "category": "Data Display",
      "description": "",
      "props": [
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "-",
          "description": "Custom icon type for an icon avatar",
          "descriptionZh": "设置头像的自定义图标"
        },
        {
          "name": "shape",
          "type": "`circle` | `square`",
          "default": "`circle`",
          "description": "The shape of avatar",
          "since": "`circle`",
          "descriptionZh": "指定头像的形状"
        },
        {
          "name": "size",
          "type": "number | `large` | `small` | `default`",
          "default": "`default`",
          "description": "The size of the avatar",
          "since": "`small` \\",
          "descriptionZh": "设置头像的大小"
        },
        {
          "name": "src",
          "type": "string",
          "default": "-",
          "description": "The address of the image for an image avatar",
          "descriptionZh": "图片类头像的资源地址"
        },
        {
          "name": "srcSet",
          "type": "string",
          "default": "-",
          "description": "A list of sources to use for different screen resolutions",
          "descriptionZh": "设置图片类头像响应式资源地址"
        },
        {
          "name": "alt",
          "type": "string",
          "default": "-",
          "description": "This attribute defines the alternative text describing the image",
          "descriptionZh": "图像无法显示时的替代文本"
        },
        {
          "name": "onError",
          "type": "() => boolean",
          "default": "-",
          "description": "Handler when img load error, return false to prevent default fallback behavior",
          "descriptionZh": "图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为"
        },
        {
          "name": "gap",
          "type": "number",
          "default": "4",
          "description": "Letter type unit distance between left and right sides",
          "since": "4.3.0",
          "descriptionZh": "字符类型距离左右两侧边界单位像素"
        },
        {
          "name": "maxCount",
          "type": "number",
          "default": "-",
          "description": "",
          "descriptionZh": "显示的最大头像个数"
        },
        {
          "name": "maxStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "",
          "descriptionZh": "多余头像样式"
        },
        {
          "name": "maxPopoverPlacement",
          "type": "`top` | `bottom`",
          "default": "`top`",
          "description": "",
          "since": "`top`",
          "descriptionZh": "多余头像气泡弹出位置"
        }
      ],
      "tokens": [
        {
          "name": "containerSize",
          "type": "number",
          "default": "",
          "description": "Size of Avatar",
          "descriptionZh": "头像尺寸"
        },
        {
          "name": "containerSizeLG",
          "type": "number",
          "default": "",
          "description": "Size of large Avatar",
          "descriptionZh": "大号头像尺寸"
        },
        {
          "name": "containerSizeSM",
          "type": "number",
          "default": "",
          "description": "Size of small Avatar",
          "descriptionZh": "小号头像尺寸"
        },
        {
          "name": "groupBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of avatars in a group",
          "descriptionZh": "头像组边框颜色"
        },
        {
          "name": "groupOverlapping",
          "type": "number",
          "default": "",
          "description": "Overlapping of avatars in a group",
          "descriptionZh": "头像组重叠宽度"
        },
        {
          "name": "groupSpace",
          "type": "number",
          "default": "",
          "description": "Spacing between avatars in a group",
          "descriptionZh": "头像组间距"
        },
        {
          "name": "iconFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of Avatar icon",
          "descriptionZh": "头像图标大小"
        },
        {
          "name": "iconFontSizeLG",
          "type": "number",
          "default": "",
          "description": "Font size of large Avatar icon",
          "descriptionZh": "大号头像图标大小"
        },
        {
          "name": "iconFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small Avatar icon",
          "descriptionZh": "小号头像图标大小"
        },
        {
          "name": "textFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of Avatar",
          "descriptionZh": "头像文字大小"
        },
        {
          "name": "textFontSizeLG",
          "type": "number",
          "default": "",
          "description": "Font size of large Avatar",
          "descriptionZh": "大号头像文字大小"
        },
        {
          "name": "textFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small Avatar",
          "descriptionZh": "小号头像文字大小"
        }
      ],
      "subComponents": [
        "Avatar.Group"
      ],
      "categoryZh": "数据展示",
      "nameZh": "头像",
      "since": "4.0.0",
      "doc": "\nAvatars can be used to represent people or objects. It supports images, `Icon`s, or letters.\n\n## API\n\n### Avatar\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| icon | Custom icon type for an icon avatar | ReactNode | - | |\n| shape | The shape of avatar | `circle` \\| `square` | `circle` | |\n| size | The size of the avatar | number \\| `large` \\| `small` \\| `default` | `default` | |\n| src | The address of the image for an image avatar | string | - | |\n| srcSet | A list of sources to use for different screen resolutions | string | - | |\n| alt | This attribute defines the alternative text describing the image | string | - | |\n| onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - | |\n| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |\n\n> Tip: You can set `icon` or `children` as the fallback for image load error, with the priority of `icon` > `children`\n\n### Avatar.Group (4.5.0+)\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ------------------- | -------------------------------------- | ----------------- | ------ | ---- |\n| maxCount | Max avatars to show | number | - | |\n| maxStyle | The style of excess avatar style | CSSProperties | - | |\n| maxPopoverPlacement | The placement of excess avatar Popover | `top` \\| `bottom` | `top` | |\n",
      "docZh": "\n用来代表用户或事物，支持图片、图标或字符展示。\n\n## 设计师专属\n\n安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本.\n\n## API\n\n### Avatar\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| icon | 设置头像的自定义图标 | ReactNode | - | |\n| shape | 指定头像的形状 | `circle` \\| `square` | `circle` | |\n| size | 设置头像的大小 | number \\| `large` \\| `small` \\| `default` | `default` | |\n| src | 图片类头像的资源地址 | string | - | |\n| srcSet | 设置图片类头像响应式资源地址 | string | - | |\n| alt | 图像无法显示时的替代文本 | string | - | |\n| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |\n| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |\n\n> Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`\n\n### Avatar.Group (4.5.0+)\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ------------------- | -------------------- | ----------------- | ------ | ---- |\n| maxCount | 显示的最大头像个数 | number | - | |\n| maxStyle | 多余头像样式 | CSSProperties | - | |\n| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \\| `bottom` | `top` | |\n"
    },
    {
      "name": "BackTop",
      "category": "Other",
      "description": "",
      "whenToUse": "- When the page content is very long.\n- When you need to go back to the top very frequently in order to view the contents.",
      "whenToUseZh": "- 当页面内容区域比较长时；\n- 当用户需要频繁返回顶部查看相关内容时。",
      "props": [
        {
          "name": "target",
          "type": "() => HTMLElement",
          "default": "() => window",
          "description": "Specifies the scrollable area dom node",
          "descriptionZh": "设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数"
        },
        {
          "name": "visibilityHeight",
          "type": "number",
          "default": "400",
          "description": "The BackTop button will not show until the scroll height reaches this value",
          "descriptionZh": "滚动高度达到此参数值才出现 BackTop"
        },
        {
          "name": "onClick",
          "type": "function",
          "default": "-",
          "description": "A callback function, which can be executed when you click the button",
          "descriptionZh": "点击按钮的回调函数"
        },
        {
          "name": "duration",
          "type": "number",
          "default": "450",
          "description": "Time to return to top（ms）",
          "since": "4.4.0",
          "descriptionZh": "回到顶部所需时间（ms）"
        }
      ],
      "tokens": [
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of popup",
          "descriptionZh": "弹出层的 z-index"
        }
      ],
      "categoryZh": "其他",
      "nameZh": "回到顶部",
      "since": "4.0.0",
      "doc": "\n`BackTop` makes it easy to go back to the top of the page.\n\n## When To Use\n\n- When the page content is very long.\n- When you need to go back to the top very frequently in order to view the contents.\n\n## API\n\n> The distance to the bottom is set to `50px` by default, which is overridable.\n>\n> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| target | Specifies the scrollable area dom node | () => HTMLElement | () => window | |\n| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | |\n| onClick | A callback function, which can be executed when you click the button | function | - | |\n| duration | Time to return to top（ms） | number | 450 | 4.4.0 |\n",
      "docZh": "\n返回页面顶部的操作按钮。\n\n## 何时使用\n\n- 当页面内容区域比较长时；\n- 当用户需要频繁返回顶部查看相关内容时。\n\n## API\n\n> 有默认样式，距离底部 `50px`，可覆盖。\n>\n> 自定义样式宽高不大于 40px \\* 40px。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | |\n| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |\n| onClick | 点击按钮的回调函数 | function | - | |\n| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 |\n"
    },
    {
      "name": "Badge",
      "category": "Data Display",
      "description": "",
      "whenToUse": "Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.",
      "whenToUseZh": "一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。",
      "props": [
        {
          "name": "color",
          "type": "string",
          "default": "-",
          "description": "Customize Badge dot color",
          "descriptionZh": "自定义缎带的颜色"
        },
        {
          "name": "count",
          "type": "ReactNode",
          "default": "-",
          "description": "Number to show in badge",
          "descriptionZh": "展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏"
        },
        {
          "name": "dot",
          "type": "boolean",
          "default": "false",
          "description": "Whether to display a red dot instead of `count`",
          "descriptionZh": "不展示数字，只有一个小红点"
        },
        {
          "name": "offset",
          "type": "[number, number]",
          "default": "-",
          "description": "Set offset of the badge dot",
          "descriptionZh": "设置状态点的位置偏移"
        },
        {
          "name": "overflowCount",
          "type": "number",
          "default": "99",
          "description": "Max count to show",
          "descriptionZh": "展示封顶的数字值"
        },
        {
          "name": "showZero",
          "type": "boolean",
          "default": "false",
          "description": "Whether to show badge when `count` is zero",
          "descriptionZh": "当数值为 0 时，是否展示 Badge"
        },
        {
          "name": "status",
          "type": "`success` | `processing` | `default` | `error` | `warning`",
          "default": "-",
          "description": "Set Badge as a status dot",
          "since": "`default` \\",
          "descriptionZh": "设置 Badge 为状态点"
        },
        {
          "name": "size",
          "type": "`default` | `small`",
          "default": "-",
          "description": "If `count` is set, `size` sets the size of badge",
          "since": "4.6.0",
          "descriptionZh": "在设置了 `count` 的前提下有效，设置小圆点的大小"
        },
        {
          "name": "text",
          "type": "ReactNode",
          "default": "-",
          "description": "If `status` is set, `text` sets the display text of the status `dot`",
          "descriptionZh": "缎带中填入的内容"
        },
        {
          "name": "title",
          "type": "string",
          "default": "-",
          "description": "Text to show when hovering over the badge",
          "descriptionZh": "设置鼠标放在状态点上时显示的文字"
        },
        {
          "name": "color",
          "type": "string",
          "default": "-",
          "description": "",
          "descriptionZh": "自定义缎带的颜色"
        },
        {
          "name": "placement",
          "type": "`start` | `end`",
          "default": "`end`",
          "description": "",
          "since": "`end`",
          "descriptionZh": "缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动"
        },
        {
          "name": "text",
          "type": "ReactNode",
          "default": "-",
          "description": "",
          "descriptionZh": "缎带中填入的内容"
        }
      ],
      "tokens": [
        {
          "name": "dotSize",
          "type": "number",
          "default": "",
          "description": "Size of dot badge",
          "descriptionZh": "点状徽标尺寸"
        },
        {
          "name": "indicatorHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of badge",
          "descriptionZh": "徽标高度"
        },
        {
          "name": "indicatorHeightSM",
          "type": "string | number",
          "default": "",
          "description": "Height of small badge",
          "descriptionZh": "小号徽标高度"
        },
        {
          "name": "indicatorZIndex",
          "type": "string | number",
          "default": "",
          "description": "z-index of badge",
          "descriptionZh": "徽标 z-index"
        },
        {
          "name": "statusSize",
          "type": "number",
          "default": "",
          "description": "Size of status badge",
          "descriptionZh": "状态徽标尺寸"
        },
        {
          "name": "textFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of badge text",
          "descriptionZh": "徽标文本尺寸"
        },
        {
          "name": "textFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small badge text",
          "descriptionZh": "小号徽标文本尺寸"
        },
        {
          "name": "textFontWeight",
          "type": "string | number",
          "default": "",
          "description": "Font weight of badge text",
          "descriptionZh": "徽标文本粗细"
        }
      ],
      "subComponents": [
        "Badge.Ribbon"
      ],
      "categoryZh": "数据展示",
      "nameZh": "徽标数",
      "since": "4.0.0",
      "doc": "\nSmall numerical value or status descriptor for UI elements.\n\n## When To Use\n\nBadge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.\n\n## API\n\n### Badge\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| color | Customize Badge dot color | string | - | |\n| count | Number to show in badge | ReactNode | - | |\n| dot | Whether to display a red dot instead of `count` | boolean | false | |\n| offset | Set offset of the badge dot | \\[number, number] | - | |\n| overflowCount | Max count to show | number | 99 | |\n| showZero | Whether to show badge when `count` is zero | boolean | false | |\n| status | Set Badge as a status dot | `success` \\| `processing` \\| `default` \\| `error` \\| `warning` | - | |\n| size | If `count` is set, `size` sets the size of badge | `default` \\| `small` | - | 4.6.0 |\n| text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | |\n| title | Text to show when hovering over the badge | string | - | |\n\n### Badge.Ribbon (4.5.0+)\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| color | Customize Ribbon color | string | - | |\n| placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \\| `end` | `end` | |\n| text | Content inside the Ribbon | ReactNode | - | |\n",
      "docZh": "\n图标右上角的圆形徽标数字。\n\n## 何时使用\n\n一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。\n\n## API\n\n### Badge\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| color | 自定义小圆点的颜色 | string | - | |\n| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode | - | |\n| dot | 不展示数字，只有一个小红点 | boolean | false | |\n| offset | 设置状态点的位置偏移 | \\[number, number] | - | |\n| overflowCount | 展示封顶的数字值 | number | 99 | |\n| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |\n| status | 设置 Badge 为状态点 | `success` \\| `processing` \\| `default` \\| `error` \\| `warning` | - | |\n| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \\| `small` | - | 4.6.0 |\n| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - | |\n| title | 设置鼠标放在状态点上时显示的文字 | string | - | |\n\n### Badge.Ribbon (4.5.0+)\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| color | 自定义缎带的颜色 | string | - | |\n| placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \\| `end` | `end` | |\n| text | 缎带中填入的内容 | ReactNode | - | |\n"
    },
    {
      "name": "Breadcrumb",
      "category": "Navigation",
      "description": "",
      "whenToUse": "- When the system has more than two layers in a hierarchy.\n- When you need to inform the user of where they are.\n- When the user may need to navigate back to a higher level.",
      "whenToUseZh": "- 当系统拥有超过两级以上的层级结构时；\n- 当需要告知用户『你在哪里』时；\n- 当需要向上导航的功能时。",
      "props": [
        {
          "name": "itemRender",
          "type": "(route, params, routes, paths) => ReactNode",
          "default": "-",
          "description": "Custom item renderer",
          "descriptionZh": "自定义链接函数，和 react-router 配置使用"
        },
        {
          "name": "params",
          "type": "object",
          "default": "-",
          "description": "Routing parameters",
          "descriptionZh": "路由的参数"
        },
        {
          "name": "routes",
          "type": "[routes[]](#routes)",
          "default": "-",
          "description": "The routing stack information of router",
          "descriptionZh": "router 的路由栈信息"
        },
        {
          "name": "separator",
          "type": "string | ReactNode",
          "default": "`/`",
          "description": "Custom separator",
          "since": "`/`",
          "descriptionZh": "分隔符自定义"
        },
        {
          "name": "dropdownProps",
          "type": "[Dropdown](/components/dropdown)",
          "default": "-",
          "description": "The dropdown props",
          "descriptionZh": "弹出下拉菜单的自定义配置"
        },
        {
          "name": "href",
          "type": "string",
          "default": "-",
          "description": "Target of hyperlink",
          "descriptionZh": "链接的目的地"
        },
        {
          "name": "onClick",
          "type": "(e:MouseEvent) => void",
          "default": "-",
          "description": "Set the handler to handle click event",
          "descriptionZh": "单击事件"
        },
        {
          "name": "overlay",
          "type": "[Menu](/components/menu) | () => Menu",
          "default": "-",
          "description": "The dropdown menu",
          "since": "-",
          "descriptionZh": "下拉菜单的内容"
        },
        {
          "name": "children",
          "type": "string | ReactNode",
          "default": "`/`",
          "description": "Custom separator",
          "since": "`/`",
          "descriptionZh": "要显示的分隔符"
        }
      ],
      "tokens": [
        {
          "name": "iconFontSize",
          "type": "number",
          "default": "",
          "description": "Icon size",
          "descriptionZh": "图标大小"
        },
        {
          "name": "itemColor",
          "type": "string",
          "default": "",
          "description": "Text color of Breadcrumb item",
          "descriptionZh": "面包屑项文字颜色"
        },
        {
          "name": "lastItemColor",
          "type": "string",
          "default": "",
          "description": "Text color of the last item",
          "descriptionZh": "最后一项文字颜色"
        },
        {
          "name": "linkColor",
          "type": "string",
          "default": "",
          "description": "Text color of link",
          "descriptionZh": "链接文字颜色"
        },
        {
          "name": "linkHoverColor",
          "type": "string",
          "default": "",
          "description": "Color of hovered link",
          "descriptionZh": "链接文字悬浮颜色"
        },
        {
          "name": "separatorColor",
          "type": "string",
          "default": "",
          "description": "Color of separator",
          "descriptionZh": "分隔符颜色"
        },
        {
          "name": "separatorMargin",
          "type": "number",
          "default": "",
          "description": "Margin of separator",
          "descriptionZh": "分隔符外间距"
        }
      ],
      "subComponents": [
        "Breadcrumb.Item",
        "Breadcrumb.Separator"
      ],
      "categoryZh": "导航",
      "nameZh": "面包屑",
      "since": "4.0.0",
      "doc": "\nA breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.\n\n## When To Use\n\n- When the system has more than two layers in a hierarchy.\n- When you need to inform the user of where they are.\n- When the user may need to navigate back to a higher level.\n\n## API\n\n### Breadcrumb\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - | |\n| params | Routing parameters | object | - | |\n| routes | The routing stack information of router | [routes\\[\\]](#routes) | - | |\n| separator | Custom separator | string \\| ReactNode | `/` | |\n\n### Breadcrumb.Item\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - | |\n| href | Target of hyperlink | string | - | |\n| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - | |\n| overlay | The dropdown menu | [Menu](/components/menu) \\| () => Menu | - | |\n\n### Breadcrumb.Separator\n\n| Property | Description | Type | Default | Version |\n| -------- | ---------------- | ------------------- | ------- | ------- |\n| children | Custom separator | string \\| ReactNode | `/` | |\n\n> When using `Breadcrumb.Separator`,its parent component must be set to `separator=\"\"`, otherwise the default separator of the parent component will appear.\n\n### routes\n\n```ts\ninterface Route {\n path: string;\n breadcrumbName: string;\n children: Array<{\n path: string;\n breadcrumbName: string;\n }>;\n}\n```\n\n### Use with browserHistory\n\nThe link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.\n\n```jsx\nimport { Link } from 'react-router';\n\nconst routes = [\n {\n path: 'index',\n breadcrumbName: 'home',\n },\n {\n path: 'first',\n breadcrumbName: 'first',\n children: [\n {\n path: '/general',\n breadcrumbName: 'General',\n },\n {\n path: '/layout',\n breadcrumbName: 'Layout',\n },\n {\n path: '/navigation',\n breadcrumbName: 'Navigation',\n },\n ],\n },\n {\n path: 'second',\n breadcrumbName: 'second',\n },\n];\nfunction itemRender(route, params, routes, paths) {\n const last = routes.indexOf(route) === routes.length - 1;\n return last ? (\n <span>{route.breadcrumbName}</span>\n ) : (\n <Link to={paths.join('/')}>{route.breadcrumbName}</Link>\n );\n}\n\nreturn <Breadcrumb itemRender={itemRender} routes={routes} />;\n```\n",
      "docZh": "\n显示当前页面在系统层级结构中的位置，并能向上返回。\n\n## 何时使用\n\n- 当系统拥有超过两级以上的层级结构时；\n- 当需要告知用户『你在哪里』时；\n- 当需要向上导航的功能时。\n\n## API\n\n### Breadcrumb\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |\n| params | 路由的参数 | object | - | |\n| routes | router 的路由栈信息 | [routes\\[\\]](#routes) | - | |\n| separator | 分隔符自定义 | string \\| ReactNode | `/` | |\n\n### Breadcrumb.Item\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | |\n| href | 链接的目的地 | string | - | |\n| onClick | 单击事件 | (e:MouseEvent) => void | - | |\n| overlay | 下拉菜单的内容 | [Menu](/components/menu) \\| () => Menu | - | |\n\n### Breadcrumb.Separator\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| -------- | -------------- | ------------------- | ------ | ---- |\n| children | 要显示的分隔符 | string \\| ReactNode | `/` | |\n\n> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=\"\"`，否则会出现父组件默认的分隔符。\n\n### routes\n\n```ts\ninterface Route {\n path: string;\n breadcrumbName: string;\n children: Array<{\n path: string;\n breadcrumbName: string;\n }>;\n}\n```\n\n### 和 browserHistory 配合\n\n和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。\n\n```jsx\nimport { Link } from 'react-router';\n\nconst routes = [\n {\n path: 'index',\n breadcrumbName: 'home',\n },\n {\n path: 'first',\n breadcrumbName: 'first',\n children: [\n {\n path: '/general',\n breadcrumbName: 'General',\n },\n {\n path: '/layout',\n breadcrumbName: 'Layout',\n },\n {\n path: '/navigation',\n breadcrumbName: 'Navigation',\n },\n ],\n },\n {\n path: 'second',\n breadcrumbName: 'second',\n },\n];\n\nfunction itemRender(route, params, routes, paths) {\n const last = routes.indexOf(route) === routes.length - 1;\n return last ? (\n <span>{route.breadcrumbName}</span>\n ) : (\n <Link to={paths.join('/')}>{route.breadcrumbName}</Link>\n );\n}\n\nreturn <Breadcrumb itemRender={itemRender} routes={routes} />;\n```\n"
    },
    {
      "name": "Button",
      "category": "General",
      "description": "",
      "whenToUse": "A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.\n\nIn Ant Design we provide 5 types of button.\n\n- Primary button: indicate the main action, one primary button at most in one section.\n- Default button: indicate a series of actions without priority.\n- Dashed button: used for adding action commonly.\n- Text button: used for the most secondary action.\n- Link button: used for external links.\n\nAnd 4 other properties additionally.\n\n- `danger`: used for actions of risk, like deletion or authorization.\n- `ghost`: used in situations with complex background, home pages usually.\n- `disabled`: when actions is not available.\n- `loading`: add loading spinner in button, avoiding multiple submits too.",
      "whenToUseZh": "标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。\n\n在 Ant Design 中我们提供了五种按钮。\n\n- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。\n- 默认按钮：用于没有主次之分的一组行动点。\n- 虚线按钮：常用于添加操作。\n- 文本按钮：用于最次级的行动点。\n- 链接按钮：用于作为外链的行动点。\n\n以及四种状态属性与上面配合使用。\n\n- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。\n- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。\n- 禁用：行动点不可用的时候，一般需要文案解释。\n- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。",
      "props": [
        {
          "name": "block",
          "type": "boolean",
          "default": "false",
          "description": "Option to fit button width to its parent width",
          "descriptionZh": "将按钮宽度调整为其父宽度的选项"
        },
        {
          "name": "danger",
          "type": "boolean",
          "default": "false",
          "description": "Set the danger status of button",
          "descriptionZh": "设置危险按钮"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disabled state of button",
          "descriptionZh": "按钮失效状态"
        },
        {
          "name": "ghost",
          "type": "boolean",
          "default": "false",
          "description": "Make background transparent and invert text and border colors",
          "descriptionZh": "幽灵属性，使按钮背景透明"
        },
        {
          "name": "href",
          "type": "string",
          "default": "-",
          "description": "Redirect url of link button",
          "descriptionZh": "点击跳转的地址，指定此属性 button 的行为和 a 链接一致"
        },
        {
          "name": "htmlType",
          "type": "string",
          "default": "`button`",
          "description": "Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)",
          "descriptionZh": "设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "-",
          "description": "Set the icon component of button",
          "descriptionZh": "设置按钮的图标组件"
        },
        {
          "name": "loading",
          "type": "boolean | { delay: number }",
          "default": "false",
          "description": "Set the loading status of button",
          "since": "false",
          "descriptionZh": "设置按钮载入状态"
        },
        {
          "name": "onClick",
          "type": "(event) => void",
          "default": "-",
          "description": "Set the handler to handle `click` event",
          "descriptionZh": "点击按钮时的回调"
        },
        {
          "name": "shape",
          "type": "string",
          "default": "-",
          "description": "Can be set to `circle`, `round` or omitted",
          "descriptionZh": "设置按钮形状，可选值为 `circle`、 `round` 或者不设"
        },
        {
          "name": "size",
          "type": "`large` | `middle` | `small`",
          "default": "-",
          "description": "Set the size of button",
          "since": "`small`",
          "descriptionZh": "设置按钮大小"
        },
        {
          "name": "target",
          "type": "string",
          "default": "-",
          "description": "Same as target attribute of a, works when href is specified",
          "descriptionZh": "相当于 a 链接的 target 属性，href 存在时生效"
        },
        {
          "name": "type",
          "type": "string",
          "default": "`default`",
          "description": "Can be set to `primary` `ghost` `dashed` `link` `text` `default`",
          "descriptionZh": "设置按钮类型"
        }
      ],
      "tokens": [
        {
          "name": "contentFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of button content",
          "descriptionZh": "按钮内容字体大小"
        },
        {
          "name": "contentFontSizeLG",
          "type": "number",
          "default": "",
          "description": "Font size of large button content",
          "descriptionZh": "大号按钮内容字体大小"
        },
        {
          "name": "contentFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small button content",
          "descriptionZh": "小号按钮内容字体大小"
        },
        {
          "name": "dangerColor",
          "type": "string",
          "default": "",
          "description": "Text color of danger button",
          "descriptionZh": "危险按钮文本颜色"
        },
        {
          "name": "dangerShadow",
          "type": "string",
          "default": "",
          "description": "Shadow of danger button",
          "descriptionZh": "危险按钮阴影"
        },
        {
          "name": "dashedBgDisabled",
          "type": "string",
          "default": "",
          "description": "",
          "descriptionZh": "type='dashed' 禁用状态下的背景颜色"
        },
        {
          "name": "defaultActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color of default button when active",
          "descriptionZh": "默认按钮激活态背景色"
        },
        {
          "name": "defaultActiveBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of default button when active",
          "descriptionZh": "默认按钮激活态边框颜色"
        },
        {
          "name": "defaultActiveColor",
          "type": "string",
          "default": "",
          "description": "Text color of default button when active",
          "descriptionZh": "默认按钮激活态文字颜色"
        },
        {
          "name": "defaultBg",
          "type": "string",
          "default": "",
          "description": "Background color of default button",
          "descriptionZh": "默认按钮背景色"
        },
        {
          "name": "defaultBgDisabled",
          "type": "string",
          "default": "",
          "description": "",
          "descriptionZh": "type='default' 禁用状态下的背景颜色"
        },
        {
          "name": "defaultBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of default button",
          "descriptionZh": "默认按钮边框颜色"
        },
        {
          "name": "defaultColor",
          "type": "string",
          "default": "",
          "description": "Text color of default button",
          "descriptionZh": "默认按钮文本颜色"
        },
        {
          "name": "defaultGhostBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of default ghost button",
          "descriptionZh": "默认幽灵按钮边框颜色"
        },
        {
          "name": "defaultGhostColor",
          "type": "string",
          "default": "",
          "description": "Text color of default ghost button",
          "descriptionZh": "默认幽灵按钮文本颜色"
        },
        {
          "name": "defaultHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of default button when hover",
          "descriptionZh": "默认按钮悬浮态背景色"
        },
        {
          "name": "defaultHoverBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of default button",
          "descriptionZh": "默认按钮悬浮态边框颜色"
        },
        {
          "name": "defaultHoverColor",
          "type": "string",
          "default": "",
          "description": "Text color of default button when hover",
          "descriptionZh": "默认按钮悬浮态文本颜色"
        },
        {
          "name": "defaultShadow",
          "type": "string",
          "default": "",
          "description": "Shadow of default button",
          "descriptionZh": "默认按钮阴影"
        },
        {
          "name": "fontWeight",
          "type": "FontWeight | undefined",
          "default": "",
          "description": "Font weight of text",
          "descriptionZh": "文字字重"
        },
        {
          "name": "ghostBg",
          "type": "string",
          "default": "",
          "description": "Background color of ghost button",
          "descriptionZh": "幽灵按钮背景色"
        },
        {
          "name": "iconGap",
          "type": "Gap<string | number> | undefined",
          "default": "",
          "description": "Gap between icon and text",
          "descriptionZh": "图标文字间距"
        },
        {
          "name": "linkHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of link button when hover",
          "descriptionZh": "链接按钮悬浮态背景色"
        },
        {
          "name": "onlyIconSize",
          "type": "string | number",
          "default": "",
          "description": "Icon size of button which only contains icon",
          "descriptionZh": "只有图标的按钮图标尺寸"
        },
        {
          "name": "onlyIconSizeLG",
          "type": "string | number",
          "default": "",
          "description": "Icon size of large button which only contains icon",
          "descriptionZh": "大号只有图标的按钮图标尺寸"
        },
        {
          "name": "onlyIconSizeSM",
          "type": "string | number",
          "default": "",
          "description": "Icon size of small button which only contains icon",
          "descriptionZh": "小号只有图标的按钮图标尺寸"
        },
        {
          "name": "paddingInline",
          "type": "PaddingInline<string | number> | undefined",
          "default": "",
          "description": "Horizontal padding of button",
          "descriptionZh": "按钮横向内间距"
        },
        {
          "name": "paddingInlineLG",
          "type": "PaddingInline<string | number> | undefined",
          "default": "",
          "description": "Horizontal padding of large button",
          "descriptionZh": "大号按钮横向内间距"
        },
        {
          "name": "paddingInlineSM",
          "type": "PaddingInline<string | number> | undefined",
          "default": "",
          "description": "Horizontal padding of small button",
          "descriptionZh": "小号按钮横向内间距"
        },
        {
          "name": "primaryColor",
          "type": "string",
          "default": "",
          "description": "Text color of primary button",
          "descriptionZh": "主要按钮文本颜色"
        },
        {
          "name": "primaryShadow",
          "type": "string",
          "default": "",
          "description": "Shadow of primary button",
          "descriptionZh": "主要按钮阴影"
        },
        {
          "name": "solidTextColor",
          "type": "string",
          "default": "",
          "description": "Default text color for solid buttons.",
          "descriptionZh": "默认实心按钮的文本色"
        },
        {
          "name": "textHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of text button when hover",
          "descriptionZh": "文本按钮悬浮态背景色"
        },
        {
          "name": "textTextActiveColor",
          "type": "string",
          "default": "",
          "description": "Default text color for text buttons on active",
          "descriptionZh": "默认文本按钮激活态文字颜色"
        },
        {
          "name": "textTextColor",
          "type": "string",
          "default": "",
          "description": "Default text color for text buttons",
          "descriptionZh": "默认文本按钮的文本色"
        },
        {
          "name": "textTextHoverColor",
          "type": "string",
          "default": "",
          "description": "Default text color for text buttons on hover",
          "descriptionZh": "默认文本按钮悬浮态文本颜色"
        }
      ],
      "faq": [
        {
          "question": "How to remove space between 2 chinese characters?",
          "answer": "Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.\n\n<img src=\"https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png\" style=\"box-shadow: none; margin: 0; width: 100px\" alt=\"Button with two Chinese characters\" />"
        }
      ],
      "categoryZh": "通用",
      "nameZh": "按钮",
      "since": "4.0.0",
      "doc": "\nTo trigger an operation.\n\n## When To Use\n\nA button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.\n\nIn Ant Design we provide 5 types of button.\n\n- Primary button: indicate the main action, one primary button at most in one section.\n- Default button: indicate a series of actions without priority.\n- Dashed button: used for adding action commonly.\n- Text button: used for the most secondary action.\n- Link button: used for external links.\n\nAnd 4 other properties additionally.\n\n- `danger`: used for actions of risk, like deletion or authorization.\n- `ghost`: used in situations with complex background, home pages usually.\n- `disabled`: when actions is not available.\n- `loading`: add loading spinner in button, avoiding multiple submits too.\n\n## API\n\nDifferent button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| block | Option to fit button width to its parent width | boolean | false | |\n| danger | Set the danger status of button | boolean | false | |\n| disabled | Disabled state of button | boolean | false | |\n| ghost | Make background transparent and invert text and border colors | boolean | false | |\n| href | Redirect url of link button | string | - | |\n| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |\n| icon | Set the icon component of button | ReactNode | - | |\n| loading | Set the loading status of button | boolean \\| { delay: number } | false | |\n| onClick | Set the handler to handle `click` event | (event) => void | - | |\n| shape | Can be set to `circle`, `round` or omitted | string | - | |\n| size | Set the size of button | `large` \\| `middle` \\| `small` | - | |\n| target | Same as target attribute of a, works when href is specified | string | - | |\n| type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` | |\n\nIt accepts all props which native buttons support.\n\n## FAQ\n\n### How to remove space between 2 chinese characters?\n\nFollowing the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.\n\n<img src=\"https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png\" style=\"box-shadow: none; margin: 0; width: 100px\" alt=\"Button with two Chinese characters\" />\n\n<style>\n[id^=components-button-demo-].ant-btn {\n margin-right: 8px;\n margin-bottom: 12px;\n}\n[id^=\"components-button-demo-\"].ant-btn-rtl {\n margin-right: 0;\n margin-left: 8px;\n}\n[id^=components-button-demo-].ant-btn-group >.ant-btn,\n[id^=components-button-demo-].ant-btn-group > span >.ant-btn {\n margin-right: 0;\n}\n[data-theme=\"dark\"].site-button-ghost-wrapper {\n background: rgba(255, 255, 255, 0.2);\n}\n</style>\n",
      "docZh": "\n按钮用于开始一个即时操作。\n\n## 何时使用\n\n标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。\n\n在 Ant Design 中我们提供了五种按钮。\n\n- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。\n- 默认按钮：用于没有主次之分的一组行动点。\n- 虚线按钮：常用于添加操作。\n- 文本按钮：用于最次级的行动点。\n- 链接按钮：用于作为外链的行动点。\n\n以及四种状态属性与上面配合使用。\n\n- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。\n- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。\n- 禁用：行动点不可用的时候，一般需要文案解释。\n- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。\n\n## API\n\n通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。\n\n按钮的属性说明如下：\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |\n| danger | 设置危险按钮 | boolean | false | |\n| disabled | 按钮失效状态 | boolean | false | |\n| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |\n| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |\n| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |\n| icon | 设置按钮的图标组件 | ReactNode | - | |\n| loading | 设置按钮载入状态 | boolean \\| { delay: number } | false | |\n| onClick | 点击按钮时的回调 | (event) => void | - | |\n| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | |\n| size | 设置按钮大小 | `large` \\| `middle` \\| `small` | - | |\n| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |\n| type | 设置按钮类型 | `primary` \\| `ghost` \\| `dashed` \\| `link` \\| `text` \\| `default` | `default` | |\n\n支持原生 button 的其他所有属性。\n\n## FAQ\n\n### 如何移除两个汉字之间的空格？\n\n根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。\n\n<img src=\"https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png\" style=\"box-shadow: none; margin: 0; width: 100px\" alt=\"移除两个汉字之间的空格\" />\n\n<style>\n[id^=\"components-button-demo-\"].ant-btn {\n margin-right: 8px;\n margin-bottom: 12px;\n}\n[id^=\"components-button-demo-\"].ant-btn-rtl {\n margin-right: 0;\n margin-left: 8px;\n}\n[id^=\"components-button-demo-\"].ant-btn-group >.ant-btn {\n margin-right: 0;\n}\n[data-theme=\"dark\"].site-button-ghost-wrapper {\n background: rgba(255, 255, 255, 0.2);\n}\n</style>\n\n## 设计指引\n\n- [我的按钮究竟该放哪儿！？| Ant Design 4.0 系列分享](https://zhuanlan.zhihu.com/p/109644406)\n"
    },
    {
      "name": "Calendar",
      "category": "Data Display",
      "description": "",
      "whenToUse": "When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.",
      "whenToUseZh": "当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。",
      "props": [
        {
          "name": "dateCellRender",
          "type": "function(date: moment): ReactNode",
          "default": "-",
          "description": "Customize the display of the date cell, the returned content will be appended to the cell",
          "descriptionZh": "自定义渲染日期单元格，返回内容会被追加到单元格"
        },
        {
          "name": "dateFullCellRender",
          "type": "function(date: moment): ReactNode",
          "default": "-",
          "description": "Customize the display of the date cell, the returned content will override the cell",
          "descriptionZh": "自定义渲染日期单元格，返回内容覆盖单元格"
        },
        {
          "name": "defaultValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "The date selected by default",
          "descriptionZh": "默认展示的日期"
        },
        {
          "name": "disabledDate",
          "type": "(currentDate: moment) => boolean",
          "default": "-",
          "description": "Function that specifies the dates that cannot be selected",
          "descriptionZh": "不可选择的日期"
        },
        {
          "name": "fullscreen",
          "type": "boolean",
          "default": "true",
          "description": "Whether to display in full-screen",
          "descriptionZh": "是否全屏显示"
        },
        {
          "name": "locale",
          "type": "object",
          "default": "[(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)",
          "description": "The calendar's locale",
          "descriptionZh": "国际化配置"
        },
        {
          "name": "mode",
          "type": "`month` | `year`",
          "default": "`month`",
          "description": "The display mode of the calendar",
          "since": "`month`",
          "descriptionZh": "初始模式"
        },
        {
          "name": "monthCellRender",
          "type": "function(date: moment): ReactNode",
          "default": "-",
          "description": "Customize the display of the month cell, the returned content will be appended to the cell",
          "descriptionZh": "自定义渲染月单元格，返回内容会被追加到单元格"
        },
        {
          "name": "monthFullCellRender",
          "type": "function(date: moment): ReactNode",
          "default": "-",
          "description": "Customize the display of the month cell, the returned content will override the cell",
          "descriptionZh": "自定义渲染月单元格，返回内容覆盖单元格"
        },
        {
          "name": "validRange",
          "type": "[[moment](http://momentjs.com/), [moment](http://momentjs.com/)]",
          "default": "-",
          "description": "To set valid range",
          "descriptionZh": "设置可以显示的日期"
        },
        {
          "name": "value",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "The current selected date",
          "descriptionZh": "展示日期"
        },
        {
          "name": "onPanelChange",
          "type": "function(date: moment, mode: string)",
          "default": "-",
          "description": "Callback for when panel changes",
          "descriptionZh": "日期面板变化回调"
        },
        {
          "name": "onSelect",
          "type": "function(date: moment）",
          "default": "-",
          "description": "Callback for when a date is selected",
          "descriptionZh": "点击选择日期回调"
        },
        {
          "name": "onChange",
          "type": "function(date: moment）",
          "default": "-",
          "description": "Callback for when date changes",
          "descriptionZh": "日期变化回调"
        },
        {
          "name": "headerRender",
          "type": "function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()})",
          "default": "-",
          "description": "Render custom header in panel",
          "descriptionZh": "自定义头部内容"
        }
      ],
      "tokens": [
        {
          "name": "fullBg",
          "type": "string",
          "default": "",
          "description": "Background color of full calendar",
          "descriptionZh": "完整日历背景色"
        },
        {
          "name": "fullPanelBg",
          "type": "string",
          "default": "",
          "description": "Background color of full calendar panel",
          "descriptionZh": "完整日历面板背景色"
        },
        {
          "name": "itemActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color of selected date item",
          "descriptionZh": "日期项选中背景色"
        },
        {
          "name": "miniContentHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of mini calendar content",
          "descriptionZh": "迷你日历内容高度"
        },
        {
          "name": "monthControlWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of month select",
          "descriptionZh": "月选择器宽度"
        },
        {
          "name": "yearControlWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of year select",
          "descriptionZh": "年选择器宽度"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "日历",
      "since": "4.0.0",
      "doc": "\nContainer for displaying data in calendar form.\n\n## When To Use\n\nWhen data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.\n\n## API\n\n**Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `moment` correctly.\n\n```jsx\n// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.\n// import moment from 'moment';\n// import 'moment/locale/zh-cn';\n// moment.locale('zh-cn');\n\n<Calendar\n dateCellRender={dateCellRender}\n monthCellRender={monthCellRender}\n onPanelChange={onPanelChange}\n onSelect={onSelect}\n/>\n```\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | |\n| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - | |\n| defaultValue | The date selected by default | [moment](http://momentjs.com/) | - | |\n| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - | |\n| fullscreen | Whether to display in full-screen | boolean | true | |\n| locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |\n| mode | The display mode of the calendar | `month` \\| `year` | `month` | |\n| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | |\n| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - | |\n| validRange | To set valid range | \\[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |\n| value | The current selected date | [moment](http://momentjs.com/) | - | |\n| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - | |\n| onSelect | Callback for when a date is selected | function(date: moment） | - | |\n| onChange | Callback for when date changes | function(date: moment） | - | |\n| headerRender | Render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | |\n\n## FAQ\n\n- [How to use Calendar with customize date library like dayjs](/docs/react/replace-moment#Calendar)\n",
      "docZh": "\n按照日历形式展示数据的容器。\n\n## 何时使用\n\n当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。\n\n## API\n\n**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。\n\n```jsx\n// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale\n// import moment from 'moment';\n// import 'moment/locale/zh-cn';\n// moment.locale('zh-cn');\n\n<Calendar\n dateCellRender={dateCellRender}\n monthCellRender={monthCellRender}\n onPanelChange={onPanelChange}\n onSelect={onSelect}\n/>\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | - | |\n| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | - | |\n| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | - | |\n| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | |\n| fullscreen | 是否全屏显示 | boolean | true | |\n| locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |\n| mode | 初始模式 | `month` \\| `year` | `month` | |\n| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | - | |\n| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | - | |\n| validRange | 设置可以显示的日期 | \\[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |\n| value | 展示日期 | [moment](http://momentjs.com/) | - | |\n| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | - | |\n| onSelect | 点击选择日期回调 | function(date: moment） | - | |\n| onChange | 日期变化回调 | function(date: moment） | - | |\n| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | |\n\n## FAQ\n\n- [如何在 Calendar 中使用自定义日期库（如 dayjs ）](/docs/react/replace-moment#Calendar)\n"
    },
    {
      "name": "Card",
      "category": "Data Display",
      "description": "",
      "whenToUse": "A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.",
      "whenToUseZh": "最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。",
      "props": [
        {
          "name": "actions",
          "type": "Array<ReactNode>",
          "default": "-",
          "description": "The action list, shows at the bottom of the Card",
          "descriptionZh": "卡片操作组，位置在卡片底部"
        },
        {
          "name": "activeTabKey",
          "type": "string",
          "default": "-",
          "description": "Current TabPane's key",
          "descriptionZh": "当前激活页签的 key"
        },
        {
          "name": "headStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "Inline style to apply to the card head",
          "descriptionZh": "自定义标题区域样式"
        },
        {
          "name": "bodyStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "Inline style to apply to the card content",
          "descriptionZh": "内容区域自定义样式"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Toggles rendering of the border around the card",
          "descriptionZh": "是否有边框"
        },
        {
          "name": "cover",
          "type": "ReactNode",
          "default": "-",
          "description": "Card cover",
          "descriptionZh": "卡片封面"
        },
        {
          "name": "defaultActiveTabKey",
          "type": "string",
          "default": "-",
          "description": "Initial active TabPane's key, if `activeTabKey` is not set",
          "descriptionZh": "初始化选中页签的 key，如果没有设置 activeTabKey"
        },
        {
          "name": "extra",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Content to render in the top-right corner of the card",
          "since": "-",
          "descriptionZh": "卡片右上角的操作区域"
        },
        {
          "name": "hoverable",
          "type": "boolean",
          "default": "false",
          "description": "Lift up when hovering card",
          "descriptionZh": "鼠标移过时可浮起"
        },
        {
          "name": "loading",
          "type": "boolean",
          "default": "false",
          "description": "Shows a loading indicator while the contents of the card are being fetched",
          "descriptionZh": "当卡片内容还在加载中时，可以用 loading 展示一个占位"
        },
        {
          "name": "tabList",
          "type": "Array<{key: string, tab: ReactNode}>",
          "default": "-",
          "description": "List of TabPane's head",
          "descriptionZh": "页签标题列表"
        },
        {
          "name": "tabBarExtraContent",
          "type": "ReactNode",
          "default": "-",
          "description": "Extra content in tab bar",
          "descriptionZh": "tab bar 上额外的元素"
        },
        {
          "name": "size",
          "type": "`default` | `small`",
          "default": "`default`",
          "description": "Size of card",
          "since": "`default`",
          "descriptionZh": "card 的尺寸"
        },
        {
          "name": "title",
          "type": "ReactNode",
          "default": "-",
          "description": "Card title",
          "since": "-",
          "descriptionZh": "标题内容"
        },
        {
          "name": "type",
          "type": "string",
          "default": "-",
          "description": "Card style type, can be set to `inner` or not set",
          "descriptionZh": "卡片类型，可设置为 `inner` 或 不设置"
        },
        {
          "name": "onTabChange",
          "type": "(key) => void",
          "default": "-",
          "description": "Callback when tab is switched",
          "descriptionZh": "页签切换的回调"
        },
        {
          "name": "tabProps",
          "type": "-",
          "default": "-",
          "description": "[Tabs](/components/tabs/#Tabs)",
          "descriptionZh": "[Tabs](/components/tabs/#Tabs)"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The className of container",
          "descriptionZh": "容器类名"
        },
        {
          "name": "hoverable",
          "type": "boolean",
          "default": "true",
          "description": "Lift up when hovering card grid",
          "descriptionZh": "鼠标移过时可浮起"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "The style object of container",
          "descriptionZh": "定义容器类名的样式"
        },
        {
          "name": "avatar",
          "type": "ReactNode",
          "default": "-",
          "description": "Avatar or icon",
          "descriptionZh": "头像/图标"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The className of container",
          "descriptionZh": "容器类名"
        },
        {
          "name": "description",
          "type": "ReactNode",
          "default": "-",
          "description": "Description content",
          "descriptionZh": "描述内容"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "The style object of container",
          "descriptionZh": "定义容器类名的样式"
        },
        {
          "name": "title",
          "type": "ReactNode",
          "default": "-",
          "description": "Title content",
          "descriptionZh": "标题内容"
        }
      ],
      "tokens": [
        {
          "name": "actionsBg",
          "type": "string",
          "default": "",
          "description": "Background color of card actions",
          "descriptionZh": "操作区背景色"
        },
        {
          "name": "actionsLiMargin",
          "type": "string",
          "default": "",
          "description": "Margin of each item in card actions",
          "descriptionZh": "操作区每一项的外间距"
        },
        {
          "name": "bodyPadding",
          "type": "number",
          "default": "",
          "description": "Padding of card body",
          "descriptionZh": "卡片内边距"
        },
        {
          "name": "bodyPaddingSM",
          "type": "number",
          "default": "",
          "description": "Padding of small card body",
          "descriptionZh": "小号卡片内边距"
        },
        {
          "name": "extraColor",
          "type": "string",
          "default": "",
          "description": "Text color of extra area",
          "descriptionZh": "额外区文字颜色"
        },
        {
          "name": "headerBg",
          "type": "string",
          "default": "",
          "description": "Background color of card header",
          "descriptionZh": "卡片头部背景色"
        },
        {
          "name": "headerFontSize",
          "type": "string | number",
          "default": "",
          "description": "Font size of card header",
          "descriptionZh": "卡片头部文字大小"
        },
        {
          "name": "headerFontSizeSM",
          "type": "string | number",
          "default": "",
          "description": "Font size of small card header",
          "descriptionZh": "小号卡片头部文字大小"
        },
        {
          "name": "headerHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of card header",
          "descriptionZh": "卡片头部高度"
        },
        {
          "name": "headerHeightSM",
          "type": "string | number",
          "default": "",
          "description": "Height of small card header",
          "descriptionZh": "小号卡片头部高度"
        },
        {
          "name": "headerPadding",
          "type": "number",
          "default": "",
          "description": "Padding of card head",
          "descriptionZh": "卡片头部内边距"
        },
        {
          "name": "headerPaddingSM",
          "type": "number",
          "default": "",
          "description": "Padding of small card head",
          "descriptionZh": "小号卡片头部内边距"
        },
        {
          "name": "tabsMarginBottom",
          "type": "number",
          "default": "",
          "description": "Margin bottom of tabs component",
          "descriptionZh": "内置标签页组件下间距"
        }
      ],
      "subComponents": [
        "Card.Grid",
        "Card.Meta"
      ],
      "categoryZh": "数据展示",
      "nameZh": "卡片",
      "since": "4.0.0",
      "doc": "\nSimple rectangular container.\n\n## When To Use\n\nA card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.\n\n## API\n\n```jsx\n<Card title=\"Card title\">Card content</Card>\n```\n\n### Card\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| actions | The action list, shows at the bottom of the Card | Array&lt;ReactNode> | - | |\n| activeTabKey | Current TabPane's key | string | - | |\n| headStyle | Inline style to apply to the card head | CSSProperties | - | |\n| bodyStyle | Inline style to apply to the card content | CSSProperties | - | |\n| bordered | Toggles rendering of the border around the card | boolean | true | |\n| cover | Card cover | ReactNode | - | |\n| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | - | |\n| extra | Content to render in the top-right corner of the card | string \\| ReactNode | - | |\n| hoverable | Lift up when hovering card | boolean | false | |\n| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | |\n| tabList | List of TabPane's head | Array&lt;{key: string, tab: ReactNode}> | - | |\n| tabBarExtraContent | Extra content in tab bar | ReactNode | - | |\n| size | Size of card | `default` \\| `small` | `default` | |\n| title | Card title | string \\| ReactNode | - | |\n| type | Card style type, can be set to `inner` or not set | string | - | |\n| onTabChange | Callback when tab is switched | (key) => void | - | |\n| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | |\n\n### Card.Grid\n\n| Property | Description | Type | Default | Version |\n| --------- | ------------------------------- | ------------- | ------- | ------- |\n| className | The className of container | string | - | |\n| hoverable | Lift up when hovering card grid | boolean | true | |\n| style | The style object of container | CSSProperties | - | |\n\n### Card.Meta\n\n| Property | Description | Type | Default | Version |\n| ----------- | ----------------------------- | ------------- | ------- | ------- |\n| avatar | Avatar or icon | ReactNode | - | |\n| className | The className of container | string | - | |\n| description | Description content | ReactNode | - | |\n| style | The style object of container | CSSProperties | - | |\n| title | Title content | ReactNode | - | |\n",
      "docZh": "\n通用卡片容器。\n\n## 何时使用\n\n最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。\n\n## API\n\n```jsx\n<Card title=\"卡片标题\">卡片内容</Card>\n```\n\n### Card\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| actions | 卡片操作组，位置在卡片底部 | Array&lt;ReactNode> | - | |\n| activeTabKey | 当前激活页签的 key | string | - | |\n| headStyle | 自定义标题区域样式 | CSSProperties | - | |\n| bodyStyle | 内容区域自定义样式 | CSSProperties | - | |\n| bordered | 是否有边框 | boolean | true | |\n| cover | 卡片封面 | ReactNode | - | |\n| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签` | |\n| extra | 卡片右上角的操作区域 | string \\| ReactNode | - | |\n| hoverable | 鼠标移过时可浮起 | boolean | false | |\n| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |\n| tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - | |\n| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |\n| size | card 的尺寸 | `default` \\| `small` | `default` | |\n| title | 卡片标题 | string \\| ReactNode | - | |\n| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | |\n| onTabChange | 页签切换的回调 | (key) => void | - | |\n| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | |\n\n### Card.Grid\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --------- | ---------------------- | ------------- | ------ | ---- |\n| className | 网格容器类名 | string | - | |\n| hoverable | 鼠标移过时可浮起 | boolean | true | |\n| style | 定义网格容器类名的样式 | CSSProperties | - | |\n\n### Card.Meta\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ----------- | ------------------ | ------------- | ------ | ---- |\n| avatar | 头像/图标 | ReactNode | - | |\n| className | 容器类名 | string | - | |\n| description | 描述内容 | ReactNode | - | |\n| style | 定义容器类名的样式 | CSSProperties | - | |\n| title | 标题内容 | ReactNode | - | |\n"
    },
    {
      "name": "Carousel",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- When there is a group of content on the same level.\n- When there is insufficient content space, it can be used to save space in the form of a revolving door.\n- Commonly used for a group of pictures/cards.",
      "whenToUseZh": "- 当有一组平级的内容。\n- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。\n- 常用于一组图片或卡片轮播。",
      "props": [
        {
          "name": "afterChange",
          "type": "function(current)",
          "default": "-",
          "description": "Callback function called after the current index changes",
          "descriptionZh": "切换面板的回调"
        },
        {
          "name": "autoplay",
          "type": "boolean",
          "default": "false",
          "description": "Whether to scroll automatically",
          "descriptionZh": "是否自动切换"
        },
        {
          "name": "beforeChange",
          "type": "function(from, to)",
          "default": "-",
          "description": "Callback function called before the current index changes",
          "descriptionZh": "切换面板的回调"
        },
        {
          "name": "dotPosition",
          "type": "string",
          "default": "`bottom`",
          "description": "The position of the dots, which can be one of `top` `bottom` `left` `right`",
          "descriptionZh": "面板指示点位置，可选 `top` `bottom` `left` `right`"
        },
        {
          "name": "dots",
          "type": "boolean | { className?: string }",
          "default": "true",
          "description": "Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others",
          "since": "true",
          "descriptionZh": "是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者"
        },
        {
          "name": "easing",
          "type": "string",
          "default": "`linear`",
          "description": "Transition interpolation function name",
          "descriptionZh": "动画效果"
        },
        {
          "name": "effect",
          "type": "`scrollx` | `fade`",
          "default": "`scrollx`",
          "description": "Transition effect",
          "since": "`scrollx`",
          "descriptionZh": "动画效果函数"
        }
      ],
      "tokens": [
        {
          "name": "arrowOffset",
          "type": "number",
          "default": "",
          "description": "arrows offset to Carousel edge",
          "descriptionZh": "切换箭头边距"
        },
        {
          "name": "arrowSize",
          "type": "number",
          "default": "",
          "description": "Size of arrows",
          "descriptionZh": "切换箭头大小"
        },
        {
          "name": "dotActiveWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of active indicator",
          "descriptionZh": "激活态指示点宽度"
        },
        {
          "name": "dotGap",
          "type": "number",
          "default": "",
          "description": "gap between indicator",
          "descriptionZh": "指示点之间的间距"
        },
        {
          "name": "dotHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of indicator",
          "descriptionZh": "指示点高度"
        },
        {
          "name": "dotOffset",
          "type": "number",
          "default": "",
          "description": "dot offset to Carousel edge",
          "descriptionZh": "指示点距离边缘的距离"
        },
        {
          "name": "dotWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of indicator",
          "descriptionZh": "指示点宽度"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "走马灯",
      "since": "4.0.0",
      "doc": "\nA carousel component. Scales with its container.\n\n## When To Use\n\n- When there is a group of content on the same level.\n- When there is insufficient content space, it can be used to save space in the form of a revolving door.\n- Commonly used for a group of pictures/cards.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| afterChange | Callback function called after the current index changes | function(current) | - | |\n| autoplay | Whether to scroll automatically | boolean | false | |\n| beforeChange | Callback function called before the current index changes | function(from, to) | - | |\n| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | |\n| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \\| { className?: string } | true | |\n| easing | Transition interpolation function name | string | `linear` | |\n| effect | Transition effect | `scrollx` \\| `fade` | `scrollx` | |\n\n## Methods\n\n| Name | Description |\n| --- | --- |\n| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |\n| next() | Change current slide to next slide |\n| prev() | Change current slide to previous slide |\n\nFind more APIs in react-slick [documentation](https://react-slick.neostack.com/docs/api).\n",
      "docZh": "\n旋转木马，一组轮播的区域。\n\n## 何时使用\n\n- 当有一组平级的内容。\n- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。\n- 常用于一组图片或卡片轮播。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| afterChange | 切换面板的回调 | function(current) | - | | |\n| autoplay | 是否自动切换 | boolean | false | | |\n| beforeChange | 切换面板的回调 | function(from, to) | - | | |\n| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | |\n| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \\| { className?: string } | true | | |\n| easing | 动画效果 | string | `linear` | | |\n| effect | 动画效果函数 | `scrollx` \\| `fade` | `scrollx` | | |\n\n## 方法\n\n| 名称 | 描述 |\n| ------------------------------ | ------------------------------------------------- |\n| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |\n| next() | 切换到下一面板 |\n| prev() | 切换到上一面板 |\n\n更多 API 可参考：<https://react-slick.neostack.com/docs/api>\n"
    },
    {
      "name": "Cascader",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.\n- When selecting from a large data set, with multi-stage classification separated for easy selection.\n- Chooses cascade items in one float layer for better user experience.",
      "whenToUseZh": "- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。\n- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。\n- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。",
      "props": [
        {
          "name": "allowClear",
          "type": "boolean",
          "default": "true",
          "description": "Whether allow clear",
          "descriptionZh": "是否支持清除"
        },
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "If get focus when component mounted",
          "descriptionZh": "自动获取焦点"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Whether has border style",
          "descriptionZh": "是否有边框"
        },
        {
          "name": "changeOnSelect",
          "type": "boolean",
          "default": "false",
          "description": "Change value on each selection if set to true, see above demo for details",
          "descriptionZh": "当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The additional css class",
          "descriptionZh": "自定义类名"
        },
        {
          "name": "defaultValue",
          "type": "string[] | number[]",
          "default": "[]",
          "description": "Initial selected value",
          "since": "[]",
          "descriptionZh": "默认的选中项"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Whether disabled select",
          "descriptionZh": "禁用"
        },
        {
          "name": "displayRender",
          "type": "(label, selectedOptions) => ReactNode",
          "default": "label => label.join(`/`)",
          "description": "The render function of displaying selected options",
          "descriptionZh": "选择后展示的渲染函数"
        },
        {
          "name": "expandTrigger",
          "type": "string",
          "default": "`click`",
          "description": "expand current item when click or hover, one of `click` `hover`",
          "descriptionZh": "次级菜单的展开方式，可选 'click' 和 'hover'"
        },
        {
          "name": "expandIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "Customize the current item expand icon",
          "since": "4.4.0",
          "descriptionZh": "自定义次级菜单展开图标"
        },
        {
          "name": "fieldNames",
          "type": "object",
          "default": "{ label: `label`, value: `value`, children: `children` }",
          "description": "Custom field name for label and value and children",
          "descriptionZh": "自定义 options 中 label name children 的字段"
        },
        {
          "name": "getPopupContainer",
          "type": "function(triggerNode)",
          "default": "() => document.body",
          "description": "Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010)",
          "descriptionZh": "菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010)"
        },
        {
          "name": "loadData",
          "type": "(selectedOptions) => void",
          "default": "-",
          "description": "To load option lazily, and it cannot work with `showSearch`",
          "descriptionZh": "用于动态加载选项，无法与 `showSearch` 一起使用"
        },
        {
          "name": "notFoundContent",
          "type": "string",
          "default": "`Not Found`",
          "description": "Specify content to show when no result matches",
          "descriptionZh": "当下拉列表为空时显示的内容"
        },
        {
          "name": "options",
          "type": "[Option](#Option)[]",
          "default": "-",
          "description": "The data options of cascade",
          "descriptionZh": "可选项数据源"
        },
        {
          "name": "placeholder",
          "type": "string",
          "default": "`Please select`",
          "description": "The input placeholder",
          "descriptionZh": "输入框占位文本"
        },
        {
          "name": "popupClassName",
          "type": "string",
          "default": "-",
          "description": "The additional className of popup overlay",
          "descriptionZh": "自定义浮层类名"
        },
        {
          "name": "popupPlacement",
          "type": "string",
          "default": "`bottomLeft`",
          "description": "Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight`",
          "descriptionZh": "浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight`"
        },
        {
          "name": "popupVisible",
          "type": "boolean",
          "default": "-",
          "description": "Set visible of cascader popup",
          "descriptionZh": "控制浮层显隐"
        },
        {
          "name": "showSearch",
          "type": "boolean | object",
          "default": "false",
          "description": "Whether show search input in single mode",
          "since": "false",
          "descriptionZh": "在选择框中显示搜索框"
        },
        {
          "name": "size",
          "type": "`large` | `middle` | `small`",
          "default": "-",
          "description": "The input size",
          "since": "`small`",
          "descriptionZh": "输入框大小"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "The additional style",
          "descriptionZh": "自定义样式"
        },
        {
          "name": "suffixIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom suffix icon",
          "descriptionZh": "自定义的选择框后缀图标"
        },
        {
          "name": "value",
          "type": "string[] | number[]",
          "default": "-",
          "description": "The selected value",
          "since": "-",
          "descriptionZh": "指定选中项"
        },
        {
          "name": "dropdownRender",
          "type": "(menus: ReactNode) => ReactNode",
          "default": "-",
          "description": "Customize dropdown content",
          "since": "4.4.0",
          "descriptionZh": "自定义下拉框内容"
        },
        {
          "name": "onChange",
          "type": "(value, selectedOptions) => void",
          "default": "-",
          "description": "Callback when finishing cascader select",
          "descriptionZh": "选择完成后的回调"
        },
        {
          "name": "onPopupVisibleChange",
          "type": "(value) => void",
          "default": "-",
          "description": "Callback when popup shown or hidden",
          "descriptionZh": "显示/隐藏浮层的回调"
        },
        {
          "name": "filter",
          "type": "function(inputValue, path): boolean",
          "default": "-",
          "description": "The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded",
          "descriptionZh": "接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false"
        },
        {
          "name": "limit",
          "type": "number | false",
          "default": "50",
          "description": "Set the count of filtered items",
          "since": "50",
          "descriptionZh": "搜索结果展示数量"
        },
        {
          "name": "matchInputWidth",
          "type": "boolean",
          "default": "true",
          "description": "Whether the width of list matches input, ([how it looks](https://github.com/ant-design/ant-design/issues/25779))",
          "descriptionZh": "搜索结果列表是否与输入框同宽（[效果](https://github.com/ant-design/ant-design/issues/25779)）"
        },
        {
          "name": "render",
          "type": "function(inputValue, path): ReactNode",
          "default": "-",
          "description": "Used to render filtered options",
          "descriptionZh": "用于渲染 filter 后的选项"
        },
        {
          "name": "sort",
          "type": "function(a, b, inputValue)",
          "default": "-",
          "description": "Used to sort filtered options",
          "descriptionZh": "用于排序 filter 后的选项"
        }
      ],
      "tokens": [
        {
          "name": "controlItemWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of item",
          "descriptionZh": "选项宽度"
        },
        {
          "name": "controlWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of Cascader",
          "descriptionZh": "选择器宽度"
        },
        {
          "name": "dropdownHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of dropdown",
          "descriptionZh": "下拉菜单高度"
        },
        {
          "name": "menuPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of menu item (single column)",
          "descriptionZh": "选项菜单（单列）内间距"
        },
        {
          "name": "optionPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of menu item",
          "descriptionZh": "选项内间距"
        },
        {
          "name": "optionSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color of selected item",
          "descriptionZh": "选项选中时背景色"
        },
        {
          "name": "optionSelectedColor",
          "type": "string",
          "default": "",
          "description": "Text color when option is selected",
          "descriptionZh": "选项选中时文本颜色"
        },
        {
          "name": "optionSelectedFontWeight",
          "type": "FontWeight | undefined",
          "default": "",
          "description": "Font weight of selected item",
          "descriptionZh": "选项选中时字重"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "级联选择",
      "since": "4.0.0",
      "doc": "\nCascade selection box.\n\n## When To Use\n\n- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.\n- When selecting from a large data set, with multi-stage classification separated for easy selection.\n- Chooses cascade items in one float layer for better user experience.\n\n## API\n\n```jsx\n<Cascader options={options} onChange={onChange} />\n```\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| allowClear | Whether allow clear | boolean | true | |\n| autoFocus | If get focus when component mounted | boolean | false | |\n| bordered | Whether has border style | boolean | true | |\n| changeOnSelect | Change value on each selection if set to true, see above demo for details | boolean | false | |\n| className | The additional css class | string | - | |\n| defaultValue | Initial selected value | string\\[] \\| number\\[] | \\[] | |\n| disabled | Whether disabled select | boolean | false | |\n| displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | |\n| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | |\n| expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 |\n| fieldNames | Custom field name for label and value and children | object | { label: `label`, value: `value`, children: `children` } | |\n| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |\n| loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) => void | - | |\n| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |\n| options | The data options of cascade | [Option](#Option)[] | - | |\n| placeholder | The input placeholder | string | `Please select` | |\n| popupClassName | The additional className of popup overlay | string | - | |\n| popupPlacement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | |\n| popupVisible | Set visible of cascader popup | boolean | - | |\n| showSearch | Whether show search input in single mode | boolean \\| object | false | |\n| size | The input size | `large` \\| `middle` \\| `small` | - | |\n| style | The additional style | CSSProperties | - | |\n| suffixIcon | The custom suffix icon | ReactNode | - | |\n| value | The selected value | string\\[] \\| number\\[] | - | |\n| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |\n| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |\n| onPopupVisibleChange | Callback when popup shown or hidden | (value) => void | - | |\n\nFields in `showSearch`:\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - | |\n| limit | Set the count of filtered items | number \\| false | 50 | |\n| matchInputWidth | Whether the width of list matches input, ([how it looks](https://github.com/ant-design/ant-design/issues/25779)) | boolean | true | |\n| render | Used to render filtered options | function(inputValue, path): ReactNode | - | |\n| sort | Used to sort filtered options | function(a, b, inputValue) | - | |\n\n### Option\n\n```typescript\ninterface Option {\n value: string | number;\n label?: React.ReactNode;\n disabled?: boolean;\n children?: Option[];\n}\n```\n\n## Methods\n\n| Name | Description | Version |\n| ------- | ------------ | ------- |\n| blur() | Remove focus | |\n| focus() | Get focus | |\n",
      "docZh": "\n级联选择框。\n\n## 何时使用\n\n- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。\n- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。\n- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。\n\n## API\n\n```jsx\n<Cascader options={options} onChange={onChange} />\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowClear | 是否支持清除 | boolean | true | |\n| autoFocus | 自动获取焦点 | boolean | false | |\n| bordered | 是否有边框 | boolean | true | |\n| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | |\n| className | 自定义类名 | string | - | |\n| defaultValue | 默认的选中项 | string\\[] \\| number\\[] | \\[] | |\n| disabled | 禁用 | boolean | false | |\n| displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | |\n| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` | |\n| expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 |\n| fieldNames | 自定义 options 中 label name children 的字段 | object | { label: `label`, value: `value`, children: `children` } | |\n| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |\n| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | (selectedOptions) => void | - | |\n| notFoundContent | 当下拉列表为空时显示的内容 | string | `Not Found` | |\n| options | 可选项数据源 | [Option](#Option)[] | - | |\n| placeholder | 输入框占位文本 | string | `请选择` | |\n| popupClassName | 自定义浮层类名 | string | - | |\n| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | |\n| popupVisible | 控制浮层显隐 | boolean | - | |\n| showSearch | 在选择框中显示搜索框 | boolean | false | |\n| size | 输入框大小 | `large` \\| `middle` \\| `small` | - | |\n| style | 自定义样式 | CSSProperties | - | |\n| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |\n| value | 指定选中项 | string\\[] \\| number\\[] | - | |\n| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |\n| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |\n| onPopupVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | |\n\n`showSearch` 为对象时，其中的字段：\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false | function(inputValue, path): boolean | - | |\n| limit | 搜索结果展示数量 | number \\| false | 50 | |\n| matchInputWidth | 搜索结果列表是否与输入框同宽（[效果](https://github.com/ant-design/ant-design/issues/25779)） | boolean | true | |\n| render | 用于渲染 filter 后的选项 | function(inputValue, path): ReactNode | - | |\n| sort | 用于排序 filter 后的选项 | function(a, b, inputValue) | - | |\n\n### Option\n\n```typescript\ninterface Option {\n value: string | number;\n label?: React.ReactNode;\n disabled?: boolean;\n children?: Option[];\n}\n```\n\n## 方法\n\n| 名称 | 描述 | 版本 |\n| ------- | -------- | ---- |\n| blur() | 移除焦点 | |\n| focus() | 获取焦点 | |\n\n> 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。\n"
    },
    {
      "name": "Checkbox",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "- Used for selecting multiple values from several options.\n- If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.",
      "whenToUseZh": "- 在一组可选项中进行多项选择时；\n- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。",
      "props": [
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "If get focus when component mounted",
          "descriptionZh": "自动获取焦点"
        },
        {
          "name": "checked",
          "type": "boolean",
          "default": "false",
          "description": "Specifies whether the checkbox is selected",
          "descriptionZh": "指定当前是否选中"
        },
        {
          "name": "defaultChecked",
          "type": "boolean",
          "default": "false",
          "description": "Specifies the initial state: whether or not the checkbox is selected",
          "descriptionZh": "初始是否选中"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "If disable checkbox",
          "descriptionZh": "整组失效"
        },
        {
          "name": "indeterminate",
          "type": "boolean",
          "default": "false",
          "description": "The indeterminate checked state of checkbox",
          "descriptionZh": "设置 indeterminate 状态，只负责样式控制"
        },
        {
          "name": "onChange",
          "type": "function(e:Event)",
          "default": "-",
          "description": "The callback function that is triggered when the state changes",
          "descriptionZh": "变化时回调函数"
        },
        {
          "name": "defaultValue",
          "type": "string[]",
          "default": "[]",
          "description": "Default selected value",
          "descriptionZh": "默认选中的选项"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "If disable all checkboxes",
          "descriptionZh": "整组失效"
        },
        {
          "name": "name",
          "type": "string",
          "default": "-",
          "description": "The `name` property of all `input[type=\"checkbox\"]` children",
          "descriptionZh": "CheckboxGroup 下所有 `input[type=\"checkbox\"]` 的 `name` 属性"
        },
        {
          "name": "options",
          "type": "string[] | Option[]",
          "default": "[]",
          "description": "Specifies options",
          "since": "[]",
          "descriptionZh": "指定可选项"
        },
        {
          "name": "value",
          "type": "string[]",
          "default": "[]",
          "description": "Used for setting the currently selected value",
          "descriptionZh": "指定选中的选项"
        },
        {
          "name": "onChange",
          "type": "function(checkedValue)",
          "default": "-",
          "description": "The callback function that is triggered when the state changes",
          "descriptionZh": "变化时回调函数"
        },
        {
          "name": "blur()",
          "type": "",
          "default": "-",
          "description": "Remove focus",
          "descriptionZh": ""
        },
        {
          "name": "focus()",
          "type": "",
          "default": "-",
          "description": "Get focus",
          "descriptionZh": ""
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "多选框",
      "since": "4.0.0",
      "doc": "\nCheckbox component.\n\n## When To Use\n\n- Used for selecting multiple values from several options.\n- If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.\n\n## API\n\n### Props\n\n#### Checkbox\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| autoFocus | If get focus when component mounted | boolean | false | |\n| checked | Specifies whether the checkbox is selected | boolean | false | |\n| defaultChecked | Specifies the initial state: whether or not the checkbox is selected | boolean | false | |\n| disabled | If disable checkbox | boolean | false | |\n| indeterminate | The indeterminate checked state of checkbox | boolean | false | |\n| onChange | The callback function that is triggered when the state changes | function(e:Event) | - | |\n\n#### Checkbox Group\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| defaultValue | Default selected value | string\\[] | \\[] | |\n| disabled | If disable all checkboxes | boolean | false | |\n| name | The `name` property of all `input[type=\"checkbox\"]` children | string | - | |\n| options | Specifies options | string\\[] \\| Option\\[] | \\[] | |\n| value | Used for setting the currently selected value | string\\[] | \\[] | |\n| onChange | The callback function that is triggered when the state changes | function(checkedValue) | - | |\n\n### Methods\n\n#### Checkbox\n\n| Name | Description | Version |\n| ------- | ------------ | ------- |\n| blur() | Remove focus | |\n| focus() | Get focus | |\n",
      "docZh": "\n多选框。\n\n## 何时使用\n\n- 在一组可选项中进行多项选择时；\n- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。\n\n## API\n\n### 属性\n\n#### Checkbox\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| -------------- | --------------------------------------- | ----------------- | ------ | ---- |\n| autoFocus | 自动获取焦点 | boolean | false | |\n| checked | 指定当前是否选中 | boolean | false | |\n| defaultChecked | 初始是否选中 | boolean | false | |\n| disabled | 失效状态 | boolean | false | |\n| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |\n| onChange | 变化时回调函数 | function(e:Event) | - | |\n\n#### Checkbox Group\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| defaultValue | 默认选中的选项 | string\\[] | \\[] | |\n| disabled | 整组失效 | boolean | false | |\n| name | CheckboxGroup 下所有 `input[type=\"checkbox\"]` 的 `name` 属性 | string | - | |\n| options | 指定可选项 | string\\[] \\| Option\\[] | \\[] | |\n| value | 指定选中的选项 | string\\[] | \\[] | |\n| onChange | 变化时回调函数 | function(checkedValue) | - | |\n\n##### Option\n\n```typescript\ninterface Option {\n label: string;\n value: string;\n disabled?: boolean;\n}\n```\n\n### 方法\n\n#### Checkbox\n\n| 名称 | 描述 | 版本 |\n| ------- | -------- | ---- |\n| blur() | 移除焦点 | |\n| focus() | 获取焦点 | |\n"
    },
    {
      "name": "Collapse",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- Can be used to group or hide complex regions to keep the page clean.\n- `Accordion` is a special kind of `Collapse`, which allows only one panel to be expanded at a time.",
      "whenToUseZh": "- 对复杂区域进行分组和隐藏，保持页面的整洁。\n- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。",
      "props": [
        {
          "name": "activeKey",
          "type": "string[] | string <br/> number[] | number",
          "default": "No default value. In `accordion` mode, it's the key of the first panel",
          "description": "Key of the active panel",
          "since": "number",
          "descriptionZh": "当前激活 tab 面板的 key"
        },
        {
          "name": "defaultActiveKey",
          "type": "string[] | string <br/> number[] | number",
          "default": "-",
          "description": "Key of the initial active panel",
          "since": "number",
          "descriptionZh": "初始化选中面板的 key"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Toggles rendering of the border around the collapse block",
          "descriptionZh": "带边框风格的折叠面板"
        },
        {
          "name": "accordion",
          "type": "boolean",
          "default": "false",
          "description": "If true, Collapse renders as Accordion",
          "descriptionZh": "手风琴模式"
        },
        {
          "name": "onChange",
          "type": "function",
          "default": "-",
          "description": "Callback function executed when active panel is changed",
          "descriptionZh": "切换面板的回调"
        },
        {
          "name": "expandIcon",
          "type": "(panelProps) => ReactNode",
          "default": "-",
          "description": "Allow to customize collapse icon",
          "descriptionZh": "自定义切换图标"
        },
        {
          "name": "expandIconPosition",
          "type": "`left` | `right`",
          "default": "-",
          "description": "Set expand icon position",
          "since": "-",
          "descriptionZh": "设置图标位置"
        },
        {
          "name": "destroyInactivePanel",
          "type": "boolean",
          "default": "false",
          "description": "Destroy Inactive Panel",
          "descriptionZh": "销毁折叠隐藏的面板"
        },
        {
          "name": "ghost",
          "type": "boolean",
          "default": "false",
          "description": "Make the collapse borderless and its background transparent",
          "since": "4.4.0",
          "descriptionZh": "使折叠面板透明且无边框"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "If true, panel cannot be opened or closed",
          "descriptionZh": "禁用后的面板展开与否将无法通过用户交互改变"
        },
        {
          "name": "forceRender",
          "type": "boolean",
          "default": "false",
          "description": "Forced render of content on panel, instead of lazy rending after clicking on header",
          "descriptionZh": "被隐藏时是否渲染 DOM 结构"
        },
        {
          "name": "header",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Title of the panel",
          "since": "-",
          "descriptionZh": "面板头内容"
        },
        {
          "name": "key",
          "type": "string | number",
          "default": "-",
          "description": "Unique key identifying the panel from among its siblings",
          "since": "-",
          "descriptionZh": "对应 activeKey"
        },
        {
          "name": "showArrow",
          "type": "boolean",
          "default": "true",
          "description": "If false, panel will not show arrow icon",
          "descriptionZh": "是否展示当前面板上的箭头"
        },
        {
          "name": "extra",
          "type": "ReactNode",
          "default": "-",
          "description": "The extra element in the corner",
          "descriptionZh": "自定义渲染每个面板右上角的内容"
        }
      ],
      "tokens": [
        {
          "name": "borderlessContentBg",
          "type": "string",
          "default": "",
          "description": "Background of content in borderless style",
          "descriptionZh": "简约风格折叠面板的内容背景"
        },
        {
          "name": "borderlessContentPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of content in borderless style",
          "descriptionZh": "简约风格折叠面板的内容内边距"
        },
        {
          "name": "contentBg",
          "type": "string",
          "default": "",
          "description": "Background of content",
          "descriptionZh": "折叠面板内容背景"
        },
        {
          "name": "contentPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of content",
          "descriptionZh": "折叠面板内容内边距"
        },
        {
          "name": "headerBg",
          "type": "string",
          "default": "",
          "description": "Background of header",
          "descriptionZh": "折叠面板头部背景"
        },
        {
          "name": "headerPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of header",
          "descriptionZh": "折叠面板头部内边距"
        }
      ],
      "subComponents": [
        "Collapse.Panel"
      ],
      "categoryZh": "数据展示",
      "nameZh": "折叠面板",
      "since": "4.0.0",
      "doc": "\nA content area which can be collapsed and expanded.\n\n## When To Use\n\n- Can be used to group or hide complex regions to keep the page clean.\n- `Accordion` is a special kind of `Collapse`, which allows only one panel to be expanded at a time.\n\n## API\n\n### Collapse\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| activeKey | Key of the active panel | string\\[] \\| string <br/> number\\[] \\| number | No default value. In `accordion` mode, it's the key of the first panel | |\n| defaultActiveKey | Key of the initial active panel | string\\[] \\| string <br/> number\\[] \\| number | - | |\n| bordered | Toggles rendering of the border around the collapse block | boolean | true | |\n| accordion | If true, Collapse renders as Accordion | boolean | false | |\n| onChange | Callback function executed when active panel is changed | function | - | |\n| expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - | |\n| expandIconPosition | Set expand icon position | `left` \\| `right` | - | |\n| destroyInactivePanel | Destroy Inactive Panel | boolean | false | |\n| ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |\n\n### Collapse.Panel\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| disabled | If true, panel cannot be opened or closed | boolean | false | |\n| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | false | |\n| header | Title of the panel | string \\| ReactNode | - | |\n| key | Unique key identifying the panel from among its siblings | string \\| number | - | |\n| showArrow | If false, panel will not show arrow icon | boolean | true | |\n| extra | The extra element in the corner | ReactNode | - | |\n",
      "docZh": "\n可以折叠/展开的内容区域。\n\n## 何时使用\n\n- 对复杂区域进行分组和隐藏，保持页面的整洁。\n- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。\n\n## API\n\n### Collapse\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| activeKey | 当前激活 tab 面板的 key | string\\[] \\| string <br/> number\\[] \\| number | 默认无，accordion 模式下默认第一个元素 | |\n| defaultActiveKey | 初始化选中面板的 key | string\\[] \\| string<br/> number\\[] \\| number | - | |\n| bordered | 带边框风格的折叠面板 | boolean | true | |\n| accordion | 手风琴模式 | boolean | false | |\n| onChange | 切换面板的回调 | function | - | |\n| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |\n| expandIconPosition | 设置图标位置 | `left` \\| `right` | - | |\n| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |\n| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |\n\n### Collapse.Panel\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ----------- | ------------------------------------------ | ------------------- | ------ | ---- |\n| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false | |\n| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |\n| header | 面板头内容 | string \\| ReactNode | - | |\n| key | 对应 activeKey | string \\| number | - | |\n| showArrow | 是否展示当前面板上的箭头 | boolean | true | |\n| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |\n"
    },
    {
      "name": "Comment",
      "category": "Data Display",
      "description": "",
      "whenToUse": "Comments can be used to enable discussions on an entity such as a page, blog post, issue or other.",
      "whenToUseZh": "评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。",
      "props": [
        {
          "name": "actions",
          "type": "Array<ReactNode>",
          "default": "-",
          "description": "List of action items rendered below the comment content",
          "descriptionZh": "在评论内容下面呈现的操作项列表"
        },
        {
          "name": "author",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The element to display as the comment author",
          "since": "-",
          "descriptionZh": "要显示为注释作者的元素"
        },
        {
          "name": "avatar",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The element to display as the comment avatar - generally an antd Avatar or src",
          "since": "-",
          "descriptionZh": "要显示为评论头像的元素 - 通常是 antd Avatar 或者 src"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "default": "-",
          "description": "Nested comments should be provided as children of the Comment",
          "descriptionZh": "嵌套注释应作为注释的子项提供"
        },
        {
          "name": "content",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The main content of the comment",
          "since": "-",
          "descriptionZh": "评论的主要内容"
        },
        {
          "name": "datetime",
          "type": "string | ReactNode",
          "default": "-",
          "description": "A datetime element containing the time to be displayed",
          "since": "-",
          "descriptionZh": "展示时间描述"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "评论",
      "since": "4.0.0",
      "doc": "\nA comment displays user feedback and discussion to website content.\n\n## When To Use\n\nComments can be used to enable discussions on an entity such as a page, blog post, issue or other.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| actions | List of action items rendered below the comment content | Array&lt;ReactNode> | - | |\n| author | The element to display as the comment author | string \\| ReactNode | - | |\n| avatar | The element to display as the comment avatar - generally an antd Avatar or src | string \\| ReactNode | - | |\n| children | Nested comments should be provided as children of the Comment | ReactNode | - | |\n| content | The main content of the comment | string \\| ReactNode | - | |\n| datetime | A datetime element containing the time to be displayed | string \\| ReactNode | - | |\n",
      "docZh": "\n对网站内容的反馈、评价和讨论。\n\n## 何时使用\n\n评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| actions | 在评论内容下面呈现的操作项列表 | Array&lt;ReactNode> | - | |\n| author | 要显示为注释作者的元素 | string \\| ReactNode | - | |\n| avatar | 要显示为评论头像的元素 - 通常是 antd Avatar 或者 src | string \\| ReactNode | - | |\n| children | 嵌套注释应作为注释的子项提供 | ReactNode | - | |\n| content | 评论的主要内容 | string \\| ReactNode | - | |\n| datetime | 展示时间描述 | string \\| ReactNode | - | |\n"
    },
    {
      "name": "ConfigProvider",
      "category": "Other",
      "description": "",
      "props": [
        {
          "name": "autoInsertSpaceInButton",
          "type": "boolean",
          "default": "true",
          "description": "Set false to remove space between 2 chinese characters on Button",
          "descriptionZh": "设置为 `false` 时，移除按钮中 2 个汉字之间的空格"
        },
        {
          "name": "componentSize",
          "type": "`small` | `middle` | `large`",
          "default": "-",
          "description": "Config antd component size",
          "since": "`large`",
          "descriptionZh": "设置 antd 组件大小"
        },
        {
          "name": "csp",
          "type": "{ nonce: string }",
          "default": "-",
          "description": "Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config",
          "descriptionZh": "设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置"
        },
        {
          "name": "form",
          "type": "{ validateMessages?: [ValidateMessages](/components/form/#validateMessages) }",
          "default": "-",
          "description": "Set Form common props",
          "descriptionZh": "设置 Form 组件的通用属性"
        },
        {
          "name": "input",
          "type": "{ autoComplete?: string }",
          "default": "-",
          "description": "Set Input common props",
          "since": "4.2.0",
          "descriptionZh": "设置 Input 组件的通用属性"
        },
        {
          "name": "renderEmpty",
          "type": "function(componentName: string): ReactNode",
          "default": "-",
          "description": "Set empty content of components. Ref [Empty](/components/empty/)",
          "descriptionZh": "自定义组件空状态。参考 [空状态](/components/empty/)"
        },
        {
          "name": "getPopupContainer",
          "type": "function(triggerNode)",
          "default": "() => document.body",
          "description": "To set the container of the popup element. The default is to create a `div` element in `body`",
          "descriptionZh": "弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。"
        },
        {
          "name": "getTargetContainer",
          "type": "() => HTMLElement",
          "default": "() => window",
          "description": "Config Affix, Anchor scroll target container",
          "since": "4.2.0",
          "descriptionZh": "配置 Affix、Anchor 滚动监听容器。"
        },
        {
          "name": "locale",
          "type": "object",
          "default": "-",
          "description": "Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/)",
          "descriptionZh": "语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找"
        },
        {
          "name": "prefixCls",
          "type": "string",
          "default": "`ant`",
          "description": "Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7))",
          "descriptionZh": "设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用"
        },
        {
          "name": "pageHeader",
          "type": "{ ghost: boolean }",
          "default": "true",
          "description": "Unify the ghost of PageHeader, ref [PageHeader](/components/page-header)",
          "descriptionZh": "统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header)"
        },
        {
          "name": "direction",
          "type": "`ltr` | `rtl`",
          "default": "`ltr`",
          "description": "Set direction of layout. See [demo](#components-config-provider-demo-direction)",
          "since": "`ltr`",
          "descriptionZh": "设置文本展示方向。 [示例](#components-config-provider-demo-direction)"
        },
        {
          "name": "space",
          "type": "{ size: `small` | `middle` | `large` | `number` }",
          "default": "-",
          "description": "Set Space `size`, ref [Space](/components/space)",
          "since": "4.1.0",
          "descriptionZh": "设置 Space 的 `size`，参考 [Space](/components/space)"
        },
        {
          "name": "virtual",
          "type": "boolean",
          "default": "-",
          "description": "Disable virtual scroll when set to `false`",
          "since": "4.3.0",
          "descriptionZh": "设置 `false` 时关闭虚拟滚动"
        },
        {
          "name": "dropdownMatchSelectWidth",
          "type": "boolean | number",
          "default": "-",
          "description": "Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll",
          "since": "4.3.0",
          "descriptionZh": "下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动"
        }
      ],
      "categoryZh": "其他",
      "nameZh": "全局化配置",
      "since": "4.0.0",
      "doc": "\n`ConfigProvider` provides a uniform configuration support for components.\n\n## Usage\n\nThis component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config.\n\n```jsx\nimport { ConfigProvider } from 'antd';\n\n//...\n\nexport default () => (\n <ConfigProvider direction=\"rtl\">\n <App />\n </ConfigProvider>\n);\n```\n\n### Content Security Policy\n\nSome components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:\n\n```jsx\n<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>\n <Button>My Button</Button>\n</ConfigProvider>\n```\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true | |\n| componentSize | Config antd component size | `small` \\| `middle` \\| `large` | - | |\n| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | |\n| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | |\n| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |\n| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | |\n| getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | |\n| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |\n| locale | Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | - |\n| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` | |\n| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost: boolean } | true | |\n| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \\| `rtl` | `ltr` | |\n| space | Set Space `size`, ref [Space](/components/space) | { size: `small` \\| `middle` \\| `large` \\| `number` } | - | 4.1.0 |\n| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 |\n| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \\| number | - | 4.3.0 |\n\n## FAQ\n\n#### How to contribute a new language?\n\nSee [<Adding new language>](/docs/react/i18n#Adding-newplanguage).\n\n#### Does the locale problem still exist in DatePicker even if ConfigProvider `locale` is used?\n\nPlease make sure you set moment locale or that you don't have two different versions of moment.\n\n```js\nimport 'moment/locale/zh-cn';\nmoment.locale('zh-cn');\n```\n\n#### Modal throw error when setting `getPopupContainer`?\n\nRelated issue: https://github.com/ant-design/ant-design/issues/19974\n\nWhen you config `getPopupContainer` to parentNode globally, Modal will throw error of `triggerNode is undefined` because it did not have a triggerNode. You can try the below.\n\n```diff\n <ConfigProvider\n- getPopupContainer={triggerNode => triggerNode.parentNode}\n+ getPopupContainer={node => {\n+ if (node) {\n+ return node.parentNode;\n+ }\n+ return document.body;\n+ }}\n >\n <App />\n </ConfigProvider>\n```\n",
      "docZh": "\n为组件提供统一的全局化配置。\n\n## 使用\n\nConfigProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。\n\n```jsx\nimport { ConfigProvider } from 'antd';\n\n//...\n\nexport default () => (\n <ConfigProvider direction=\"rtl\">\n <App />\n </ConfigProvider>\n);\n```\n\n### Content Security Policy\n\n部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 `csp` 属性来进行配置：\n\n```jsx\n<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>\n <Button>My Button</Button>\n</ConfigProvider>\n```\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | |\n| componentSize | 设置 antd 组件大小 | `small` \\| `middle` \\| `large` | - | |\n| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |\n| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | |\n| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |\n| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | |\n| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | |\n| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |\n| locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | |\n| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | |\n| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true | |\n| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \\| `rtl` | `ltr` | |\n| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \\| `middle` \\| `large` \\| `number` } | - | 4.1.0 |\n| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |\n| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \\| number | - | 4.3.0 |\n\n## FAQ\n\n#### 如何增加一个新的语言包？\n\n参考[《增加语言包》](/docs/react/i18n#%E5%A2%9E%E5%8A%A0%E8%AF%AD%E8%A8%80%E5%8C%85)。\n\n#### 为什么我使用了 ConfigProvider `locale`，时间类组件的国际化还有问题？\n\n请检查是否正确设置了 moment 语言包，或者是否有两个版本的 moment 共存。\n\n```js\nimport 'moment/locale/zh-cn';\nmoment.locale('zh-cn');\n```\n\n#### 配置 `getPopupContainer` 导致 Modal 报错？\n\n相关 issue：https://github.com/ant-design/ant-design/issues/19974\n\n当如下全局设置 `getPopupContainer` 为触发节点的 parentNode 时，由于 Modal 的用法不存在 `triggerNode`，这样会导致 `triggerNode is undefined` 的报错，需要增加一个[判断条件](https://github.com/afc163/feedback-antd/commit/3e4d1ad1bc1a38460dc3bf3c56517f737fe7d44a)。\n\n```diff\n <ConfigProvider\n- getPopupContainer={triggerNode => triggerNode.parentNode}\n+ getPopupContainer={node => {\n+ if (node) {\n+ return node.parentNode;\n+ }\n+ return document.body;\n+ }}\n >\n <App />\n </ConfigProvider>\n```\n"
    },
    {
      "name": "DatePicker",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "By clicking the input box, you can select a date from a popup calendar.",
      "whenToUseZh": "当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。",
      "props": [
        {
          "name": "allowClear",
          "type": "boolean",
          "default": "true",
          "description": "Whether to show clear button",
          "descriptionZh": "是否显示清除按钮"
        },
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "If get focus when component mounted",
          "descriptionZh": "自动获取焦点"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The picker className",
          "descriptionZh": "选择器 className"
        },
        {
          "name": "dateRender",
          "type": "function(currentDate: moment, today: moment) => React.ReactNode",
          "default": "-",
          "description": "Custom rendering function for date cells",
          "descriptionZh": "自定义日期单元格的内容。`info` 参数自 4.3.0 添加"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Determine whether the DatePicker is disabled",
          "descriptionZh": "禁用起始项"
        },
        {
          "name": "disabledDate",
          "type": "(currentDate: moment) => boolean",
          "default": "-",
          "description": "Specify the date that cannot be selected",
          "descriptionZh": "不可选择的日期"
        },
        {
          "name": "dropdownClassName",
          "type": "string",
          "default": "-",
          "description": "To customize the className of the popup calendar",
          "descriptionZh": "额外的弹出日历 className"
        },
        {
          "name": "getPopupContainer",
          "type": "function(trigger)",
          "default": "-",
          "description": "To set the container of the floating layer, while the default is to create a `div` element in `body`",
          "descriptionZh": "定义浮层的容器，默认为 body 上新建 div"
        },
        {
          "name": "locale",
          "type": "object",
          "default": "",
          "description": "Localization configuration",
          "descriptionZh": "国际化配置"
        },
        {
          "name": "mode",
          "type": "`time` | `date` | `month` | `year` | `decade`",
          "default": "-",
          "description": "The picker panel mode（ [Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) )",
          "since": "`month` \\",
          "descriptionZh": "日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)）"
        },
        {
          "name": "open",
          "type": "boolean",
          "default": "-",
          "description": "The open state of picker",
          "descriptionZh": "控制弹层是否展开"
        },
        {
          "name": "panelRender",
          "type": "(panelNode) => ReactNode",
          "default": "-",
          "description": "Customize panel render",
          "since": "4.5.0",
          "descriptionZh": "自定义渲染面板"
        },
        {
          "name": "picker",
          "type": "`date` | `week` | `month` | `quarter` | `year`",
          "default": "`date`",
          "description": "Set picker type",
          "since": "`quarter`: 4.1.0",
          "descriptionZh": "设置选择器类型"
        },
        {
          "name": "placeholder",
          "type": "string | [string,string]",
          "default": "-",
          "description": "The placeholder of date input",
          "since": "-",
          "descriptionZh": "输入框提示文字"
        },
        {
          "name": "popupStyle",
          "type": "CSSProperties",
          "default": "{}",
          "description": "To customize the style of the popup calendar",
          "descriptionZh": "额外的弹出日历样式"
        },
        {
          "name": "size",
          "type": "`large` | `middle` | `small`",
          "default": "-",
          "description": "The determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px",
          "since": "`small`",
          "descriptionZh": "输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Whether has border style",
          "descriptionZh": "是否有边框"
        },
        {
          "name": "suffixIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom suffix icon",
          "descriptionZh": "自定义的选择框后缀图标"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "{}",
          "description": "To customize the style of the input box",
          "descriptionZh": "自定义输入框样式"
        },
        {
          "name": "onOpenChange",
          "type": "function(open)",
          "default": "-",
          "description": "Callback function, can be executed whether the popup calendar is popped up or closed",
          "descriptionZh": "弹出日历和关闭日历的回调"
        },
        {
          "name": "onPanelChange",
          "type": "function(value, mode)",
          "default": "-",
          "description": "Callback when picker panel mode is changed",
          "descriptionZh": "日期面板变化时的回调"
        },
        {
          "name": "inputReadOnly",
          "type": "boolean",
          "default": "false",
          "description": "Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices)",
          "descriptionZh": "设置输入框为只读（避免在移动设备上打开虚拟键盘）"
        },
        {
          "name": "blur()",
          "type": "",
          "default": "-",
          "description": "Remove focus",
          "descriptionZh": ""
        },
        {
          "name": "focus()",
          "type": "",
          "default": "-",
          "description": "Get focus",
          "descriptionZh": ""
        },
        {
          "name": "defaultValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default date, if start time or end time is null or undefined, the date range will be an open interval",
          "descriptionZh": "默认日期"
        },
        {
          "name": "defaultPickerValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default picker date",
          "descriptionZh": "默认面板日期"
        },
        {
          "name": "disabledTime",
          "type": "function(date)",
          "default": "-",
          "description": "To specify the time that cannot be selected",
          "descriptionZh": "不可选择的时间"
        },
        {
          "name": "format",
          "type": "string | string[]",
          "default": "`YYYY-MM-DD HH:mm:ss`",
          "description": "To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting",
          "since": "`YYYY-MM-DD`",
          "descriptionZh": "展示的日期格式"
        },
        {
          "name": "renderExtraFooter",
          "type": "(mode) => React.ReactNode",
          "default": "-",
          "description": "Render extra footer in panel",
          "descriptionZh": "在面板中添加额外的页脚"
        },
        {
          "name": "showTime",
          "type": "object | boolean",
          "default": "[TimePicker Options](/components/time-picker/#API)",
          "description": "To provide an additional time selection",
          "since": "[TimePicker Options](/components/time-picker/#API)",
          "descriptionZh": "增加时间选择功能"
        },
        {
          "name": "showTime.defaultValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "moment()",
          "description": "To set default time of selected date, [demo](#components-date-picker-demo-disabled-date)",
          "descriptionZh": "设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date)"
        },
        {
          "name": "showToday",
          "type": "boolean",
          "default": "true",
          "description": "Whether to show `Today` button",
          "descriptionZh": "是否展示“今天”按钮"
        },
        {
          "name": "value",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set date",
          "descriptionZh": "日期"
        },
        {
          "name": "onChange",
          "type": "function(date: moment, dateString: string)",
          "default": "-",
          "description": "Callback function, can be executed when the selected time is changing",
          "descriptionZh": "日期范围发生变化的回调"
        },
        {
          "name": "onOk",
          "type": "function()",
          "default": "-",
          "description": "Callback when click ok button",
          "descriptionZh": "点击确定按钮的回调"
        },
        {
          "name": "onPanelChange",
          "type": "function(value, mode)",
          "default": "-",
          "description": "Callback function for panel changing",
          "descriptionZh": "日期面板变化时的回调"
        },
        {
          "name": "showNow",
          "type": "boolean",
          "default": "-",
          "description": "Whether to show 'Now' button on panel when `showTime` is set",
          "since": "4.4.0",
          "descriptionZh": "当设定了 `showTime` 的时候，面板是否显示“此刻”按钮"
        },
        {
          "name": "defaultValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default date",
          "descriptionZh": "默认日期"
        },
        {
          "name": "defaultPickerValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default picker date",
          "descriptionZh": "默认面板日期"
        },
        {
          "name": "format",
          "type": "string",
          "default": "`YYYY`",
          "description": "To set the date format, refer to [moment.js](http://momentjs.com/)",
          "descriptionZh": "展示的日期格式"
        },
        {
          "name": "renderExtraFooter",
          "type": "() => React.ReactNode",
          "default": "-",
          "description": "Render extra footer in panel",
          "descriptionZh": "在面板中添加额外的页脚"
        },
        {
          "name": "value",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set date",
          "descriptionZh": "日期"
        },
        {
          "name": "onChange",
          "type": "function(date: moment, dateString: string)",
          "default": "-",
          "description": "Callback function, can be executed when the selected time is changing",
          "descriptionZh": "日期范围发生变化的回调"
        },
        {
          "name": "defaultValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default date",
          "descriptionZh": "默认日期"
        },
        {
          "name": "defaultPickerValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default picker date",
          "descriptionZh": "默认面板日期"
        },
        {
          "name": "format",
          "type": "string",
          "default": "`YYYY-\\QQ`",
          "description": "To set the date format, refer to [moment.js](http://momentjs.com/)",
          "descriptionZh": "展示的日期格式"
        },
        {
          "name": "renderExtraFooter",
          "type": "() => React.ReactNode",
          "default": "-",
          "description": "Render extra footer in panel",
          "descriptionZh": "在面板中添加额外的页脚"
        },
        {
          "name": "value",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set date",
          "descriptionZh": "日期"
        },
        {
          "name": "onChange",
          "type": "function(date: moment, dateString: string)",
          "default": "-",
          "description": "Callback function, can be executed when the selected time is changing",
          "descriptionZh": "日期范围发生变化的回调"
        },
        {
          "name": "defaultValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default date",
          "descriptionZh": "默认日期"
        },
        {
          "name": "defaultPickerValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default picker date",
          "descriptionZh": "默认面板日期"
        },
        {
          "name": "format",
          "type": "string",
          "default": "`YYYY-MM`",
          "description": "To set the date format, refer to [moment.js](http://momentjs.com/)",
          "descriptionZh": "展示的日期格式"
        },
        {
          "name": "monthCellRender",
          "type": "function(date, locale): ReactNode",
          "default": "-",
          "description": "Custom month cell content render method",
          "descriptionZh": "自定义的月份内容渲染方法"
        },
        {
          "name": "renderExtraFooter",
          "type": "() => React.ReactNode",
          "default": "-",
          "description": "Render extra footer in panel",
          "descriptionZh": "在面板中添加额外的页脚"
        },
        {
          "name": "value",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set date",
          "descriptionZh": "日期"
        },
        {
          "name": "onChange",
          "type": "function(date: moment, dateString: string)",
          "default": "-",
          "description": "Callback function, can be executed when the selected time is changing",
          "descriptionZh": "日期范围发生变化的回调"
        },
        {
          "name": "defaultValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default date",
          "descriptionZh": "默认日期"
        },
        {
          "name": "defaultPickerValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default picker date",
          "descriptionZh": "默认面板日期"
        },
        {
          "name": "format",
          "type": "string",
          "default": "`YYYY-wo`",
          "description": "To set the date format, refer to [moment.js](http://momentjs.com/)",
          "descriptionZh": "展示的日期格式"
        },
        {
          "name": "value",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set date",
          "descriptionZh": "日期"
        },
        {
          "name": "onChange",
          "type": "function(date: moment, dateString: string)",
          "default": "-",
          "description": "Callback function, can be executed when the selected time is changing",
          "descriptionZh": "日期范围发生变化的回调"
        },
        {
          "name": "renderExtraFooter",
          "type": "(mode) => React.ReactNode",
          "default": "-",
          "description": "Render extra footer in panel",
          "descriptionZh": "在面板中添加额外的页脚"
        },
        {
          "name": "allowEmpty",
          "type": "[boolean, boolean]",
          "default": "[false, false]",
          "description": "Allow start or end input leave empty",
          "descriptionZh": "允许起始项部分为空"
        },
        {
          "name": "dateRender",
          "type": "function(currentDate: moment, today: moment, info: { range: `start` | `end` }) => React.ReactNode",
          "default": "-",
          "description": "Customize date cell. `info` argument is added in 4.3.0",
          "since": "-",
          "descriptionZh": "自定义日期单元格的内容。`info` 参数自 4.3.0 添加"
        },
        {
          "name": "defaultValue",
          "type": "[[moment](http://momentjs.com/), [moment](http://momentjs.com/)]",
          "default": "-",
          "description": "To set default date",
          "descriptionZh": "默认日期"
        },
        {
          "name": "defaultPickerValue",
          "type": "[[moment](http://momentjs.com/), [moment](http://momentjs.com/)]",
          "default": "-",
          "description": "To set default picker date",
          "descriptionZh": "默认面板日期"
        },
        {
          "name": "disabled",
          "type": "[boolean, boolean]",
          "default": "-",
          "description": "If disable start or end",
          "descriptionZh": "禁用起始项"
        },
        {
          "name": "disabledTime",
          "type": "function(date: moment, partial: `start` | `end`)",
          "default": "-",
          "description": "To specify the time that cannot be selected",
          "since": "-",
          "descriptionZh": "不可选择的时间"
        },
        {
          "name": "format",
          "type": "string | string[]",
          "default": "`YYYY-MM-DD HH:mm:ss`",
          "description": "To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting",
          "since": "`YYYY-MM-DD HH:mm:ss`",
          "descriptionZh": "展示的日期格式"
        },
        {
          "name": "ranges",
          "type": "{ [range: string]: [moment](http://momentjs.com/)[] } | { [range: string]: () => [moment](http://momentjs.com/)[] }",
          "default": "-",
          "description": "The preseted ranges for quick selection",
          "since": "-",
          "descriptionZh": "预设时间范围快捷选择"
        },
        {
          "name": "renderExtraFooter",
          "type": "() => React.ReactNode",
          "default": "-",
          "description": "Render extra footer in panel",
          "descriptionZh": "在面板中添加额外的页脚"
        },
        {
          "name": "separator",
          "type": "string",
          "default": "`~`",
          "description": "Set separator between inputs",
          "descriptionZh": "设置分隔符"
        },
        {
          "name": "showTime",
          "type": "object | boolean",
          "default": "[TimePicker Options](/components/time-picker/#API)",
          "description": "To provide an additional time selection",
          "since": "[TimePicker Options](/components/time-picker/#API)",
          "descriptionZh": "增加时间选择功能"
        },
        {
          "name": "showTime.defaultValue",
          "type": "[moment](http://momentjs.com/)[]",
          "default": "[moment(), moment()]",
          "description": "To set default time of selected date, [demo](#components-date-picker-demo-disabled-date)",
          "descriptionZh": "设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date)"
        },
        {
          "name": "value",
          "type": "[[moment](http://momentjs.com/), [moment](http://momentjs.com/)]",
          "default": "-",
          "description": "To set date",
          "descriptionZh": "日期"
        },
        {
          "name": "onCalendarChange",
          "type": "function(dates: [moment, moment], dateStrings: [string, string], info: { range:`start`|`end` })",
          "default": "-",
          "description": "Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0",
          "since": "-",
          "descriptionZh": "待选日期发生变化的回调。`info` 参数自 4.4.0 添加"
        },
        {
          "name": "onChange",
          "type": "function(dates: [moment, moment], dateStrings: [string, string])",
          "default": "-",
          "description": "Callback function, can be executed when the selected time is changing",
          "descriptionZh": "日期范围发生变化的回调"
        }
      ],
      "tokens": [
        {
          "name": "activeBg",
          "type": "string",
          "default": "",
          "description": "Background color when the input box is activated",
          "descriptionZh": "输入框激活状态时背景颜色"
        },
        {
          "name": "activeBorderColor",
          "type": "string",
          "default": "",
          "description": "Active border color",
          "descriptionZh": "激活态边框色"
        },
        {
          "name": "activeShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active",
          "descriptionZh": "激活态阴影"
        },
        {
          "name": "addonBg",
          "type": "string",
          "default": "",
          "description": "Background color of addon",
          "descriptionZh": "前/后置标签背景色"
        },
        {
          "name": "cellActiveWithRangeBg",
          "type": "string",
          "default": "",
          "description": "Background color of cell in range",
          "descriptionZh": "选取范围内的单元格背景色"
        },
        {
          "name": "cellBgDisabled",
          "type": "string",
          "default": "",
          "description": "Background color of disabled cell",
          "descriptionZh": "单元格禁用态背景色"
        },
        {
          "name": "cellHeight",
          "type": "number",
          "default": "",
          "description": "Height of cell",
          "descriptionZh": "单元格高度"
        },
        {
          "name": "cellHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of cell hover state",
          "descriptionZh": "单元格悬浮态背景色"
        },
        {
          "name": "cellHoverWithRangeBg",
          "type": "string",
          "default": "",
          "description": "Background color of hovered cell in range",
          "descriptionZh": "选取范围内的单元格悬浮态背景色"
        },
        {
          "name": "cellRangeBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of cell in range when picking",
          "descriptionZh": "选取范围时单元格边框色"
        },
        {
          "name": "cellWidth",
          "type": "number",
          "default": "",
          "description": "Width of cell",
          "descriptionZh": "单元格宽度"
        },
        {
          "name": "errorActiveShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active in error status",
          "descriptionZh": "错误状态时激活态阴影"
        },
        {
          "name": "hoverBg",
          "type": "string",
          "default": "",
          "description": "Background color when the input box hovers",
          "descriptionZh": "输入框hover状态时背景颜色"
        },
        {
          "name": "hoverBorderColor",
          "type": "string",
          "default": "",
          "description": "Hover border color",
          "descriptionZh": "悬浮态边框色"
        },
        {
          "name": "inputFontSize",
          "type": "number",
          "default": "",
          "description": "Font size",
          "descriptionZh": "字体大小"
        },
        {
          "name": "inputFontSizeLG",
          "type": "number",
          "default": "",
          "description": "Font size of large",
          "descriptionZh": "大号字体大小"
        },
        {
          "name": "inputFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small",
          "descriptionZh": "小号字体大小"
        },
        {
          "name": "multipleItemBg",
          "type": "string",
          "default": "",
          "description": "Background color of multiple tag",
          "descriptionZh": "多选标签背景色"
        },
        {
          "name": "multipleItemBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of multiple tag",
          "descriptionZh": "多选标签边框色"
        },
        {
          "name": "multipleItemBorderColorDisabled",
          "type": "string",
          "default": "",
          "description": "Border color of multiple tag when disabled",
          "descriptionZh": "多选标签禁用边框色"
        },
        {
          "name": "multipleItemColorDisabled",
          "type": "string",
          "default": "",
          "description": "Text color of multiple tag when disabled",
          "descriptionZh": "多选标签禁用文本颜色"
        },
        {
          "name": "multipleItemHeight",
          "type": "number",
          "default": "",
          "description": "Height of multiple tag",
          "descriptionZh": "多选标签高度"
        },
        {
          "name": "multipleItemHeightLG",
          "type": "number",
          "default": "",
          "description": "Height of multiple tag with large size",
          "descriptionZh": "大号多选标签高度"
        },
        {
          "name": "multipleItemHeightSM",
          "type": "number",
          "default": "",
          "description": "Height of multiple tag with small size",
          "descriptionZh": "小号多选标签高度"
        },
        {
          "name": "multipleSelectorBgDisabled",
          "type": "string",
          "default": "",
          "description": "Background color of multiple selector when disabled",
          "descriptionZh": "多选框禁用背景"
        },
        {
          "name": "paddingBlock",
          "type": "number",
          "default": "",
          "description": "Vertical padding of input",
          "descriptionZh": "输入框纵向内边距"
        },
        {
          "name": "paddingBlockLG",
          "type": "number",
          "default": "",
          "description": "Vertical padding of large input",
          "descriptionZh": "大号输入框纵向内边距"
        },
        {
          "name": "paddingBlockSM",
          "type": "number",
          "default": "",
          "description": "Vertical padding of small input",
          "descriptionZh": "小号输入框纵向内边距"
        },
        {
          "name": "paddingInline",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of input",
          "descriptionZh": "输入框横向内边距"
        },
        {
          "name": "paddingInlineLG",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of large input",
          "descriptionZh": "大号输入框横向内边距"
        },
        {
          "name": "paddingInlineSM",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of small input",
          "descriptionZh": "小号输入框横向内边距"
        },
        {
          "name": "presetsMaxWidth",
          "type": "number",
          "default": "",
          "description": "Max width of preset area",
          "descriptionZh": "预设区域最大宽度"
        },
        {
          "name": "presetsWidth",
          "type": "number",
          "default": "",
          "description": "Width of preset area",
          "descriptionZh": "预设区域宽度"
        },
        {
          "name": "textHeight",
          "type": "number",
          "default": "",
          "description": "Height of cell text",
          "descriptionZh": "单元格文本高度"
        },
        {
          "name": "timeCellHeight",
          "type": "number",
          "default": "",
          "description": "Height of time cell",
          "descriptionZh": "时间单元格高度"
        },
        {
          "name": "timeColumnHeight",
          "type": "number",
          "default": "",
          "description": "Height of time column",
          "descriptionZh": "时间列高度"
        },
        {
          "name": "timeColumnWidth",
          "type": "number",
          "default": "",
          "description": "Width of time column",
          "descriptionZh": "时间列宽度"
        },
        {
          "name": "warningActiveShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active in warning status",
          "descriptionZh": "警告状态时激活态阴影"
        },
        {
          "name": "withoutTimeCellHeight",
          "type": "number",
          "default": "",
          "description": "Height of decade/year/quarter/month/week cell",
          "descriptionZh": "十年/年/季/月/周单元格高度"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of popup",
          "descriptionZh": "弹窗 z-index"
        }
      ],
      "faq": [
        {
          "question": "When set mode to DatePicker/RangePicker, cannot select year or month anymore?",
          "answer": "Please refer [FAQ](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?)"
        },
        {
          "question": "How to use DatePicker with customize date library like dayjs?",
          "answer": "Please refer [replace moment](/docs/react/replace-moment#DatePicker)"
        },
        {
          "question": "Why config moment.locale globally not work?",
          "answer": "DatePicker default set `locale` as `en` in v4. You can config DatePicker `locale` prop or [ConfigProvider `locale`](/components/config-provider) prop instead."
        },
        {
          "question": "How to modify start day of week?",
          "answer": "Please use correct [language](/docs/react/i18n) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update moment `locale` config: https://codesandbox.io/s/moment-day-of-week-6dby5\n\n```js\nmoment.locale('en', {\n week: {\n dow: 1,\n },\n});\n```"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "日期选择框",
      "since": "4.0.0",
      "doc": "\nTo select or input a date.\n\n## When To Use\n\nBy clicking the input box, you can select a date from a popup calendar.\n\n## API\n\nThere are five kinds of picker:\n\n- DatePicker\n- DatePicker\\[picker=\"month\"]\n- DatePicker\\[picker=\"week\"]\n- DatePicker\\[picker=\"year\"]\n- DatePicker\\[picker=\"quarter\"] (Added in 4.1.0)\n- RangePicker\n\n### Localization\n\nThe default locale is en-US, if you need to use other languages, recommend to use internationalized components provided by us at the entrance. Look at: [ConfigProvider](https://ant.design/components/config-provider/).\n\nIf there are special needs (only modifying single component language), Please use the property: local. Example:.\n\n```jsx\nimport 'moment/locale/zh-cn';\nimport locale from 'antd/es/date-picker/locale/zh_CN';\n\n<DatePicker locale={locale} />;\n```\n\n```jsx\n// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.\nimport moment from 'moment';\nimport 'moment/locale/zh-cn';\nimport locale from 'antd/es/locale/zh_CN';\n\n<ConfigProvider locale={locale}>\n <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />\n</ConfigProvider>;\n```\n\n### Common API\n\nThe following APIs are shared by DatePicker, RangePicker.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| allowClear | Whether to show clear button | boolean | true | |\n| autoFocus | If get focus when component mounted | boolean | false | |\n| className | The picker className | string | - | |\n| dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | |\n| disabled | Determine whether the DatePicker is disabled | boolean | false | |\n| disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - | |\n| dropdownClassName | To customize the className of the popup calendar | string | - | |\n| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |\n| locale | Localization configuration | object | | |\n| mode | The picker panel mode（ [Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) ) | `time` \\| `date` \\| `month` \\| `year` \\| `decade` | - | |\n| open | The open state of picker | boolean | - | |\n| panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 |\n| picker | Set picker type | `date` \\| `week` \\| `month` \\| `quarter` \\| `year` | `date` | `quarter`: 4.1.0 |\n| placeholder | The placeholder of date input | string \\| \\[string,string] | - | |\n| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |\n| size | The determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \\| `middle` \\| `small` | - | |\n| bordered | Whether has border style | boolean | true | |\n| suffixIcon | The custom suffix icon | ReactNode | - | |\n| style | To customize the style of the input box | CSSProperties | {} | |\n| onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |\n| onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | |\n| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |\n\n### Common Methods\n\n| Name | Description | Version |\n| ------- | ------------ | ------- |\n| blur() | Remove focus | |\n| focus() | Get focus | |\n\n### DatePicker\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |\n| disabledTime | To specify the time that cannot be selected | function(date) | - | |\n| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \\| string[] | `YYYY-MM-DD` | |\n| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |\n| showTime | To provide an additional time selection | object \\| boolean | [TimePicker Options](/components/time-picker/#API) | |\n| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |\n| showToday | Whether to show `Today` button | boolean | true | |\n| value | To set date | [moment](http://momentjs.com/) | - | |\n| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |\n| onOk | Callback when click ok button | function() | - | |\n| onPanelChange | Callback function for panel changing | function(value, mode) | - | |\n| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |\n\n### DatePicker\\[picker=year]\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |\n| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY` | |\n| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |\n| value | To set date | [moment](http://momentjs.com/) | - | |\n| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |\n\n### DatePicker\\[picker=quarter]\n\nAdded in `4.1.0`.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |\n| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-\\QQ` | |\n| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |\n| value | To set date | [moment](http://momentjs.com/) | - | |\n| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |\n\n### DatePicker\\[picker=month]\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |\n| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-MM` | |\n| monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | |\n| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |\n| value | To set date | [moment](http://momentjs.com/) | - | |\n| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |\n\n### DatePicker\\[picker=week]\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |\n| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-wo` | |\n| value | To set date | [moment](http://momentjs.com/) | - | |\n| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |\n| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |\n\n### RangePicker\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| allowEmpty | Allow start or end input leave empty | \\[boolean, boolean] | \\[false, false] | |\n| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: `start` \\| `end` }) => React.ReactNode | - | |\n| defaultValue | To set default date | \\[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |\n| defaultPickerValue | To set default picker date | \\[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\\] | - | |\n| disabled | If disable start or end | \\[boolean, boolean] | - | |\n| disabledTime | To specify the time that cannot be selected | function(date: moment, partial: `start` \\| `end`) | - | |\n| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \\| string[] | `YYYY-MM-DD HH:mm:ss` | |\n| ranges | The preseted ranges for quick selection | { \\[range: string]: [moment](http://momentjs.com/)\\[] } \\| { \\[range: string]: () => [moment](http://momentjs.com/)\\[] } | - | |\n| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |\n| separator | Set separator between inputs | string | `~` | |\n| showTime | To provide an additional time selection | object \\| boolean | [TimePicker Options](/components/time-picker/#API) | |\n| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\\[] | \\[moment(), moment()] | |\n| value | To set date | \\[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |\n| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \\[moment, moment], dateStrings: \\[string, string], info: { range:`start`\\|`end` }) | - | |\n| onChange | Callback function, can be executed when the selected time is changing | function(dates: \\[moment, moment], dateStrings: \\[string, string]) | - | |\n\n## FAQ\n\n### When set mode to DatePicker/RangePicker, cannot select year or month anymore?\n\nPlease refer [FAQ](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?)\n\n### How to use DatePicker with customize date library like dayjs?\n\nPlease refer [replace moment](/docs/react/replace-moment#DatePicker)\n\n### Why config moment.locale globally not work?\n\nDatePicker default set `locale` as `en` in v4. You can config DatePicker `locale` prop or [ConfigProvider `locale`](/components/config-provider) prop instead.\n\n### How to modify start day of week?\n\nPlease use correct [language](/docs/react/i18n) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update moment `locale` config: https://codesandbox.io/s/moment-day-of-week-6dby5\n\n```js\nmoment.locale('en', {\n week: {\n dow: 1,\n },\n});\n```\n",
      "docZh": "\n输入或选择日期的控件。\n\n## 何时使用\n\n当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。\n\n## API\n\n日期类组件包括以下五种形式。\n\n- DatePicker\n- DatePicker\\[picker=\"month\"]\n- DatePicker\\[picker=\"week\"]\n- DatePicker\\[picker=\"year\"]\n- DatePicker\\[picker=\"quarter\"] (4.1.0 新增)\n- RangePicker\n\n### 国际化配置\n\n默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。\n\n如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。\n\n```jsx\nimport 'moment/locale/zh-cn';\nimport locale from 'antd/es/date-picker/locale/zh_CN';\n\n<DatePicker locale={locale} />;\n```\n\n```jsx\n// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale\nimport moment from 'moment';\nimport 'moment/locale/zh-cn';\nimport locale from 'antd/es/locale/zh_CN';\n\n<ConfigProvider locale={locale}>\n <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />\n</ConfigProvider>;\n```\n\n### 共同的 API\n\n以下 API 为 DatePicker、 RangePicker 共享的 API。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowClear | 是否显示清除按钮 | boolean | true | |\n| autoFocus | 自动获取焦点 | boolean | false | |\n| className | 选择器 className | string | - | |\n| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | |\n| disabled | 禁用 | boolean | false | |\n| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | |\n| dropdownClassName | 额外的弹出日历 className | string | - | |\n| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |\n| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |\n| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \\| `date` \\| `month` \\| `year` \\| `decade` | - | |\n| open | 控制弹层是否展开 | boolean | - | |\n| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |\n| picker | 设置选择器类型 | `date` \\| `week` \\| `month` \\| `quarter` \\| `year` | `date` | `quarter`: 4.1.0 |\n| placeholder | 输入框提示文字 | string \\| \\[string, string] | - | |\n| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |\n| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \\| `middle` \\| `small` | - | |\n| bordered | 是否有边框 | boolean | true | |\n| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |\n| style | 自定义输入框样式 | CSSProperties | {} | |\n| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |\n| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |\n| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |\n\n### 共同的方法\n\n| 名称 | 描述 | 版本 |\n| ------- | -------- | ---- |\n| blur() | 移除焦点 | |\n| focus() | 获取焦点 | |\n\n### DatePicker\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |\n| disabledTime | 不可选择的时间 | function(date) | - | |\n| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \\| string[] | `YYYY-MM-DD` | |\n| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |\n| showTime | 增加时间选择功能 | Object \\| boolean | [TimePicker Options](/components/time-picker/#API) | |\n| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |\n| showToday | 是否展示“今天”按钮 | boolean | true | |\n| value | 日期 | [moment](http://momentjs.com/) | - | |\n| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - | |\n| onOk | 点击确定按钮的回调 | function() | - | |\n| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |\n| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |\n\n### DatePicker\\[picker=year]\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |\n| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY` | |\n| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |\n| value | 日期 | [moment](http://momentjs.com/) | - | |\n| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |\n\n### DatePicker\\[picker=quarter]\n\n`4.1.0` 新增。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |\n| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-\\QQ` | |\n| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |\n| value | 日期 | [moment](http://momentjs.com/) | - | |\n| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |\n\n### DatePicker\\[picker=month]\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |\n| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-MM` | |\n| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | |\n| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |\n| value | 日期 | [moment](http://momentjs.com/) | - | |\n| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |\n\n### DatePicker\\[picker=week]\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |\n| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |\n| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-wo` | |\n| value | 日期 | [moment](http://momentjs.com/) | - | |\n| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |\n| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |\n\n### RangePicker\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowEmpty | 允许起始项部分为空 | \\[boolean, boolean] | \\[false, false] | |\n| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: `start` \\| `end` }) => React.ReactNode | - | |\n| defaultValue | 默认日期 | [moment](http://momentjs.com/)\\[] | - | |\n| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\\[] | - | |\n| disabled | 禁用起始项 | \\[boolean, boolean] | - | |\n| disabledTime | 不可选择的时间 | function(date: moment, partial: `start` \\| `end`) | - | |\n| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` | |\n| ranges | 预设时间范围快捷选择 | { \\[range: string]: [moment](http://momentjs.com/)\\[] } \\| { \\[range: string]: () => [moment](http://momentjs.com/)\\[] } | - | |\n| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |\n| separator | 设置分隔符 | string | `~` | |\n| showTime | 增加时间选择功能 | Object\\|boolean | [TimePicker Options](/components/time-picker/#API) | |\n| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\\[] | \\[moment(), moment()] | |\n| value | 日期 | [moment](http://momentjs.com/)\\[] | - | |\n| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \\[moment, moment\\], dateStrings: \\[string, string\\], info: { range:`start`\\|`end` }) | - | |\n| onChange | 日期范围发生变化的回调 | function(dates: \\[moment, moment\\], dateStrings: \\[string, string\\]) | - | |\n\n## FAQ\n\n### 当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？\n\n请参考[常见问答](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)\n\n### 如何在 DatePicker 中使用自定义日期库（如 dayjs ）？\n\n请参考[《替换 Moment.js》](/docs/react/replace-moment#DatePicker)\n\n### 为何全局修改 moment.locale 不生效？\n\nv4 中，DatePicker 默认 `locale` 为 `en`。你可以通过 DatePicker 的 `locale` 属性来单独设置，也可以通过 [ConfigProvider `locale`](/components/config-provider) 属性来配置。\n\n### 如何修改周的起始日？\n\n请使用正确的[语言包](/docs/react/i18n)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 moment 的 `locale` 配置：https://codesandbox.io/s/moment-day-of-week-6dby5\n\n```js\nmoment.locale('en', {\n // 注意请修改你正在使用的 locale 语言，比如 zh-cn\n week: {\n dow: 1,\n },\n});\n```\n"
    },
    {
      "name": "Descriptions",
      "category": "Data Display",
      "description": "",
      "whenToUse": "Commonly displayed on the details page.",
      "whenToUseZh": "常见于详情页的信息展示。",
      "props": [
        {
          "name": "title",
          "type": "ReactNode",
          "default": "-",
          "description": "The title of the description list, placed at the top",
          "descriptionZh": "描述列表的标题，显示在最顶部"
        },
        {
          "name": "extra",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The action area of the description list, placed at the top-right",
          "since": "4.5.0",
          "descriptionZh": "描述列表的操作区域，显示在右上方"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "false",
          "description": "Whether to display the border",
          "descriptionZh": "是否展示边框"
        },
        {
          "name": "column",
          "type": "number",
          "default": "3",
          "description": "The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect)",
          "descriptionZh": "一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}`"
        },
        {
          "name": "size",
          "type": "`default` | `middle` | `small`",
          "default": "-",
          "description": "Set the size of the list. Can be set to `middle`,`small`, or not filled",
          "since": "`small`",
          "descriptionZh": "设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效）"
        },
        {
          "name": "layout",
          "type": "`horizontal` | `vertical`",
          "default": "`horizontal`",
          "description": "Define description layout",
          "since": "`horizontal`",
          "descriptionZh": "描述布局"
        },
        {
          "name": "colon",
          "type": "boolean",
          "default": "true",
          "description": "Change default props `colon` value of Descriptions.Item",
          "descriptionZh": "配置 `Descriptions.Item` 的 `colon` 的默认值"
        },
        {
          "name": "label",
          "type": "ReactNode",
          "default": "-",
          "description": "The description of the content",
          "descriptionZh": "内容的描述"
        },
        {
          "name": "span",
          "type": "number",
          "default": "1",
          "description": "The number of columns included",
          "descriptionZh": "包含列的数量"
        }
      ],
      "tokens": [
        {
          "name": "colonMarginLeft",
          "type": "number",
          "default": "",
          "description": "Left margin of colon",
          "descriptionZh": "冒号左间距"
        },
        {
          "name": "colonMarginRight",
          "type": "number",
          "default": "",
          "description": "Right margin of colon",
          "descriptionZh": "冒号右间距"
        },
        {
          "name": "contentColor",
          "type": "string",
          "default": "",
          "description": "Text color of content",
          "descriptionZh": "内容区域文字颜色"
        },
        {
          "name": "extraColor",
          "type": "string",
          "default": "",
          "description": "Text color of extra area",
          "descriptionZh": "额外区域文字颜色"
        },
        {
          "name": "itemPaddingBottom",
          "type": "number",
          "default": "",
          "description": "Bottom padding of item",
          "descriptionZh": "子项下间距"
        },
        {
          "name": "itemPaddingEnd",
          "type": "number",
          "default": "",
          "description": "End padding of item",
          "descriptionZh": "子项结束间距"
        },
        {
          "name": "labelBg",
          "type": "string",
          "default": "",
          "description": "Background color of label",
          "descriptionZh": "标签背景色"
        },
        {
          "name": "labelColor",
          "type": "string",
          "default": "",
          "description": "Text color of label",
          "descriptionZh": "标签文字颜色"
        },
        {
          "name": "titleColor",
          "type": "string",
          "default": "",
          "description": "Text color of title",
          "descriptionZh": "标题文字颜色"
        },
        {
          "name": "titleMarginBottom",
          "type": "number",
          "default": "",
          "description": "Bottom margin of title",
          "descriptionZh": "标题下间距"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "描述列表",
      "since": "4.0.0",
      "doc": "\nDisplay multiple read-only fields in groups.\n\n## When To Use\n\nCommonly displayed on the details page.\n\n## API\n\n### Descriptions\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| title | The title of the description list, placed at the top | ReactNode | - | |\n| extra | The action area of the description list, placed at the top-right | string \\| ReactNode | - | 4.5.0 |\n| bordered | Whether to display the border | boolean | false | |\n| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | |\n| size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \\| `middle` \\| `small` | - | |\n| layout | Define description layout | `horizontal` \\| `vertical` | `horizontal` | |\n| colon | Change default props `colon` value of Descriptions.Item | boolean | true | |\n\n### DescriptionItem\n\n| Property | Description | Type | Default | Version |\n| -------- | ------------------------------ | --------- | ------- | ------- |\n| label | The description of the content | ReactNode | - | |\n| span | The number of columns included | number | 1 | |\n\n> The number of span Description.Item. Span={2} takes up the width of two DescriptionItems.\n",
      "docZh": "\n成组展示多个只读字段。\n\n## 何时使用\n\n常见于详情页的信息展示。\n\n## API\n\n### Descriptions\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |\n| extra | 描述列表的操作区域，显示在右上方 | string \\| ReactNode | - | 4.5.0 |\n| bordered | 是否展示边框 | boolean | false | |\n| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | |\n| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \\| `middle` \\| `small` | - | |\n| layout | 描述布局 | `horizontal` \\| `vertical` | `horizontal` | |\n| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | |\n\n### DescriptionItem\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ----- | ------------ | --------- | ------ | ---- |\n| label | 内容的描述 | ReactNode | - | |\n| span | 包含列的数量 | number | 1 | |\n\n> span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。\n"
    },
    {
      "name": "Divider",
      "category": "Layout",
      "description": "",
      "whenToUse": "- Divide sections of article.\n- Divide inline text and links such as the operation column of table.",
      "whenToUseZh": "- 对不同章节的文本段落进行分割。\n- 对行内文字/链接进行分割，例如表格的操作列。",
      "props": [
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The className of container",
          "descriptionZh": "分割线样式类"
        },
        {
          "name": "dashed",
          "type": "boolean",
          "default": "false",
          "description": "Whether line is dashed",
          "descriptionZh": "是否虚线"
        },
        {
          "name": "orientation",
          "type": "`left` | `right` | `center`",
          "default": "`center`",
          "description": "The position of title inside divider",
          "since": "`center`",
          "descriptionZh": "分割线标题的位置"
        },
        {
          "name": "plain",
          "type": "boolean",
          "default": "true",
          "description": "Divider text show as plain style",
          "since": "4.2.0",
          "descriptionZh": "文字是否显示为普通正文样式"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "The style object of container",
          "descriptionZh": "分割线样式对象"
        },
        {
          "name": "type",
          "type": "`horizontal` | `vertical`",
          "default": "`horizontal`",
          "description": "The direction type of divider",
          "since": "`horizontal`",
          "descriptionZh": "水平还是垂直类型"
        }
      ],
      "tokens": [
        {
          "name": "orientationMargin",
          "type": "number",
          "default": "",
          "description": "Distance between text and edge, which should be a number between 0 and 1.",
          "descriptionZh": "文本与边缘距离，取值 0 ～ 1"
        },
        {
          "name": "textPaddingInline",
          "type": "PaddingInline<string | number> | undefined",
          "default": "",
          "description": "Horizontal padding of text",
          "descriptionZh": "文本横向内间距"
        },
        {
          "name": "verticalMarginInline",
          "type": "MarginInline<string | number> | undefined",
          "default": "",
          "description": "Horizontal margin of vertical Divider",
          "descriptionZh": "纵向分割线的横向外间距"
        }
      ],
      "categoryZh": "布局",
      "nameZh": "分割线",
      "since": "4.0.0",
      "doc": "\nA divider line separates different content.\n\n## When To Use\n\n- Divide sections of article.\n- Divide inline text and links such as the operation column of table.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| className | The className of container | string | - | |\n| dashed | Whether line is dashed | boolean | false | |\n| orientation | The position of title inside divider | `left` \\| `right` \\| `center` | `center` | |\n| plain | Divider text show as plain style | boolean | true | 4.2.0 |\n| style | The style object of container | CSSProperties | - | |\n| type | The direction type of divider | `horizontal` \\| `vertical` | `horizontal` | |\n",
      "docZh": "\n区隔内容的分割线。\n\n## 何时使用\n\n- 对不同章节的文本段落进行分割。\n- 对行内文字/链接进行分割，例如表格的操作列。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ----------- | -------------------------- | ----------------------------- | ------------ | ----- |\n| className | 分割线样式类 | string | - | |\n| dashed | 是否虚线 | boolean | false | |\n| orientation | 分割线标题的位置 | `left` \\| `right` \\| `center` | `center` | |\n| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |\n| style | 分割线样式对象 | CSSProperties | - | |\n| type | 水平还是垂直类型 | `horizontal` \\| `vertical` | `horizontal` | |\n"
    },
    {
      "name": "Drawer",
      "category": "Feedback",
      "description": "",
      "whenToUse": "A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.\n\n- Use a Form to create or edit a set of information.\n- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.\n- When the same Form is needed in multiple places.",
      "whenToUseZh": "抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。\n\n- 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。\n- 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。",
      "props": [],
      "tokens": [
        {
          "name": "draggerSize",
          "type": "number",
          "default": "",
          "description": "Size of resize handle",
          "descriptionZh": "拖拽手柄大小"
        },
        {
          "name": "footerPaddingBlock",
          "type": "number",
          "default": "",
          "description": "Vertical padding of footer",
          "descriptionZh": "底部区域纵向内间距"
        },
        {
          "name": "footerPaddingInline",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of footer",
          "descriptionZh": "底部区域横向内间距"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of drawer",
          "descriptionZh": "弹窗 z-index"
        }
      ],
      "categoryZh": "反馈",
      "nameZh": "抽屉",
      "since": "4.0.0",
      "doc": "\nA panel which slides in from the edge of the screen.\n\n## When To Use\n\nA Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.\n\n- Use a Form to create or edit a set of information.\n- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.\n- When the same Form is needed in multiple places.\n\n## API\n\n| Props | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true |\n| closeIcon | Custom close icon | ReactNode | &lt;CloseOutlined /> |\n| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |\n| forceRender | Prerender Drawer component forcely | boolean | false |\n| getContainer | Return the mounted node for Drawer | HTMLElement \\| () => HTMLElement \\| Selectors \\| false | body |\n| mask | Whether to show mask or not | boolean | true |\n| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |\n| maskStyle | Style for Drawer's mask element | CSSProperties | {} |\n| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |\n| drawerStyle | Style of the popup layer element | object | - |\n| headerStyle | Style of the drawer header part | object | - |\n| bodyStyle | Style of the drawer content part | object | - |\n| title | The title for Drawer | string \\| ReactNode | - |\n| visible | Whether the Drawer dialog is visible or not | boolean | false |\n| width | Width of the Drawer dialog | string \\| number | 256 |\n| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \\| number | 256 |\n| className | The class name of the container of the Drawer dialog | string | - |\n| zIndex | The `z-index` of the Drawer | number | 1000 |\n| placement | The placement of the Drawer | `top` \\| `right` \\| `bottom` \\| `left` | `right` |\n| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |\n| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - |\n| keyboard | Whether support press esc to close | boolean | true |\n| footer | The footer for Drawer | ReactNode | - |\n| footerStyle | Style of the drawer footer part | CSSProperties | - |\n| push | Nested drawers push behavior | boolean \\| { distance: string \\| number } | { distance: 180 } | 4.5.0+ |\n",
      "docZh": "\n屏幕边缘滑出的浮层面板。\n\n## 何时使用\n\n抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。\n\n- 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。\n- 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| closable | 是否显示右上角的关闭按钮 | boolean | true |\n| closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> |\n| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |\n| forceRender | 预渲染 Drawer 内元素 | boolean | false |\n| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \\| () => HTMLElement \\| Selectors \\| false | body |\n| maskClosable | 点击蒙层是否允许关闭 | boolean | true |\n| mask | 是否展示遮罩 | boolean | true |\n| maskStyle | 遮罩样式 | CSSProperties | {} |\n| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |\n| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |\n| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |\n| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |\n| title | 标题 | string \\| ReactNode | - |\n| visible | Drawer 是否可见 | boolean | - |\n| width | 宽度 | string \\| number | 256 |\n| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \\| number | 256 |\n| className | 对话框外层容器的类名 | string | - |\n| zIndex | 设置 Drawer 的 `z-index` | number | 1000 |\n| placement | 抽屉的方向 | `top` \\| `right` \\| `bottom` \\| `left` | `right` |\n| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |\n| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - |\n| keyboard | 是否支持键盘 esc 关闭 | boolean | true |\n| footer | 抽屉的页脚 | ReactNode | - |\n| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |\n| push | 用于设置多层 Drawer 的推动行为 | boolean \\| { distance: string \\| number } | { distance: 180 } | 4.5.0+ |\n"
    },
    {
      "name": "Dropdown",
      "category": "Navigation",
      "description": "",
      "whenToUse": "When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.",
      "whenToUseZh": "当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。\n\n- 用于收罗一组命令操作。\n- Select 用于选择，而 Dropdown 是命令集合。",
      "props": [
        {
          "name": "arrow",
          "type": "boolean",
          "default": "false",
          "description": "Whether the dropdown arrow should be visible",
          "descriptionZh": "下拉框箭头是否显示"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "-",
          "description": "Whether the dropdown menu is disabled",
          "descriptionZh": "菜单是否禁用"
        },
        {
          "name": "getPopupContainer",
          "type": "function(triggerNode)",
          "default": "() => document.body",
          "description": "To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010)",
          "descriptionZh": "菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010)"
        },
        {
          "name": "overlay",
          "type": "[Menu](/components/menu)",
          "default": "-",
          "description": "The dropdown menu",
          "since": "-",
          "descriptionZh": "菜单"
        },
        {
          "name": "overlayClassName",
          "type": "string",
          "default": "-",
          "description": "The class name of the dropdown root element",
          "descriptionZh": "下拉根元素的类名称"
        },
        {
          "name": "overlayStyle",
          "type": "object",
          "default": "-",
          "description": "The style of the dropdown root element",
          "descriptionZh": "下拉根元素的样式"
        },
        {
          "name": "onVisibleChange",
          "type": "function(visible)",
          "default": "-",
          "description": "Called when the visible state is changed",
          "descriptionZh": "菜单显示状态改变时调用，参数为 `visible`"
        },
        {
          "name": "placement",
          "type": "string",
          "default": "`bottomLeft`",
          "description": "Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight`",
          "descriptionZh": "菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight`"
        },
        {
          "name": "trigger",
          "type": "Array<`click`|`hover`|`contextMenu`>",
          "default": "[`hover`]",
          "description": "The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens",
          "since": "`contextMenu`>",
          "descriptionZh": "触发下拉的行为"
        },
        {
          "name": "visible",
          "type": "boolean",
          "default": "-",
          "description": "Whether the dropdown menu is currently visible",
          "descriptionZh": "菜单是否显示"
        },
        {
          "name": "buttonsRender",
          "type": "([buttons: ReactNode[]]) => ReactNode",
          "default": "-",
          "description": "Custom buttons inside Dropdown.Button",
          "descriptionZh": "自定义左右两个按钮"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "-",
          "description": "Whether the dropdown menu is disabled",
          "descriptionZh": "菜单是否禁用"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "-",
          "description": "Icon (appears on the right)",
          "descriptionZh": "右侧的 icon"
        },
        {
          "name": "onClick",
          "type": "function",
          "default": "-",
          "description": "The same as [Button](/components/button): called when you click the button on the left",
          "descriptionZh": "点击左侧按钮的回调，和 [Button](/components/button/) 一致"
        },
        {
          "name": "onVisibleChange",
          "type": "function",
          "default": "-",
          "description": "Called when the visible state is changed",
          "descriptionZh": "菜单显示状态改变时调用，参数为 `visible`"
        },
        {
          "name": "overlay",
          "type": "[Menu](/components/menu)",
          "default": "-",
          "description": "The dropdown menu",
          "descriptionZh": "菜单"
        },
        {
          "name": "placement",
          "type": "string",
          "default": "`bottomLeft`",
          "description": "Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight`",
          "descriptionZh": "菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight`"
        },
        {
          "name": "size",
          "type": "string",
          "default": "`default`",
          "description": "Size of the button, the same as [Button](/components/button)",
          "descriptionZh": "按钮大小，和 [Button](/components/button/) 一致"
        },
        {
          "name": "trigger",
          "type": "Array<`click`|`hover`|`contextMenu`>",
          "default": "[`hover`]",
          "description": "The trigger mode which executes the dropdown action",
          "since": "`contextMenu`>",
          "descriptionZh": "触发下拉的行为"
        },
        {
          "name": "type",
          "type": "string",
          "default": "`default`",
          "description": "Type of the button, the same as [Button](/components/button)",
          "descriptionZh": "按钮类型，和 [Button](/components/button/) 一致"
        },
        {
          "name": "visible",
          "type": "boolean",
          "default": "-",
          "description": "Whether the dropdown menu is currently visible",
          "descriptionZh": "菜单是否显示"
        }
      ],
      "tokens": [
        {
          "name": "paddingBlock",
          "type": "PaddingBlock<string | number> | undefined",
          "default": "",
          "description": "Vertical padding of dropdown",
          "descriptionZh": "下拉菜单纵向内边距"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of dropdown",
          "descriptionZh": "下拉菜单 z-index"
        }
      ],
      "subComponents": [
        "Dropdown.Button"
      ],
      "categoryZh": "导航",
      "nameZh": "下拉菜单",
      "since": "4.0.0",
      "doc": "\nA dropdown list.\n\n## When To Use\n\nWhen there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.\n\n## API\n\n### Dropdown\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| arrow | Whether the dropdown arrow should be visible | boolean | false | |\n| disabled | Whether the dropdown menu is disabled | boolean | - | |\n| getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |\n| overlay | The dropdown menu | [Menu](/components/menu) \\| () => Menu | - | |\n| overlayClassName | The class name of the dropdown root element | string | - | |\n| overlayStyle | The style of the dropdown root element | object | - | |\n| onVisibleChange | Called when the visible state is changed | function(visible) | - | |\n| placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | string | `bottomLeft` | |\n| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\\|`hover`\\|`contextMenu`> | \\[`hover`] | |\n| visible | Whether the dropdown menu is currently visible | boolean | - | |\n\nYou should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.\n\n> Warning: You must set a unique `key` for `Menu.Item`.\n>\n> Menu of Dropdown is unselectable by default, you can make it selectable via `<Menu selectable>`.\n\n### Dropdown.Button\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| buttonsRender | Custom buttons inside Dropdown.Button | ([buttons: ReactNode[]]) => ReactNode | - | |\n| disabled | Whether the dropdown menu is disabled | boolean | - | |\n| icon | Icon (appears on the right) | ReactNode | - | |\n| onClick | The same as [Button](/components/button): called when you click the button on the left | function | - | |\n| onVisibleChange | Called when the visible state is changed | function | - | |\n| overlay | The dropdown menu | [Menu](/components/menu) | - | |\n| placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | |\n| size | Size of the button, the same as [Button](/components/button) | string | `default` | |\n| trigger | The trigger mode which executes the dropdown action | Array&lt;`click`\\|`hover`\\|`contextMenu`> | \\[`hover`] | |\n| type | Type of the button, the same as [Button](/components/button) | string | `default` | |\n| visible | Whether the dropdown menu is currently visible | boolean | - | |\n",
      "docZh": "\n向下弹出的列表。\n\n## 何时使用\n\n当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。\n\n- 用于收罗一组命令操作。\n- Select 用于选择，而 Dropdown 是命令集合。\n\n## API\n\n属性如下\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| arrow | 下拉框箭头是否显示 | boolean | false | |\n| disabled | 菜单是否禁用 | boolean | - | |\n| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |\n| overlay | 菜单 | [Menu](/components/menu) \\| () => Menu | - | |\n| overlayClassName | 下拉根元素的类名称 | string | - | |\n| overlayStyle | 下拉根元素的样式 | object | - | |\n| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function(visible) | - | |\n| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | |\n| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\\|`hover`\\|`contextMenu`> | \\[`hover`] | |\n| visible | 菜单是否显示 | boolean | - | |\n\n`overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。\n\n> 注意： Menu.Item 必须设置唯一的 key 属性。\n>\n> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`。\n\n### Dropdown.Button\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| buttonsRender | 自定义左右两个按钮 | ([buttons: ReactNode[]]) => ReactNode | - | |\n| disabled | 菜单是否禁用 | boolean | - | |\n| icon | 右侧的 icon | ReactNode | - | |\n| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | function | - | |\n| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function | - | |\n| overlay | 菜单 | [Menu](/components/menu/) | - | |\n| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | |\n| size | 按钮大小，和 [Button](/components/button/) 一致 | string | `default` | |\n| trigger | 触发下拉的行为 | Array&lt;`click`\\|`hover`\\|`contextMenu`> | \\[`hover`] | |\n| type | 按钮类型，和 [Button](/components/button/) 一致 | string | `default` | |\n| visible | 菜单是否显示 | boolean | - | |\n"
    },
    {
      "name": "Empty",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- When there is no data provided, display for friendly tips.\n- User tutorial to create something in fresh new situation.",
      "whenToUseZh": "- 当目前没有数据时，用于显式的用户提示。\n- 初始化场景时的引导创建流程。",
      "props": [
        {
          "name": "description",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Customize description",
          "since": "-",
          "descriptionZh": "自定义描述内容"
        },
        {
          "name": "imageStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "The style of image",
          "descriptionZh": "图片样式"
        },
        {
          "name": "image",
          "type": "string | ReactNode",
          "default": "`Empty.PRESENTED_IMAGE_DEFAULT`",
          "description": "Customize image. Will treat as image url when string provided",
          "since": "`Empty.PRESENTED_IMAGE_DEFAULT`",
          "descriptionZh": "设置显示图片，为 string 时表示自定义图片地址。"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "空状态",
      "since": "4.0.0",
      "doc": "\nEmpty state placeholder.\n\n## When To Use\n\n- When there is no data provided, display for friendly tips.\n- User tutorial to create something in fresh new situation.\n\n## API\n\n```jsx\n<Empty>\n <Button>Create</Button>\n</Empty>\n```\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| description | Customize description | string \\| ReactNode | - | |\n| imageStyle | The style of image | CSSProperties | - | |\n| image | Customize image. Will treat as image url when string provided | string \\| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | |\n\n## Built-in images\n\n- Empty.PRESENTED_IMAGE_SIMPLE\n\n <div class=\"site-empty-buildIn-img site-empty-buildIn-simple\"><div>\n\n- Empty.PRESENTED_IMAGE_DEFAULT\n\n <div class=\"site-empty-buildIn-img site-empty-buildIn-default\"></div>\n\n<style>\n.site-empty-buildIn-img {\n background-repeat: no-repeat;\n background-size: cover;\n }\n.site-empty-buildIn-simple {\n width: 55px;\n height: 35px;\n background-image: url(\"https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png\");\n }\n.site-empty-buildIn-default {\n width: 121px;\n height: 116px;\n background-image: url(\"https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png\");\n }\n [data-theme=\"dark\"].site-empty-buildIn-simple {\n background-image: url(\"https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png\");\n }\n [data-theme=\"dark\"].site-empty-buildIn-default {\n background-image: url(\"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ\");\n }\n</style>\n",
      "docZh": "\n空状态时的展示占位图。\n\n## 何时使用\n\n- 当目前没有数据时，用于显式的用户提示。\n- 初始化场景时的引导创建流程。\n\n## API\n\n```jsx\n<Empty>\n <Button>创建</Button>\n</Empty>\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| description | 自定义描述内容 | string \\| ReactNode | - | |\n| imageStyle | 图片样式 | CSSProperties | - | |\n| image | 设置显示图片，为 string 时表示自定义图片地址。 | string \\| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | |\n\n## 内置图片\n\n- Empty.PRESENTED_IMAGE_SIMPLE\n\n <div class=\"site-empty-buildIn-img site-empty-buildIn-simple\"><div>\n\n- Empty.PRESENTED_IMAGE_DEFAULT\n\n <div class=\"site-empty-buildIn-img site-empty-buildIn-default\"></div>\n\n<style>\n.site-empty-buildIn-img {\n background-repeat: no-repeat;\n background-size: cover;\n }\n.site-empty-buildIn-simple {\n width: 55px;\n height: 35px;\n background-image: url(\"https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png\");\n }\n.site-empty-buildIn-default {\n width: 121px;\n height: 116px;\n background-image: url(\"https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png\");\n }\n [data-theme=\"dark\"].site-empty-buildIn-simple {\n background-image: url(\"https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png\");\n }\n [data-theme=\"dark\"].site-empty-buildIn-default {\n background-image: url(\"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ\");\n }\n</style>\n"
    },
    {
      "name": "Form",
      "category": "Data Entry",
      "description": "",
      "whenToUseZh": "- 用于创建一个实体或收集信息。\n- 需要对输入的数据类型进行校验时。",
      "props": [
        {
          "name": "component",
          "type": "ComponentType | false",
          "default": "form",
          "description": "Set the Form rendering element. Do not create a DOM node for `false`",
          "since": "form",
          "descriptionZh": "设置 Form 渲染元素，为 `false` 则不创建 DOM 节点"
        },
        {
          "name": "colon",
          "type": "boolean",
          "default": "true",
          "description": "Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal)",
          "descriptionZh": "配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效)"
        },
        {
          "name": "fields",
          "type": "[FieldData](#FieldData)[]",
          "default": "-",
          "description": "Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state)",
          "descriptionZh": "通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state)"
        },
        {
          "name": "form",
          "type": "[FormInstance](#FormInstance)",
          "default": "-",
          "description": "Form control instance created by `Form.useForm()`. Automatically created when not provided",
          "descriptionZh": "经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建"
        },
        {
          "name": "initialValues",
          "type": "object",
          "default": "-",
          "description": "Set value by Form initialization or reset",
          "descriptionZh": "表单默认值，只有初始化以及重置时生效"
        },
        {
          "name": "labelAlign",
          "type": "`left` | `right`",
          "default": "`right`",
          "description": "The text align of label of all items",
          "since": "`right`",
          "descriptionZh": "label 标签的文本对齐方式"
        },
        {
          "name": "labelCol",
          "type": "[object](/components/grid/#Col)",
          "default": "-",
          "description": "Label layout, like `<Col>` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}`",
          "descriptionZh": "label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`"
        },
        {
          "name": "layout",
          "type": "`horizontal` | `vertical` | `inline`",
          "default": "`horizontal`",
          "description": "Form layout",
          "since": "`inline`",
          "descriptionZh": "表单布局"
        },
        {
          "name": "name",
          "type": "string",
          "default": "-",
          "description": "Form name. Will be the prefix of Field `id`",
          "descriptionZh": "表单名称，会作为表单字段 `id` 前缀使用"
        },
        {
          "name": "preserve",
          "type": "boolean",
          "default": "true",
          "description": "Keep field value even when field removed",
          "since": "4.4.0",
          "descriptionZh": "当字段被删除时保留字段值"
        },
        {
          "name": "requiredMark",
          "type": "boolean | `optional`",
          "default": "true",
          "description": "Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config",
          "since": "4.6.0",
          "descriptionZh": "必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置"
        },
        {
          "name": "scrollToFirstError",
          "type": "boolean",
          "default": "false",
          "description": "Auto scroll to first failed field when submit",
          "descriptionZh": "提交失败自动滚动到第一个错误字段"
        },
        {
          "name": "size",
          "type": "`small` | `middle` | `large`",
          "default": "-",
          "description": "Set field component size (antd components only)",
          "since": "`large`",
          "descriptionZh": "设置字段组件的尺寸（仅限 antd 组件）"
        },
        {
          "name": "validateMessages",
          "type": "",
          "default": "-",
          "description": "Validation prompt template, description [see below](#validateMessages)",
          "descriptionZh": "验证提示模板，说明[见下](#validateMessages)"
        },
        {
          "name": "validateTrigger",
          "type": "string | string[]",
          "default": "-",
          "description": "Config field validate trigger",
          "since": "`onChange`",
          "descriptionZh": "统一设置字段校验规则"
        },
        {
          "name": "wrapperCol",
          "type": "[object](/components/grid/#Col)",
          "default": "-",
          "description": "The layout for input controls, same as `labelCol`",
          "descriptionZh": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol"
        },
        {
          "name": "onFinish",
          "type": "function(values)",
          "default": "-",
          "description": "Trigger after submitting the form and verifying data successfully",
          "descriptionZh": "提交表单且数据验证成功后回调事件"
        },
        {
          "name": "onFinishFailed",
          "type": "function({ values, errorFields, outOfDate })",
          "default": "-",
          "description": "Trigger after submitting the form and verifying data failed",
          "descriptionZh": "提交表单且数据验证失败后回调事件"
        },
        {
          "name": "onFieldsChange",
          "type": "function(changedFields, allFields)",
          "default": "-",
          "description": "Trigger when field updated",
          "descriptionZh": "字段更新时触发回调事件"
        },
        {
          "name": "onValuesChange",
          "type": "function(changedValues, allValues)",
          "default": "-",
          "description": "Trigger when value updated",
          "descriptionZh": "字段值更新时触发回调事件"
        }
      ],
      "tokens": [
        {
          "name": "inlineItemMarginBottom",
          "type": "number",
          "default": "",
          "description": "Inline layout form item margin bottom",
          "descriptionZh": "行内布局表单项间距"
        },
        {
          "name": "itemMarginBottom",
          "type": "number",
          "default": "",
          "description": "Form item margin bottom",
          "descriptionZh": "表单项间距"
        },
        {
          "name": "labelColonMarginInlineEnd",
          "type": "number",
          "default": "",
          "description": "Label colon margin-inline-end",
          "descriptionZh": "标签冒号后间距"
        },
        {
          "name": "labelColonMarginInlineStart",
          "type": "number",
          "default": "",
          "description": "Label colon margin-inline-start",
          "descriptionZh": "标签冒号前间距"
        },
        {
          "name": "labelColor",
          "type": "string",
          "default": "",
          "description": "Label color",
          "descriptionZh": "标签颜色"
        },
        {
          "name": "labelFontSize",
          "type": "number",
          "default": "",
          "description": "Label font size",
          "descriptionZh": "标签字体大小"
        },
        {
          "name": "labelHeight",
          "type": "string | number",
          "default": "",
          "description": "Label height",
          "descriptionZh": "标签高度"
        },
        {
          "name": "labelRequiredMarkColor",
          "type": "string",
          "default": "",
          "description": "Required mark color",
          "descriptionZh": "必填项标记颜色"
        },
        {
          "name": "verticalLabelMargin",
          "type": "Margin<string | number> | undefined",
          "default": "",
          "description": "Vertical layout label margin",
          "descriptionZh": "垂直布局标签外边距"
        },
        {
          "name": "verticalLabelPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Vertical layout label padding",
          "descriptionZh": "垂直布局标签内边距"
        }
      ],
      "faq": [
        {
          "question": "Custom validator not working",
          "answer": "It may be caused by your `validator` if it has some errors that prevents `callback` to be called. You can use `async` instead or use `try...catch` to catch the error:\n\n```jsx\nvalidator: async (rule, value) => {\n throw new Error('Something wrong!');\n}\n\n// or\n\nvalidator(rule, value, callback) => {\n try {\n throw new Error('Something wrong!');\n } catch (err) {\n callback(err);\n }\n}\n```"
        },
        {
          "question": "How does name fill value when it's array?",
          "answer": "`name` will fill value by array order. When there exists number in it and no related field in form store, it will auto convert field to array. If you want to keep it as object, use string like: `['1', 'name']`."
        },
        {
          "question": "Why is there a form warning when used in Modal?",
          "answer": "> Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?\n\nBefore Modal opens, children elements do not exist in the view. You can set `forceRender` on Modal to pre-render its children. Click [here](https://codesandbox.io/s/antd-reproduction-template-ibu5c) to view an example."
        },
        {
          "question": "Why is component `defaultValue` not working when inside Form.Item?",
          "answer": "Components inside Form.Item with name property will turn into controlled mode, which makes `defaultValue` not work anymore. Please try `initialValues` of Form to set default value."
        },
        {
          "question": "Why can not call `ref` of Form at first time?",
          "answer": "`ref` only receives the mounted instance. please ref React official doc: https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs"
        },
        {
          "question": "Why `resetFields` will re-mount component?",
          "answer": "`resetFields` will re-mount component under Field to clean up customize component side effects (like async data, cached state, etc.). It's by design."
        },
        {
          "question": "Difference between Form initialValues and Item initialValue?",
          "answer": "In most case, we always recommend to use Form `initialValues`. Use Item `initialValue` only with dynamic field usage. Priority follows the rules:\n\n1. Form `initialValues` is the first priority\n2. Field `initialValue` is secondary \\*. Does not work when multiple Item with same `name` setting the `initialValue`"
        },
        {
          "question": "Why `onFieldsChange` triggers three times on change when field sets `rules`?",
          "answer": "Validating is also part of the value updating. It pass follow steps:\n\n1. Trigger value change\n2. Rule validating\n3. Rule validated\n\nIn each `onFieldsChange`, you will get `false` > `true` > `false` with `isFieldValidating`."
        },
        {
          "question": "Why Form.Item `dependencies` can not work on Form.List field?",
          "answer": "Your name path should also contain Form.List `name`:\n\n```tsx\n<Form.List name=\"users\">\n {fields =>\n fields.map(field => (\n <React.Fragment key={field.key}>\n <Form.Item name={[field.name, 'name']} {...someRest1} />\n <Form.Item name={[field.name, 'age']} {...someRest1} />\n </React.Fragment>\n ))\n }\n</Form.List>\n```\n\ndependencies should be `['users', 0, 'name']`"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "表单",
      "since": "4.0.0",
      "doc": "\nHigh performance Form component with data scope management. Including data collection, verification, and styles.\n\n## When to use\n\n- When you need to create an instance or collect information.\n- When you need to validate fields in certain rules.\n\n## API\n\n### Form\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \\| false | form | |\n| colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | |\n| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#FieldData)\\[] | - | |\n| form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#FormInstance) | - | |\n| initialValues | Set value by Form initialization or reset | object | - | |\n| labelAlign | The text align of label of all items | `left` \\| `right` | `right` | |\n| labelCol | Label layout, like `<Col>` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |\n| layout | Form layout | `horizontal` \\| `vertical` \\| `inline` | `horizontal` | |\n| name | Form name. Will be the prefix of Field `id` | string | - | |\n| preserve | Keep field value even when field removed | boolean | true | 4.4.0 |\n| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean \\| `optional` | true | 4.6.0 |\n| scrollToFirstError | Auto scroll to first failed field when submit | boolean | false | |\n| size | Set field component size (antd components only) | `small` \\| `middle` \\| `large` | - | |\n| validateMessages | Validation prompt template, description [see below](#validateMessages) | | - | |\n| validateTrigger | Config field validate trigger | string \\| string[] | `onChange` | 4.3.0 |\n| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | - | |\n| onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - | |\n| onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - | |\n| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - | |\n| onValuesChange | Trigger when value updated | function(changedValues, allValues) | - | |\n\n### validateMessages\n\nForm provides [default verification error messages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts). You can modify the template by configuring `validateMessages` property. A common usage is to configure localization:\n\n```jsx\nconst validateMessages = {\n required: \"'${name}' is required!\",\n //...\n};\n\n<Form validateMessages={validateMessages} />;\n```\n\nBesides, [ConfigProvider](/components/config-provider/) also provides a global configuration scheme that allows for uniform configuration error notification templates:\n\n```jsx\nconst validateMessages = {\n required: \"'${name}' is Required!\",\n //...\n};\n\n<ConfigProvider form={{ validateMessages }}>\n <Form />\n</ConfigProvider>;\n```\n\n## Form.Item\n\nForm field component for data bidirectional binding, validation, layout, and so on.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |\n| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - | |\n| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string \\| ReactNode | - | |\n| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - | |\n| getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |\n| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | |\n| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string \\| ReactNode | - | |\n| htmlFor | Set sub label `htmlFor` | string | - | |\n| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |\n| noStyle | No style for `true`, used as a pure field control | boolean | false | |\n| label | Label text | string \\| ReactNode | - | |\n| labelAlign | The text align of label | `left` \\| `right` | `right` | |\n| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | |\n| name | Field name, support array | [NamePath](#NamePath) | - | |\n| normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - | |\n| preserve | Keep field value even when field removed | boolean | true | 4.4.0 |\n| required | Display required style. It will be generated by the validation rule | boolean | false | |\n| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - | |\n| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \\| (prevValue, curValue) => boolean | false | |\n| trigger | When to collect the value of children node | string | `onChange` | |\n| validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` cofigured | boolean \\| `parallel` | false | `parallel`: 4.5.0 |\n| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | |\n| validateTrigger | When to validate the value of children node | string \\| string[] | `onChange` | |\n| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | |\n| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | |\n| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | |\n\nAfter wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:\n\n1. You shouldn't use `onChange` on each form control to **collect data**(use `onValuesChange` of Form), but you can still listen to `onChange`.\n2. You cannot set value for each form control via `value` or `defaultValue` prop, you should set default value with `initialValues` of Form. Note that `initialValues` cannot be updated by `setState` dynamiclly, you should use `setFieldsValue` in that situation.\n3. You shouldn't call `setState` manually, please use `form.setFieldsValue` to change value programmatically.\n\n### dependencies\n\nUsed when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with \"password\" and \"confirm password\" fields. The \"Confirm Password\" validation depends on the \"Password\" field. After setting `dependencies`, the \"Password\" field update will re-trigger the validation of \"Check Password\". You can refer [examples](#components-form-demo-register).\n\n`dependencies` shouldn't be used together with `shouldUpdate`. Since it may cause chaos in updating logic.\n\n`dependencies` supports `Form.Item` with render props children since `4.5.0`.\n\n### shouldUpdate\n\nForm updates only the modified field-related components for performance optimization purposes by incremental update. In most cases, you only need to write code or do validation with the [`dependencies`](#dependencies) property. In some specific cases, such as when a new field option appears with a filed value changed, or you just want to keep some area updating by form update, you can modify the update logic of Form.Item via the `shouldUpdate`.\n\nWhen `shouldUpdate` is `true`, any Form update will cause the Form.Item to be re-rendered. This is very helpful for custom rendering some areas:\n\n```jsx\n<Form.Item shouldUpdate>\n {() => {\n return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;\n }}\n</Form.Item>\n```\n\nYou can ref [example](#components-form-demo-horizontal-login) to see detail.\n\nWhen `shouldUpdate` is a function, it will be called by form values update. Providing original values and current value to compare. This is very helpful for rendering additional fields based on values:\n\n```jsx\n<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>\n {() => {\n return (\n <Form.Item name=\"other\">\n <Input />\n </Form.Item>\n );\n }}\n</Form.Item>\n```\n\nYou can ref [example](#components-form-demo-control-hooks) to see detail.\n\n## Form.List\n\nProvides array management for fields.\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| name | Field name, support array | [NamePath](#NamePath) | - |\n| children | Render function | (fields: Field[], operation: { add, remove, move }) => React.ReactNode | - |\n\n```tsx\n<Form.List>\n {fields => (\n <div>\n {fields.map(field => (\n <Form.Item {...field}>\n <Input />\n </Form.Item>\n ))}\n </div>\n )}\n</Form.List>\n```\n\n## operation\n\nSome operator functions in render form of Form.List.\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| add | add form item | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |\n| remove | remove form item | (index: number \\| number[]) => void | number[]: 4.5.0 |\n| move | move form item | (from: number, to: number) => void | - |\n\n## Form.Provider\n\nProvide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#components-form-demo-form-context).\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| onFormChange | Triggered when a sub form field updates | function(formName: string, info: { changedFields, forms }) | - |\n| onFormFinish | Triggered when a sub form submits | function(formName: string, info: { values, forms }) | - |\n\n```jsx\n<Form.Provider\n onFormFinish={name => {\n if (name === 'form1') {\n // Do something...\n }\n }}\n>\n <Form name=\"form1\">...</Form>\n <Form name=\"form2\">...</Form>\n</Form.Provider>\n```\n\n### FormInstance\n\n| Name | Description | Type | Version |\n| --- | --- | --- | --- |\n| getFieldInstance | Get field instance | (name: [NamePath](#NamePath)) => any | 4.4.0 |\n| getFieldValue | Get the value by the field name | (name: [NamePath](#NamePath)) => any | |\n| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | |\n| getFieldError | Get the error messages by the field name | (name: [NamePath](#NamePath)) => string[] | |\n| getFieldsError | Get the error messages by the fields name. Return as an array | (nameList?: [NamePath](#NamePath)[]) => FieldError[] | |\n| isFieldTouched | Check if a field has been operated | (name: [NamePath](#NamePath)) => boolean | |\n| isFieldsTouched | Check if fields have been operated. Check if all fields is touched when `allTouched` is `true` | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean | |\n| isFieldValidating | Check fields if is in validating | (name: [NamePath](#NamePath)) => boolean | |\n| resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#NamePath)[]) => void | |\n| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: []) => void | |\n| setFields | Set fields status | (fields: [FieldData](#FieldData)[]) => void | |\n| setFieldsValue | Set fields value | (values) => void | |\n| submit | Submit the form. It's same as click `submit` button | () => void | |\n| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)[]) => Promise | |\n\n#### validateFields return sample\n\n```jsx\nvalidateFields()\n.then(values => {\n /*\n values:\n {\n username: 'username',\n password: 'password',\n }\n */\n })\n.catch(errorInfo => {\n /*\n errorInfo:\n {\n values: {\n username: 'username',\n password: 'password',\n },\n errorFields: [\n { password: ['username'], errors: ['Please input your Password!'] },\n ],\n outOfDate: false,\n }\n */\n });\n```\n\n### Interface\n\n#### NamePath\n\n`string | number | (string | number)[]`\n\n#### FieldData\n\n| Name | Description | Type |\n| ---------- | ------------------------ | ----------------------- |\n| touched | Whether is operated | boolean |\n| validating | Whether is in validating | boolean |\n| errors | Error messages | string[] |\n| name | Field name path | [NamePath](#NamePath)[] |\n| value | Field value | any |\n\n#### Rule\n\nRule support config object, and also support function to get config object:\n\n```tsx\ntype Rule = RuleConfig | ((form: FormInstance) => RuleConfig);\n```\n\n| Name | Description | Type |\n| --- | --- | --- |\n| enum | Match enum value | any[] |\n| len | Length of string, number, array | number |\n| max | `type` required: max length of `string`, `number`, `array` | number |\n| message | Error message. Will auto generate by [template](#validateMessages) if not provided | string |\n| min | `type` required: min length of `string`, `number`, `array` | number |\n| pattern | Regex pattern | RegExp |\n| required | Required field | boolean |\n| transform | Transform value to the rule before validation | (value) => any |\n| type | Normally `string` \\|`number` \\|`boolean` \\|`url` \\| `email`. More type to ref | string |\n| validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#Rule), value) => Promise |\n| whitespace | Failed if only has whitespace | boolean |\n| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \\| string[] |\n\n## Migrate to v4\n\nIf you are a user of v3, you can ref [migrate doc](/components/form/v3)。\n\n<style>\n.code-box-demo.ant-form:not(.ant-form-inline):not(.ant-form-vertical) {\n max-width: 600px;\n}\n.markdown.api-container table td:nth-of-type(4) {\n white-space: nowrap;\n word-wrap: break-word;\n}\n</style>\n\n## FAQ\n\n### Custom validator not working\n\nIt may be caused by your `validator` if it has some errors that prevents `callback` to be called. You can use `async` instead or use `try...catch` to catch the error:\n\n```jsx\nvalidator: async (rule, value) => {\n throw new Error('Something wrong!');\n}\n\n// or\n\nvalidator(rule, value, callback) => {\n try {\n throw new Error('Something wrong!');\n } catch (err) {\n callback(err);\n }\n}\n```\n\n### How does name fill value when it's array?\n\n`name` will fill value by array order. When there exists number in it and no related field in form store, it will auto convert field to array. If you want to keep it as object, use string like: `['1', 'name']`.\n\n### Why is there a form warning when used in Modal?\n\n> Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?\n\nBefore Modal opens, children elements do not exist in the view. You can set `forceRender` on Modal to pre-render its children. Click [here](https://codesandbox.io/s/antd-reproduction-template-ibu5c) to view an example.\n\n### Why is component `defaultValue` not working when inside Form.Item?\n\nComponents inside Form.Item with name property will turn into controlled mode, which makes `defaultValue` not work anymore. Please try `initialValues` of Form to set default value.\n\n### Why can not call `ref` of Form at first time?\n\n`ref` only receives the mounted instance. please ref React official doc: https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs\n\n### Why `resetFields` will re-mount component?\n\n`resetFields` will re-mount component under Field to clean up customize component side effects (like async data, cached state, etc.). It's by design.\n\n### Difference between Form initialValues and Item initialValue?\n\nIn most case, we always recommend to use Form `initialValues`. Use Item `initialValue` only with dynamic field usage. Priority follows the rules:\n\n1. Form `initialValues` is the first priority\n2. Field `initialValue` is secondary \\*. Does not work when multiple Item with same `name` setting the `initialValue`\n\n### Why `onFieldsChange` triggers three times on change when field sets `rules`?\n\nValidating is also part of the value updating. It pass follow steps:\n\n1. Trigger value change\n2. Rule validating\n3. Rule validated\n\nIn each `onFieldsChange`, you will get `false` > `true` > `false` with `isFieldValidating`.\n\n### Why Form.Item `dependencies` can not work on Form.List field?\n\nYour name path should also contain Form.List `name`:\n\n```tsx\n<Form.List name=\"users\">\n {fields =>\n fields.map(field => (\n <React.Fragment key={field.key}>\n <Form.Item name={[field.name, 'name']} {...someRest1} />\n <Form.Item name={[field.name, 'age']} {...someRest1} />\n </React.Fragment>\n ))\n }\n</Form.List>\n```\n\ndependencies should be `['users', 0, 'name']`\n\n<style>\n.site-form-item-icon {\n color: rgba(0, 0, 0, 0.25);\n }\n [data-theme=\"dark\"].site-form-item-icon {\n color: rgba(255,255,255,.3);\n }\n</style>\n",
      "docZh": "\n高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。\n\n## 何时使用\n\n- 用于创建一个实体或收集信息。\n- 需要对输入的数据类型进行校验时。\n\n## API\n\n### Form\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \\| false | form | |\n| colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true | |\n| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#FieldData)\\[] | - | |\n| form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#FormInstance) | - | |\n| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |\n| labelAlign | label 标签的文本对齐方式 | `left` \\| `right` | `right` | |\n| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |\n| layout | 表单布局 | `horizontal` \\| `vertical` \\| `inline` | `horizontal` | |\n| name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | |\n| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |\n| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \\| `optional` | true | 4.6.0 |\n| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean | false | |\n| size | 设置字段组件的尺寸（仅限 antd 组件） | `small` \\| `middle` \\| `large` | - | |\n| validateMessages | 验证提示模板，说明[见下](#validateMessages) | | - | |\n| validateTrigger | 统一设置字段校验规则 | string \\| string[] | `onChange` | 4.3.0 |\n| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid/#Col) | - | |\n| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |\n| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |\n| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |\n| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |\n\n### validateMessages\n\nForm 为验证提供了[默认的错误提示信息](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：\n\n```jsx\nconst validateMessages = {\n required: \"'${name}' 是必选字段\",\n //...\n};\n\n<Form validateMessages={validateMessages} />;\n```\n\n此外，[ConfigProvider](/components/config-provider/) 也提供了全局化配置方案，允许统一配置错误提示模板：\n\n```jsx\nconst validateMessages = {\n required: \"'${name}' 是必选字段\",\n //...\n};\n\n<ConfigProvider form={{ validateMessages }}>\n <Form />\n</ConfigProvider>;\n```\n\n## Form.Item\n\n表单字段组件，用于数据双向绑定、校验、布局等。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| colon | 配合 `label` 属性使用，表示是否显示 `label` 后面的冒号 | boolean | true | |\n| dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - | |\n| extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string \\| ReactNode | - | |\n| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - | |\n| getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 |\n| hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | |\n| help | 提示信息，如不设置，则会根据校验规则自动生成 | string \\| ReactNode | - | |\n| htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | |\n| initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |\n| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | |\n| label | `label` 标签的文本 | string \\| ReactNode | - | |\n| labelAlign | 标签文本对齐方式 | `left` \\| `right` | `right` | |\n| labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | |\n| name | 字段名，支持数组 | [NamePath](#NamePath) | - | |\n| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |\n| normalize | 组件获取值后进行转换，再放入 Form 中 | (value, prevValue, prevValues) => any | - | |\n| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | |\n| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | |\n| shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldUpdate) | boolean \\| (prevValue, curValue) => boolean | false | |\n| trigger | 设置收集字段值变更的时机 | string | `onChange` | |\n| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \\| `parallel` | false | `parallel`: 4.5.0 |\n| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | |\n| validateTrigger | 设置字段校验的时机 | string \\| string[] | `onChange` | |\n| valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | |\n| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | |\n| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | |\n\n被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：\n\n1. 你**不再需要也不应该**用 `onChange` 来做数据收集同步（你可以使用 Form 的 `onValuesChange`），但还是可以继续监听 `onChange` 事件。\n2. 你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值，默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新，你需要用 `setFieldsValue` 来更新。\n3. 你不应该用 `setState`，可以使用 `form.setFieldsValue` 来动态改变表单值。\n\n### dependencies\n\n当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#components-form-demo-register)。\n\n`dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。\n\n从 `4.5.0` 版本开始，`dependencies` 支持使用 render props 类型 children 的 `Form.Item`。\n\n### shouldUpdate\n\nForm 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。大部分场景下，你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。\n\n当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助：\n\n```jsx\n<Form.Item shouldUpdate>\n {() => {\n return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;\n }}\n</Form.Item>\n```\n\n你可以参考[示例](#components-form-demo-horizontal-login)查看具体使用场景。\n\n当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：\n\n```jsx\n<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>\n {() => {\n return (\n <Form.Item name=\"other\">\n <Input />\n </Form.Item>\n );\n }}\n</Form.Item>\n```\n\n你可以参考[示例](#components-form-demo-control-hooks)查看具体使用场景。\n\n## Form.List\n\n为字段提供数组化管理。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| name | 字段名，支持数组 | [NamePath](#NamePath) | - |\n| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }) => React.ReactNode | - |\n\n```tsx\n<Form.List>\n {fields => (\n <div>\n {fields.map(field => (\n <Form.Item {...field}>\n <Input />\n </Form.Item>\n ))}\n </div>\n )}\n 1\n</Form.List>\n```\n\n## operation\n\nForm.List 渲染表单相关操作函数。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ------ | ---------- | -------------------------------------------------- | ------------------ |\n| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |\n| remove | 删除表单项 | (index: number \\| number[]) => void | number[]: 4.5.0 |\n| move | 移动表单项 | (from: number, to: number) => void | - |\n\n## Form.Provider\n\n提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#components-form-demo-form-context)。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - |\n| onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - |\n\n```jsx\n<Form.Provider\n onFormFinish={name => {\n if (name === 'form1') {\n // Do something...\n }\n }}\n>\n <Form name=\"form1\">...</Form>\n <Form name=\"form2\">...</Form>\n</Form.Provider>\n```\n\n### FormInstance\n\n| 名称 | 说明 | 类型 | 版本 |\n| --- | --- | --- | --- |\n| getFieldInstance | 获取对应字段实例 | (name: [NamePath](#NamePath)) => any | 4.4.0 |\n| getFieldValue | 获取对应字段名的值 | (name: [NamePath](#NamePath)) => any | |\n| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | |\n| getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string[] | |\n| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: [NamePath](#NamePath)[]) => FieldError[] | |\n| isFieldTouched | 检查对应字段是否被用户操作过 | (name: [NamePath](#NamePath)) => boolean | |\n| isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过 | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean | |\n| isFieldValidating | 检查一组字段是否正在校验 | (name: [NamePath](#NamePath)) => boolean | |\n| resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#NamePath)[]) => void | |\n| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: []) => void | |\n| setFields | 设置一组字段状态 | (fields: [FieldData](#FieldData)[]) => void | |\n| setFieldsValue | 设置表单的值 | (values) => void | |\n| submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void | |\n| validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)[]) => Promise | |\n\n#### validateFields 返回示例\n\n```jsx\nvalidateFields()\n.then(values => {\n /*\n values:\n {\n username: 'username',\n password: 'password',\n }\n */\n })\n.catch(errorInfo => {\n /*\n errorInfo:\n {\n values: {\n username: 'username',\n password: 'password',\n },\n errorFields: [\n { password: ['username'], errors: ['Please input your Password!'] },\n ],\n outOfDate: false,\n }\n */\n });\n```\n\n### Interface\n\n#### NamePath\n\n`string | number | (string | number)[]`\n\n#### FieldData\n\n| 名称 | 说明 | 类型 |\n| ---------- | ---------------- | ----------------------- |\n| touched | 是否被用户操作过 | boolean |\n| validating | 是否正在校验 | boolean |\n| errors | 错误信息 | string[] |\n| name | 字段名称 | [NamePath](#NamePath)[] |\n| value | 字段对应值 | any |\n\n#### Rule\n\nRule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：\n\n```tsx\ntype Rule = RuleConfig | ((form: FormInstance) => RuleConfig);\n```\n\n| 名称 | 说明 | 类型 |\n| --- | --- | --- |\n| enum | 是否匹配枚举中的值 | any[] |\n| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number |\n| max | 必须设置 `type`：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度 | number |\n| message | 错误信息，不设置时会通过[模板](#validateMessages)自动生成 | string |\n| min | 必须设置 `type`：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度 | number |\n| pattern | 正则表达式匹配 | RegExp |\n| required | 是否为必选字段 | boolean |\n| transform | 将字段值转换成目标值后进行校验 | (value) => any |\n| type | 类型，常见有 `string` \\|`number` \\|`boolean` \\|`url` \\| `email`。更多请参考[此处](https://github.com/yiminghe/async-validator#type) | string |\n| validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#Rule), value) => Promise |\n| whitespace | 如果字段仅包含空格则校验不通过 | boolean |\n| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \\| string[] |\n\n## 从 v3 升级到 v4\n\n如果你是 antd v3 的用户，你可以参考[迁移示例](/components/form/v3)。\n\n<style>\n.code-box-demo.ant-form:not(.ant-form-inline):not(.ant-form-vertical) {\n max-width: 600px;\n}\n.markdown.api-container table td:nth-of-type(4) {\n white-space: nowrap;\n word-wrap: break-word;\n}\n</style>\n\n## FAQ\n\n### 自定义 validator 没有效果\n\n这是由于你的 `validator` 有错误导致 `callback` 没有执行到。你可以选择通过 `async` 返回一个 promise 或者使用 `try...catch` 进行错误捕获：\n\n```jsx\nvalidator: async (rule, value) => {\n throw new Error('Something wrong!');\n}\n\n// or\n\nvalidator(rule, value, callback) => {\n try {\n throw new Error('Something wrong!');\n } catch (err) {\n callback(err);\n }\n}\n```\n\n### name 为数组时的转换规则？\n\n当 `name` 为数组时，会按照顺序填充路径。当存在数字且 form store 中没有该字段时会自动转变成数组。因而如果需要数组为 key 时请使用 string 如：`['1', 'name']`。\n\n### 为何在 Modal 中调用 form 控制台会报错？\n\n> Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?\n\n这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 `forceRender` 将其预渲染。示例点击[此处](https://codesandbox.io/s/antd-reproduction-template-ibu5c)。\n\n### 为什么 Form.Item 下的子组件 `defaultValue` 不生效？\n\n当你为 Form.Item 设置 `name` 属性后，子组件会转为受控模式。因而 `defaultValue` 不会生效。你需要在 Form 上通过 `initialValues` 设置默认值。\n\n### 为什么第一次调用 `ref` 的 From 为空？\n\n`ref` 仅在节点被加载时才会被赋值，请参考 React 官方文档：https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs\n\n### 为什么 `resetFields` 会重新 mount 组件？\n\n`resetFields` 会重置整个 Field，因而其子组件也会重新 mount 从而消除自定义组件可能存在的副作用（例如异步数据、状态等等）。\n\n### Form 的 initialValues 与 Item 的 initialValue 区别？\n\n在大部分场景下，我们总是推荐优先使用 Form 的 `initialValues`。只有存在动态字段时你才应该使用 Item 的 `initialValue`。默认值遵循以下规则：\n\n1. Form 的 `initialValues` 拥有最高优先级\n2. Field 的 `initialValue` 次之 \\*. 多个同 `name` Item 都设置 `initialValue` 时，则 Item 的 `initialValue` 不生效\n\n### 为什么字段设置 `rules` 后更改值 `onFieldsChange` 会触发三次？\n\n字段除了本身的值变化外，校验也是其状态之一。因而在触发字段变化会经历以下几个阶段：\n\n1. Trigger value change\n2. Rule validating\n3. Rule validated\n\n在触发过程中，调用 `isFieldValidating` 会经历 `false` > `true` > `false` 的变化过程。\n\n### 为什么 Form.Item 的 `dependencies` 对 Form.List 下的字段没有效果？\n\nForm.List 下的字段需要包裹 Form.List 本身的 `name`，比如：\n\n```tsx\n<Form.List name=\"users\">\n {fields =>\n fields.map(field => (\n <React.Fragment key={field.key}>\n <Form.Item name={[field.name, 'name']} {...someRest1} />\n <Form.Item name={[field.name, 'age']} {...someRest1} />\n </React.Fragment>\n ))\n }\n</Form.List>\n```\n\n依赖则是：`['users', 0, 'name']`\n\n<style>\n.site-form-item-icon {\n color: rgba(0, 0, 0, 0.25);\n }\n [data-theme=\"dark\"].site-form-item-icon {\n color: rgba(255,255,255,.3);\n }\n</style>\n"
    },
    {
      "name": "Grid",
      "category": "Layout",
      "description": "",
      "props": [
        {
          "name": "align",
          "type": "`top` | `middle` | `bottom`",
          "default": "`top`",
          "description": "Vertical alignment",
          "since": "`bottom`",
          "descriptionZh": ""
        },
        {
          "name": "gutter",
          "type": "number | object | array",
          "default": "0",
          "description": "Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]`",
          "since": "array",
          "descriptionZh": ""
        },
        {
          "name": "justify",
          "type": "`start` | `end` | `center` | `space-around` | `space-between`",
          "default": "`start`",
          "description": "Horizontal arrangement",
          "since": "`center` \\",
          "descriptionZh": ""
        },
        {
          "name": "flex",
          "type": "string | number",
          "default": "-",
          "description": "Flex layout style",
          "since": "-",
          "descriptionZh": ""
        },
        {
          "name": "offset",
          "type": "number",
          "default": "0",
          "description": "The number of cells to offset Col from the left",
          "descriptionZh": ""
        },
        {
          "name": "order",
          "type": "number",
          "default": "0",
          "description": "Raster order",
          "descriptionZh": ""
        },
        {
          "name": "pull",
          "type": "number",
          "default": "0",
          "description": "The number of cells that raster is moved to the left",
          "descriptionZh": ""
        },
        {
          "name": "push",
          "type": "number",
          "default": "0",
          "description": "The number of cells that raster is moved to the right",
          "descriptionZh": ""
        },
        {
          "name": "span",
          "type": "number",
          "default": "none",
          "description": "Raster number of cells to occupy, 0 corresponds to `display: none`",
          "descriptionZh": ""
        },
        {
          "name": "xs",
          "type": "number | object",
          "default": "-",
          "description": "`screen < 576px` and also default setting, could be a `span` value or an object containing above props",
          "since": "-",
          "descriptionZh": ""
        },
        {
          "name": "sm",
          "type": "number | object",
          "default": "-",
          "description": "`screen ≥ 576px`, could be a `span` value or an object containing above props",
          "since": "-",
          "descriptionZh": ""
        },
        {
          "name": "md",
          "type": "number | object",
          "default": "-",
          "description": "`screen ≥ 768px`, could be a `span` value or an object containing above props",
          "since": "-",
          "descriptionZh": ""
        },
        {
          "name": "lg",
          "type": "number | object",
          "default": "-",
          "description": "`screen ≥ 992px`, could be a `span` value or an object containing above props",
          "since": "-",
          "descriptionZh": ""
        },
        {
          "name": "xl",
          "type": "number | object",
          "default": "-",
          "description": "`screen ≥ 1200px`, could be a `span` value or an object containing above props",
          "since": "-",
          "descriptionZh": ""
        },
        {
          "name": "xxl",
          "type": "number | object",
          "default": "-",
          "description": "`screen ≥ 1600px`, could be a `span` value or an object containing above props",
          "since": "-",
          "descriptionZh": ""
        }
      ],
      "categoryZh": "布局",
      "nameZh": "栅格",
      "since": "4.0.0",
      "doc": "\n24 Grids System.\n\n## Design concept\n\n<div class=\"grid-demo\">\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-24 demo-col demo-col-1\">\n 100%\n </div>\n</div>\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-6 demo-col demo-col-2\">\n 25%\n </div>\n <div class=\"ant-col-6 demo-col demo-col-3\">\n 25%\n </div>\n <div class=\"ant-col-6 demo-col demo-col-2\">\n 25%\n </div>\n <div class=\"ant-col-6 demo-col demo-col-3\">\n 25%\n </div>\n</div>\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-8 demo-col demo-col-4\">\n 33.33%\n </div>\n <div class=\"ant-col-8 demo-col demo-col-5\">\n 33.33%\n </div>\n <div class=\"ant-col-8 demo-col demo-col-4\">\n 33.33%\n </div>\n</div>\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-12 demo-col demo-col-1\">\n 50%\n </div>\n <div class=\"ant-col-12 demo-col demo-col-3\">\n 50%\n </div>\n</div>\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-16 demo-col demo-col-4\">\n 66.66%\n </div>\n <div class=\"ant-col-8 demo-col demo-col-5\">\n 33.33%\n </div>\n</div>\n</div>\n\nIn most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.\n\nWe name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.\n\n## Outline\n\nIn the grid system, we define the frame outside the information area based on `row` and `column`, to ensure that every area can have stable arrangement.\n\nFollowing is a brief look at how it works:\n\n- Establish a set of `column` in the horizontal space defined by `row` (abbreviated col).\n- Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`.\n- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `<Col span={8} />`.\n- If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.\n\nOur grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`.\n\nLayout uses a 24 grid layout to define the width of each \"box\", but does not rigidly adhere to the grid layout.\n\n## API\n\nIf the Ant Design grid layout component does not meet your needs, you can use the excellent layout components of the community:\n\n- [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)\n- [react-blocks](https://github.com/whoisandy/react-blocks/)\n\n### Row\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| align | Vertical alignment | `top` \\| `middle` \\| `bottom` | `top` | |\n| gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \\| object \\| array | 0 | | |\n| justify | Horizontal arrangement | `start` \\| `end` \\| `center` \\| `space-around` \\| `space-between` | `start` | |\n\n### Col\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| flex | Flex layout style | string \\| number | - | |\n| offset | The number of cells to offset Col from the left | number | 0 | |\n| order | Raster order | number | 0 | |\n| pull | The number of cells that raster is moved to the left | number | 0 | |\n| push | The number of cells that raster is moved to the right | number | 0 | |\n| span | Raster number of cells to occupy, 0 corresponds to `display: none` | number | none | |\n| xs | `screen < 576px` and also default setting, could be a `span` value or an object containing above props | number \\| object | - | |\n| sm | `screen ≥ 576px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| md | `screen ≥ 768px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \\| object | - | |\n| xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \\| object | - | |\n\nThe breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).\n\n<style>\n [data-theme=\"dark\"] #components-grid-demo-playground pre {\n background: rgba(255,255,255,0.8);\n color: rgba(255,255,255,.65);\n }\n</style>\n",
      "docZh": "\n24 栅格系统。\n\n## 设计理念\n\n<div class=\"grid-demo\">\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-24 demo-col demo-col-1\">\n 100%\n </div>\n</div>\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-6 demo-col demo-col-2\">\n 25%\n </div>\n <div class=\"ant-col-6 demo-col demo-col-3\">\n 25%\n </div>\n <div class=\"ant-col-6 demo-col demo-col-2\">\n 25%\n </div>\n <div class=\"ant-col-6 demo-col demo-col-3\">\n 25%\n </div>\n</div>\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-8 demo-col demo-col-4\">\n 33.33%\n </div>\n <div class=\"ant-col-8 demo-col demo-col-5\">\n 33.33%\n </div>\n <div class=\"ant-col-8 demo-col demo-col-4\">\n 33.33%\n </div>\n</div>\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-12 demo-col demo-col-1\">\n 50%\n </div>\n <div class=\"ant-col-12 demo-col demo-col-3\">\n 50%\n </div>\n</div>\n<div class=\"ant-row demo-row\">\n <div class=\"ant-col-16 demo-col demo-col-4\">\n 66.66%\n </div>\n <div class=\"ant-col-8 demo-col demo-col-5\">\n 33.33%\n </div>\n</div>\n</div>\n\n在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。\n\n划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。\n\n## 概述\n\n布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：\n\n- 通过 `row` 在水平方向建立一组 `column`（简写 col）。\n- 你的内容应当放置于 `col` 内，并且，只有 `col` 可以作为 `row` 的直接元素。\n- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建。\n- 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列。\n\n我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。\n\n布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。\n\n## API\n\nAnt Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件：\n\n- [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)\n- [react-blocks](https://github.com/whoisandy/react-blocks/)\n\n### Row\n\n| 成员 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| align | 垂直对齐方式 | `top` \\| `middle` \\| `bottom` | `top` | |\n| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \\| object \\| array | 0 | |\n| justify | 水平排列方式 | `start` \\| `end` \\| `center` \\| `space-around` \\| `space-between` | `start` | |\n\n### Col\n\n| 成员 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| flex | flex 布局属性 | string \\| number | - | |\n| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |\n| order | 栅格顺序 | number | 0 | |\n| pull | 栅格向左移动格数 | number | 0 | |\n| push | 栅格向右移动格数 | number | 0 | |\n| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |\n| xs | `屏幕 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| sm | `屏幕 ≥ 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| md | `屏幕 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| lg | `屏幕 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| xl | `屏幕 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n| xxl | `屏幕 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \\| object | - | |\n\n响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。\n\n<style>\n [data-theme=\"dark\"] #components-grid-demo-playground pre {\n background: rgba(255,255,255,0.08);\n color: rgba(255,255,255,.65);\n }\n</style>\n"
    },
    {
      "name": "Icon",
      "category": "General",
      "description": "",
      "props": [
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The className of Icon",
          "descriptionZh": "计算后的 `svg` 类名"
        },
        {
          "name": "rotate",
          "type": "number",
          "default": "-",
          "description": "Rotate by n degrees (not working in IE9)",
          "descriptionZh": "图标旋转角度（IE9 无效）"
        },
        {
          "name": "spin",
          "type": "boolean",
          "default": "false",
          "description": "Rotate icon with animation",
          "descriptionZh": "是否有旋转动画"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "The style properties of icon, like `fontSize` and `color`",
          "descriptionZh": "计算后的 `svg` 元素样式"
        },
        {
          "name": "twoToneColor",
          "type": "string (hex color)",
          "default": "-",
          "description": "Only supports the two-tone icon. Specify the primary color",
          "descriptionZh": "仅适用双色图标。设置双色图标的主要颜色"
        },
        {
          "name": "component",
          "type": "ComponentType<CustomIconComponentProps>",
          "default": "-",
          "description": "The component used for the root node",
          "descriptionZh": "控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 React 组件"
        },
        {
          "name": "rotate",
          "type": "number",
          "default": "-",
          "description": "Rotate degrees (not working in IE9)",
          "descriptionZh": "图标旋转角度（IE9 无效）"
        },
        {
          "name": "spin",
          "type": "boolean",
          "default": "false",
          "description": "Rotate icon with animation",
          "descriptionZh": "是否有旋转动画"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "The style properties of icon, like `fontSize` and `color`",
          "descriptionZh": "计算后的 `svg` 元素样式"
        },
        {
          "name": "extraCommonProps",
          "type": "{ [key: string]: any }",
          "default": "{}",
          "description": "Define extra properties to the component",
          "descriptionZh": "给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性"
        },
        {
          "name": "scriptUrl",
          "type": "string | string[]",
          "default": "-",
          "description": "The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0`",
          "since": "-",
          "descriptionZh": "[iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The computed class name of the `svg` element",
          "descriptionZh": "计算后的 `svg` 类名"
        },
        {
          "name": "fill",
          "type": "string",
          "default": "-",
          "description": "Define the color used to paint the `svg` element",
          "descriptionZh": "`svg` 元素填充的颜色"
        },
        {
          "name": "height",
          "type": "string | number",
          "default": "-",
          "description": "The height of the `svg` element",
          "since": "`1em`",
          "descriptionZh": "`svg` 元素高度"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "The computed style of the `svg` element",
          "descriptionZh": "计算后的 `svg` 元素样式"
        },
        {
          "name": "width",
          "type": "string | number",
          "default": "-",
          "description": "The width of the `svg` element",
          "since": "`1em`",
          "descriptionZh": "`svg` 元素宽度"
        }
      ],
      "categoryZh": "通用",
      "nameZh": "图标",
      "since": "4.0.0",
      "doc": "\nSemantic vector graphics. Before use icons, you need to install `@ant-design/icons` package:\n\n```bash\nnpm install --save @ant-design/icons\n```\n\n## List of icons\n\n```__react\nimport IconDisplay from 'site/theme/template/IconDisplay';\nReactDOM.render(<IconDisplay />, mountNode);\n```\n\n## API\n\n### Common Icon\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| className | The className of Icon | string | - | |\n| rotate | Rotate by n degrees (not working in IE9) | number | - | |\n| spin | Rotate icon with animation | boolean | false | |\n| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |\n| twoToneColor | Only supports the two-tone icon. Specify the primary color | string (hex color) | - | |\n\nWe still have three different themes for icons, icon component name is the icon name suffixed by the theme name.\n\n```jsx\nimport { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';\n\n<StarOutlined />\n<StarFilled />\n<StarTwoTone twoToneColor=\"#eb2f96\" />\n```\n\n### Custom Icon\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| component | The component used for the root node | ComponentType<CustomIconComponentProps\\> | - | |\n| rotate | Rotate degrees (not working in IE9) | number | - | |\n| spin | Rotate icon with animation | boolean | false | |\n| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |\n\n### About SVG icons\n\nWe introduced SVG icons in version `3.9.0`, replacing font icons. This has the following benefits:\n\n- Complete offline usage of icons, without dependency on a CDN-hosted font icon file (No more empty square during downloading and no need to deploy icon font files locally either!)\n- Much more display accuracy on lower-resolution screens\n- The ability to choose icon color\n- No need to change built-in icons with overriding styles by providing more props in component\n\nMore discussion of SVG icon reference at [#10353](https://github.com/ant-design/ant-design/issues/10353).\n\n> ⚠️ Given the extra bundle size caused by all SVG icons imported in 3.9.0, we will provide a new API to allow developers to import icons as needed, you can track [#12011](https://github.com/ant-design/ant-design/issues/12011) for updates.\n>\n> While you wait, you can use [webpack plugin](https://github.com/Beven91/webpack-ant-icon-loader) from the community to chunk the icon file.\n\nThe properties `theme`, `component` and `twoToneColor` were added in `3.9.0`. The best practice is to pass the property `theme` to every `<Icon />` component.\n\n```jsx\nimport { MessageOutlined } from '@ant-design/icons';\n\n<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;\n```\n\nAll the icons will render to `<svg>`. You can still set `style` and `className` for size and color of icons.\n\n```jsx\n<Icon type=\"message\" style={{ fontSize: '16px', color: '#08c' }} theme=\"outlined\" />\n```\n\n### Set TwoTone Color\n\nWhen using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to specify the primary color.\n\n```jsx\nimport { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';\n\nsetTwoToneColor('#eb2f96');\ngetTwoToneColor(); // #eb2f96\n```\n\n### Custom Font Icon\n\nWe added a `createFromIconfontCN` function to help developer use their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.\n\n> This method is specified for [iconfont.cn](http://iconfont.cn/).\n\n```js\nimport { createFromIconfontCN } from '@ant-design/icons';\n\nconst MyIcon = createFromIconfontCN({\n scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成\n});\n\nReactDOM.render(<MyIcon type=\"icon-example\" />, mountedNode);\n```\n\nIt creates a component that uses SVG sprites in essence.\n\nThe following options are available:\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| extraCommonProps | Define extra properties to the component | { \\[key: string]: any } | {} | |\n| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \\| string[] | - | |\n\nThe property `scriptUrl` should be set to import the SVG sprite symbols.\n\nSee [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.\n\n### Custom SVG Icon\n\nYou can import SVG icon as a react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options`.\n\n```js\n// webpack.config.js\n{\n test: /\\.svg(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n use: [\n {\n loader: 'babel-loader',\n },\n {\n loader: '@svgr/webpack',\n options: {\n babel: false,\n icon: true,\n },\n },\n ],\n}\n```\n\n```jsx\nimport Icon from '@ant-design/icons';\nimport MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.\n// in create-react-app:\n// import { ReactComponent as MessageSvg } from 'path/to/message.svg';\n\nReactDOM.render(<Icon component={MessageSvg} />, mountNode);\n```\n\nThe following properties are available for the component:\n\n| Property | Description | Type | Readonly | Version |\n| --- | --- | --- | --- | --- |\n| className | The computed class name of the `svg` element | string | - | |\n| fill | Define the color used to paint the `svg` element | string | `currentColor` | |\n| height | The height of the `svg` element | string \\| number | `1em` | |\n| style | The computed style of the `svg` element | CSSProperties | - | |\n| width | The width of the `svg` element | string \\| number | `1em` | |\n",
      "docZh": "\n语义化的矢量图形。使用图标组件，你需要安装 `@ant-design/icons` 图标组件包：\n\n```bash\nnpm install --save @ant-design/icons\n```\n\n## 设计师专属\n\n安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。\n\n## 图标列表\n\n```__react\nimport IconDisplay from 'site/theme/template/IconDisplay';\nReactDOM.render(<IconDisplay />, mountNode);\n```\n\n## API\n\n从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 `@ant-design/icons`。\n\n### 通用图标\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| className | 设置图标的样式名 | string | - | |\n| rotate | 图标旋转角度（IE9 无效） | number | - | |\n| spin | 是否有旋转动画 | boolean | false | |\n| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |\n| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - | |\n\n其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。\n\n```jsx\nimport { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';\n\n<StarOutlined />\n<StarFilled />\n<StarTwoTone twoToneColor=\"#eb2f96\" />\n```\n\n### 自定义 Icon\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 React 组件 | ComponentType<CustomIconComponentProps\\> | - | |\n| rotate | 图标旋转角度（IE9 无效） | number | - | |\n| spin | 是否有旋转动画 | boolean | false | |\n| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |\n\n### 关于 SVG 图标\n\n在 `3.9.0` 之后，我们使用了 SVG 图标替换了原先的 font 图标，从而带来了以下优势：\n\n- 完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。\n- 在低端设备上 SVG 有更好的清晰度。\n- 支持多色图标。\n- 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。\n\n更多讨论可参考：[#10353](https://github.com/ant-design/ant-design/issues/10353)。\n\n所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `className` 设置图标的大小和单色图标的颜色。例如：\n\n```jsx\nimport { MessageOutlined } from '@ant-design/icons';\n\n<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;\n```\n\n### 双色图标主色\n\n对于双色图标，可以通过使用 `getTwoToneColor()` 和 `setTwoToneColor(colorString)` 来全局设置图标主色。\n\n```jsx\nimport { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';\n\nsetTwoToneColor('#eb2f96');\ngetTwoToneColor(); // #eb2f96\n```\n\n### 自定义 font 图标\n\n在 `3.9.0` 之后，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。\n\n```js\nimport { createFromIconfontCN } from '@ant-design/icons';\n\nconst MyIcon = createFromIconfontCN({\n scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成\n});\n\nReactDOM.render(<MyIcon type=\"icon-example\" />, mountedNode);\n```\n\n其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。\n\noptions 的配置项如下：\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | { \\[key: string]: any } | {} | |\n| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \\| string[] | - | |\n\n在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。\n\n见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 js 地址。\n\n### 自定义 SVG 图标\n\n如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr 文档](https://github.com/smooth-code/svgr#options)。\n\n```js\n// webpack.config.js\n{\n test: /\\.svg(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\n use: [\n {\n loader: 'babel-loader',\n },\n {\n loader: '@svgr/webpack',\n options: {\n babel: false,\n icon: true,\n },\n },\n ],\n}\n```\n\n```jsx\nimport Icon from '@ant-design/icons';\nimport MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.\n// in create-react-app:\n// import { ReactComponent as MessageSvg } from 'path/to/message.svg';\n\nReactDOM.render(<Icon component={MessageSvg} />, mountNode);\n```\n\n`Icon` 中的 `component` 组件的接受的属性如下：\n\n| 字段 | 说明 | 类型 | 只读值 | 版本 |\n| --------- | ----------------------- | ---------------- | -------------- | ---- |\n| className | 计算后的 `svg` 类名 | string | - | |\n| fill | `svg` 元素填充的颜色 | string | `currentColor` | |\n| height | `svg` 元素高度 | string \\| number | `1em` | |\n| style | 计算后的 `svg` 元素样式 | CSSProperties | - | |\n| width | `svg` 元素宽度 | string \\| number | `1em` | |\n"
    },
    {
      "name": "Image",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- When you need to display pictures.\n- Display when loading a large image or fault tolerant handling when loading fail.",
      "whenToUseZh": "- 需要展示图片时使用。\n- 加载大图时显示 loading 或加载失败时容错处理。",
      "props": [
        {
          "name": "alt",
          "type": "string",
          "default": "-",
          "description": "Image description",
          "since": "4.6.0",
          "descriptionZh": "图像描述"
        },
        {
          "name": "fallback",
          "type": "string",
          "default": "-",
          "description": "Load failure fault-tolerant src",
          "since": "4.6.0",
          "descriptionZh": "加载失败容错地址"
        },
        {
          "name": "height",
          "type": "string | number",
          "default": "-",
          "description": "Image height",
          "since": "4.6.0",
          "descriptionZh": "图像高度"
        },
        {
          "name": "placeholder",
          "type": "ReactNode",
          "default": "-",
          "description": "Load placeholder, use default placeholder when set `true`",
          "since": "4.6.0",
          "descriptionZh": "加载占位, 为 `true` 时使用默认占位"
        },
        {
          "name": "preview",
          "type": "boolean",
          "default": "true",
          "description": "Whether to enable the preview",
          "since": "4.6.0",
          "descriptionZh": "是否开启预览"
        },
        {
          "name": "src",
          "type": "string",
          "default": "-",
          "description": "Image path",
          "since": "4.6.0",
          "descriptionZh": "图片地址"
        },
        {
          "name": "width",
          "type": "string | number",
          "default": "-",
          "description": "Image width",
          "since": "4.6.0",
          "descriptionZh": "图像宽度"
        }
      ],
      "tokens": [
        {
          "name": "previewOperationColor",
          "type": "string",
          "default": "",
          "description": "Color of preview operation icon",
          "descriptionZh": "预览操作图标颜色"
        },
        {
          "name": "previewOperationColorDisabled",
          "type": "string",
          "default": "",
          "description": "Disabled color of preview operation icon",
          "descriptionZh": "预览操作图标禁用颜色"
        },
        {
          "name": "previewOperationHoverColor",
          "type": "string",
          "default": "",
          "description": "Color of hovered preview operation icon",
          "descriptionZh": "预览操作图标悬浮颜色"
        },
        {
          "name": "previewOperationSize",
          "type": "number",
          "default": "",
          "description": "Size of preview operation icon",
          "descriptionZh": "预览操作图标大小"
        },
        {
          "name": "progressAnimationDuration",
          "type": "string",
          "default": "",
          "description": "Base duration of loading animation",
          "descriptionZh": "加载动画基础时长"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of preview popup",
          "descriptionZh": "预览浮层 z-index"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "图片",
      "since": "4.6.0",
      "doc": "\nPreviewable image.\n\n## When To Use\n\n- When you need to display pictures.\n- Display when loading a large image or fault tolerant handling when loading fail.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| alt | Image description | string | - | 4.6.0 |\n| fallback | Load failure fault-tolerant src | string | - | 4.6.0 |\n| height | Image height | string \\| number | - | 4.6.0 |\n| placeholder | Load placeholder, use default placeholder when set `true` | ReactNode | - | 4.6.0 |\n| preview | Whether to enable the preview | boolean | true | 4.6.0 |\n| src | Image path | string | - | 4.6.0 |\n| width | Image width | string \\| number | - | 4.6.0 |\n\nOther attributes [<img\\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)\n",
      "docZh": "\n可预览的图片。\n\n## 何时使用\n\n- 需要展示图片时使用。\n- 加载大图时显示 loading 或加载失败时容错处理。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ----------- | ---------------------------------- | ---------------- | ------ | ----- |\n| alt | 图像描述 | string | - | 4.6.0 |\n| fallback | 加载失败容错地址 | string | - | 4.6.0 |\n| height | 图像高度 | string \\| number | - | 4.6.0 |\n| placeholder | 加载占位, 为 `true` 时使用默认占位 | ReactNode | - | 4.6.0 |\n| preview | 是否开启预览 | boolean | true | 4.6.0 |\n| src | 图片地址 | string | - | 4.6.0 |\n| width | 图像宽度 | string \\| number | - | 4.6.0 |\n\n其他属性见 [<img\\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)\n"
    },
    {
      "name": "Input",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "- A user input in a form field is needed.\n- A search input is required.",
      "whenToUseZh": "- 需要用户输入表单域内容时。\n- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。",
      "props": [
        {
          "name": "addonAfter",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The label text displayed after (on the right side of) the input field",
          "since": "-",
          "descriptionZh": "带标签的 input，设置后置标签"
        },
        {
          "name": "addonBefore",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The label text displayed before (on the left side of) the input field",
          "since": "-",
          "descriptionZh": "带标签的 input，设置前置标签"
        },
        {
          "name": "defaultValue",
          "type": "string",
          "default": "-",
          "description": "The initial input content",
          "descriptionZh": "输入框默认内容"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Whether the input is disabled",
          "descriptionZh": "是否禁用状态，默认为 false"
        },
        {
          "name": "id",
          "type": "string",
          "default": "-",
          "description": "The ID for input",
          "descriptionZh": "输入框的 id"
        },
        {
          "name": "maxLength",
          "type": "number",
          "default": "-",
          "description": "The max length",
          "descriptionZh": "最大长度"
        },
        {
          "name": "prefix",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The prefix icon for the Input",
          "since": "-",
          "descriptionZh": "带有前缀图标的 input"
        },
        {
          "name": "size",
          "type": "string",
          "default": "`default`",
          "description": "The size of the input box. Note: in the context of a form, the `large` size is used",
          "since": "`small`",
          "descriptionZh": "`Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small`"
        },
        {
          "name": "suffix",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The suffix icon for the Input",
          "since": "-",
          "descriptionZh": "带有后缀图标的 input"
        },
        {
          "name": "type",
          "type": "string",
          "default": "`text`",
          "description": "The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type=\"textarea\"`)",
          "descriptionZh": "声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type=\"textarea\"`)"
        },
        {
          "name": "value",
          "type": "string",
          "default": "-",
          "description": "The input content value",
          "descriptionZh": "输入框内容"
        },
        {
          "name": "onChange",
          "type": "function(e)",
          "default": "-",
          "description": "Callback when user input",
          "descriptionZh": "输入框内容变化时的回调"
        },
        {
          "name": "onPressEnter",
          "type": "function(e)",
          "default": "-",
          "description": "The callback function that is triggered when Enter key is pressed",
          "descriptionZh": "按下回车的回调"
        },
        {
          "name": "allowClear",
          "type": "boolean",
          "default": "false",
          "description": "If allow to remove input content with clear icon",
          "descriptionZh": "可以点击清除图标删除内容"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Whether has border style",
          "since": "4.5.0",
          "descriptionZh": "是否有边框"
        },
        {
          "name": "autoSize",
          "type": "boolean | object",
          "default": "false",
          "description": "Height autosize feature, can be set to true \\",
          "since": "object",
          "descriptionZh": "自适应内容高度，可设置为 true \\"
        },
        {
          "name": "defaultValue",
          "type": "string",
          "default": "-",
          "description": "The initial input content",
          "descriptionZh": "输入框默认内容"
        },
        {
          "name": "value",
          "type": "string",
          "default": "-",
          "description": "The input content value",
          "descriptionZh": "输入框内容"
        },
        {
          "name": "onPressEnter",
          "type": "function(e)",
          "default": "-",
          "description": "The callback function that is triggered when Enter key is pressed",
          "descriptionZh": "按下回车的回调"
        },
        {
          "name": "allowClear",
          "type": "boolean",
          "default": "false",
          "description": "If allow to remove input content with clear icon",
          "descriptionZh": "可以点击清除图标删除内容"
        },
        {
          "name": "onResize",
          "type": "function({ width, height })",
          "default": "-",
          "description": "The callback function that is triggered when resize",
          "descriptionZh": "resize 回调"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Whether has border style",
          "since": "4.5.0",
          "descriptionZh": "是否有边框"
        },
        {
          "name": "enterButton",
          "type": "boolean | ReactNode",
          "default": "false",
          "description": "Whether to show an enter button after input. This property conflicts with the `addonAfter` property",
          "descriptionZh": "是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。"
        },
        {
          "name": "onSearch",
          "type": "function(value, event)",
          "default": "-",
          "description": "The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key",
          "descriptionZh": "点击搜索或按下回车键时的回调"
        },
        {
          "name": "loading",
          "type": "boolean",
          "default": "false",
          "description": "Search box with loading",
          "descriptionZh": "搜索 loading"
        },
        {
          "name": "compact",
          "type": "boolean",
          "default": "false",
          "description": "Whether use compact style",
          "descriptionZh": "是否用紧凑模式"
        },
        {
          "name": "size",
          "type": "string",
          "default": "`default`",
          "description": "The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small`",
          "descriptionZh": "`Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small`"
        },
        {
          "name": "visibilityToggle",
          "type": "boolean",
          "default": "true",
          "description": "Whether show toggle button",
          "descriptionZh": "是否显示切换按钮"
        },
        {
          "name": "iconRender",
          "type": "(visible) => ReactNode",
          "default": "(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)",
          "description": "Custom toggle button",
          "since": "4.3.0",
          "descriptionZh": "自定义切换按钮"
        }
      ],
      "tokens": [
        {
          "name": "activeBg",
          "type": "string",
          "default": "",
          "description": "Background color when the input box is activated",
          "descriptionZh": "输入框激活状态时背景颜色"
        },
        {
          "name": "activeBorderColor",
          "type": "string",
          "default": "",
          "description": "Active border color",
          "descriptionZh": "激活态边框色"
        },
        {
          "name": "activeShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active",
          "descriptionZh": "激活态阴影"
        },
        {
          "name": "addonBg",
          "type": "string",
          "default": "",
          "description": "Background color of addon",
          "descriptionZh": "前/后置标签背景色"
        },
        {
          "name": "errorActiveShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active in error status",
          "descriptionZh": "错误状态时激活态阴影"
        },
        {
          "name": "hoverBg",
          "type": "string",
          "default": "",
          "description": "Background color when the input box hovers",
          "descriptionZh": "输入框hover状态时背景颜色"
        },
        {
          "name": "hoverBorderColor",
          "type": "string",
          "default": "",
          "description": "Hover border color",
          "descriptionZh": "悬浮态边框色"
        },
        {
          "name": "inputFontSize",
          "type": "number",
          "default": "",
          "description": "Font size",
          "descriptionZh": "字体大小"
        },
        {
          "name": "inputFontSizeLG",
          "type": "number",
          "default": "",
          "description": "Font size of large",
          "descriptionZh": "大号字体大小"
        },
        {
          "name": "inputFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small",
          "descriptionZh": "小号字体大小"
        },
        {
          "name": "paddingBlock",
          "type": "number",
          "default": "",
          "description": "Vertical padding of input",
          "descriptionZh": "输入框纵向内边距"
        },
        {
          "name": "paddingBlockLG",
          "type": "number",
          "default": "",
          "description": "Vertical padding of large input",
          "descriptionZh": "大号输入框纵向内边距"
        },
        {
          "name": "paddingBlockSM",
          "type": "number",
          "default": "",
          "description": "Vertical padding of small input",
          "descriptionZh": "小号输入框纵向内边距"
        },
        {
          "name": "paddingInline",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of input",
          "descriptionZh": "输入框横向内边距"
        },
        {
          "name": "paddingInlineLG",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of large input",
          "descriptionZh": "大号输入框横向内边距"
        },
        {
          "name": "paddingInlineSM",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of small input",
          "descriptionZh": "小号输入框横向内边距"
        },
        {
          "name": "warningActiveShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active in warning status",
          "descriptionZh": "警告状态时激活态阴影"
        }
      ],
      "faq": [
        {
          "question": "Why Input lose focus when change `prefix/suffix`",
          "answer": "When Input dynamic add or remove `prefix/suffix` will make React recreate the dom structure and new input will be not focused. You can set an empty `<span />` element to keep the dom structure:\n\n```jsx\nconst suffix = condition ? <Icon type=\"smile\" /> : <span />;\n\n<Input suffix={suffix} />;\n```"
        }
      ],
      "subComponents": [
        "Input.TextArea"
      ],
      "categoryZh": "数据录入",
      "nameZh": "输入框",
      "since": "4.0.0",
      "doc": "\nA basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.\n\n## When To Use\n\n- A user input in a form field is needed.\n- A search input is required.\n\n## API\n\n### Input\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| addonAfter | The label text displayed after (on the right side of) the input field | string \\| ReactNode | - | |\n| addonBefore | The label text displayed before (on the left side of) the input field | string \\| ReactNode | - | |\n| defaultValue | The initial input content | string | - | |\n| disabled | Whether the input is disabled | boolean | false | |\n| id | The ID for input | string | - | |\n| maxLength | The max length | number | - | |\n| prefix | The prefix icon for the Input | string \\| ReactNode | - | |\n| size | The size of the input box. Note: in the context of a form, the `large` size is used | `large` \\| `middle` \\| `small` | - | |\n| suffix | The suffix icon for the Input | string \\| ReactNode | - | |\n| type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type=\"textarea\"`) | string | `text` | |\n| value | The input content value | string | - | |\n| onChange | Callback when user input | function(e) | - | |\n| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | |\n| allowClear | If allow to remove input content with clear icon | boolean | false | |\n| bordered | Whether has border style | boolean | true | 4.5.0 |\n\n> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.\n\nThe rest of the props of Input are exactly the same as the original [input](https://facebook.github.io/react/docs/events.html#supported-events).\n\n### Input.TextArea\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| autoSize | Height autosize feature, can be set to true \\| false or an object { minRows: 2, maxRows: 6 } | boolean \\| object | false | |\n| defaultValue | The initial input content | string | - | |\n| value | The input content value | string | - | |\n| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | |\n| allowClear | If allow to remove input content with clear icon | boolean | false | |\n| onResize | The callback function that is triggered when resize | function({ width, height }) | - | |\n| bordered | Whether has border style | boolean | true | 4.5.0 |\n\nThe rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).\n\n#### Input.Search\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \\| ReactNode | false |\n| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - |\n| loading | Search box with loading | boolean | false |\n\nSupports all props of `Input`.\n\n#### Input.Group\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| compact | Whether use compact style | boolean | false |\n| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |\n\n```jsx\n<Input.Group>\n <input />\n <input />\n</Input.Group>\n```\n\n#### Input.Password\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| visibilityToggle | Whether show toggle button | boolean | true | |\n| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? &lt;EyeOutlined /> : &lt;EyeInvisibleOutlined />) | 4.3.0 |\n\n## FAQ\n\n### Why Input lose focus when change `prefix/suffix`\n\nWhen Input dynamic add or remove `prefix/suffix` will make React recreate the dom structure and new input will be not focused. You can set an empty `<span />` element to keep the dom structure:\n\n```jsx\nconst suffix = condition ? <Icon type=\"smile\" /> : <span />;\n\n<Input suffix={suffix} />;\n```\n",
      "docZh": "\n通过鼠标或键盘输入内容，是最基础的表单域的包装。\n\n## 何时使用\n\n- 需要用户输入表单域内容时。\n- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。\n\n## API\n\n### Input\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| addonAfter | 带标签的 input，设置后置标签 | string \\| ReactNode | - | |\n| addonBefore | 带标签的 input，设置前置标签 | string \\| ReactNode | - | |\n| defaultValue | 输入框默认内容 | string | - | |\n| disabled | 是否禁用状态，默认为 false | boolean | false | |\n| id | 输入框的 id | string | - | |\n| maxLength | 最大长度 | number | - | |\n| prefix | 带有前缀图标的 input | string \\| ReactNode | - | |\n| size | 控件大小。注：标准表单内的输入框大小限制为 `large` | `large` \\| `middle` \\| `small` | - | |\n| suffix | 带有后缀图标的 input | string \\| ReactNode | - | |\n| type | 声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type=\"textarea\"`) | string | `text` | |\n| value | 输入框内容 | string | - | |\n| onChange | 输入框内容变化时的回调 | function(e) | - | |\n| onPressEnter | 按下回车的回调 | function(e) | - | |\n| allowClear | 可以点击清除图标删除内容 | boolean | - | |\n| bordered | 是否有边框 | boolean | true | 4.5.0 |\n\n> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。\n\nInput 的其他属性和 React 自带的 [input](https://facebook.github.io/react/docs/events.html#supported-events) 一致。\n\n### Input.TextArea\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| autoSize | 自适应内容高度，可设置为 true \\| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \\| object | false | |\n| defaultValue | 输入框默认内容 | string | - | |\n| value | 输入框内容 | string | - | |\n| onPressEnter | 按下回车的回调 | function(e) | - | |\n| allowClear | 可以点击清除图标删除内容 | boolean | false | |\n| onResize | resize 回调 | function({ width, height }) | - | |\n| bordered | 是否有边框 | boolean | true | 4.5.0 |\n\n`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。\n\n#### Input.Search\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \\| ReactNode | false |\n| onSearch | 点击搜索或按下回车键时的回调 | function(value, event) | - |\n| loading | 搜索 loading | boolean | false |\n\n其余属性和 Input 一致。\n\n#### Input.Group\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| compact | 是否用紧凑模式 | boolean | false |\n| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |\n\n```jsx\n<Input.Group>\n <input />\n <input />\n</Input.Group>\n```\n\n#### Input.Password\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| visibilityToggle | 是否显示切换按钮 | boolean | true | |\n| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? &lt;EyeOutlined /> : &lt;EyeInvisibleOutlined />) | 4.3.0 |\n\n## FAQ\n\n### 为什么我动态改变 `prefix/suffix` 时，Input 会失去焦点？\n\n当 Input 动态添加或者删除 `prefix/suffix` 时，React 会重新创建 DOM 结构而新的 input 是没有焦点的。你可以预设一个空的 `<span />` 来保持 DOM 结构不变：\n\n```jsx\nconst suffix = condition ? <Icon type=\"smile\" /> : <span />;\n\n<Input suffix={suffix} />;\n```\n"
    },
    {
      "name": "InputNumber",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "When a numeric value needs to be provided.",
      "whenToUseZh": "当需要获取标准数值时。",
      "props": [
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "If get focus when component mounted",
          "descriptionZh": ""
        },
        {
          "name": "defaultValue",
          "type": "number",
          "default": "-",
          "description": "The initial value",
          "descriptionZh": ""
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "If disable the input",
          "descriptionZh": ""
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "default": "false",
          "description": "If readonly the input",
          "descriptionZh": ""
        },
        {
          "name": "formatter",
          "type": "function(value: number | string): string",
          "default": "-",
          "description": "Specifies the format of the value presented",
          "descriptionZh": ""
        },
        {
          "name": "max",
          "type": "number",
          "default": "[Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)",
          "description": "The max value",
          "descriptionZh": ""
        },
        {
          "name": "min",
          "type": "number",
          "default": "[Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER)",
          "description": "The min value",
          "descriptionZh": ""
        },
        {
          "name": "parser",
          "type": "function(string): number",
          "default": "-",
          "description": "Specifies the value extracted from formatter",
          "descriptionZh": ""
        },
        {
          "name": "precision",
          "type": "number",
          "default": "-",
          "description": "The precision of input value",
          "descriptionZh": ""
        },
        {
          "name": "decimalSeparator",
          "type": "string",
          "default": "-",
          "description": "Decimal separator",
          "descriptionZh": ""
        },
        {
          "name": "size",
          "type": "`large` | `middle` | `small`",
          "default": "-",
          "description": "The height of input box",
          "descriptionZh": ""
        },
        {
          "name": "step",
          "type": "number | string",
          "default": "1",
          "description": "The number to which the current value is increased or decreased. It can be an integer or decimal",
          "descriptionZh": ""
        },
        {
          "name": "value",
          "type": "number",
          "default": "-",
          "description": "The current value",
          "descriptionZh": ""
        },
        {
          "name": "onChange",
          "type": "function(value: number | string)",
          "default": "-",
          "description": "The callback triggered when the value is changed",
          "descriptionZh": ""
        },
        {
          "name": "onPressEnter",
          "type": "function(e)",
          "default": "-",
          "description": "The callback function that is triggered when Enter key is pressed",
          "descriptionZh": ""
        }
      ],
      "tokens": [
        {
          "name": "activeBg",
          "type": "string",
          "default": "",
          "description": "Background color when the input box is activated",
          "descriptionZh": "输入框激活状态时背景颜色"
        },
        {
          "name": "activeBorderColor",
          "type": "string",
          "default": "",
          "description": "Active border color",
          "descriptionZh": "激活态边框色"
        },
        {
          "name": "activeShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active",
          "descriptionZh": "激活态阴影"
        },
        {
          "name": "addonBg",
          "type": "string",
          "default": "",
          "description": "Background color of addon",
          "descriptionZh": "前/后置标签背景色"
        },
        {
          "name": "controlWidth",
          "type": "number",
          "default": "",
          "description": "Width of input",
          "descriptionZh": "输入框宽度"
        },
        {
          "name": "errorActiveShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active in error status",
          "descriptionZh": "错误状态时激活态阴影"
        },
        {
          "name": "filledHandleBg",
          "type": "string",
          "default": "",
          "description": "Background color of handle in filled variant",
          "descriptionZh": "面性变体操作按钮背景色"
        },
        {
          "name": "handleActiveBg",
          "type": "string",
          "default": "",
          "description": "Active background color of handle",
          "descriptionZh": "操作按钮激活背景色"
        },
        {
          "name": "handleBg",
          "type": "string",
          "default": "",
          "description": "Background color of handle",
          "descriptionZh": "操作按钮背景色"
        },
        {
          "name": "handleBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of handle",
          "descriptionZh": "操作按钮边框颜色"
        },
        {
          "name": "handleFontSize",
          "type": "number",
          "default": "",
          "description": "Icon size of control button",
          "descriptionZh": "操作按钮图标大小"
        },
        {
          "name": "handleHoverColor",
          "type": "string",
          "default": "",
          "description": "Hover color of handle",
          "descriptionZh": "操作按钮悬浮颜色"
        },
        {
          "name": "handleVisible",
          "type": "true | \"auto\"",
          "default": "",
          "description": "Handle visible",
          "descriptionZh": "操作按钮可见性"
        },
        {
          "name": "handleWidth",
          "type": "number",
          "default": "",
          "description": "Width of control button",
          "descriptionZh": "操作按钮宽度"
        },
        {
          "name": "hoverBg",
          "type": "string",
          "default": "",
          "description": "Background color when the input box hovers",
          "descriptionZh": "输入框hover状态时背景颜色"
        },
        {
          "name": "hoverBorderColor",
          "type": "string",
          "default": "",
          "description": "Hover border color",
          "descriptionZh": "悬浮态边框色"
        },
        {
          "name": "inputFontSize",
          "type": "number",
          "default": "",
          "description": "Font size",
          "descriptionZh": "字体大小"
        },
        {
          "name": "inputFontSizeLG",
          "type": "number",
          "default": "",
          "description": "Font size of large",
          "descriptionZh": "大号字体大小"
        },
        {
          "name": "inputFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small",
          "descriptionZh": "小号字体大小"
        },
        {
          "name": "paddingBlock",
          "type": "number",
          "default": "",
          "description": "Vertical padding of input",
          "descriptionZh": "输入框纵向内边距"
        },
        {
          "name": "paddingBlockLG",
          "type": "number",
          "default": "",
          "description": "Vertical padding of large input",
          "descriptionZh": "大号输入框纵向内边距"
        },
        {
          "name": "paddingBlockSM",
          "type": "number",
          "default": "",
          "description": "Vertical padding of small input",
          "descriptionZh": "小号输入框纵向内边距"
        },
        {
          "name": "paddingInline",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of input",
          "descriptionZh": "输入框横向内边距"
        },
        {
          "name": "paddingInlineLG",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of large input",
          "descriptionZh": "大号输入框横向内边距"
        },
        {
          "name": "paddingInlineSM",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of small input",
          "descriptionZh": "小号输入框横向内边距"
        },
        {
          "name": "warningActiveShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active in warning status",
          "descriptionZh": "警告状态时激活态阴影"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "数字输入框",
      "since": "4.0.0",
      "doc": "\nEnter a number within certain range with the mouse or keyboard.\n\n## When To Use\n\nWhen a numeric value needs to be provided.\n\n## API\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| autoFocus | If get focus when component mounted | boolean | false |\n| defaultValue | The initial value | number | - |\n| disabled | If disable the input | boolean | false |\n| readOnly | If readonly the input | boolean | false |\n| formatter | Specifies the format of the value presented | function(value: number \\| string): string | - |\n| max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) |\n| min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) |\n| parser | Specifies the value extracted from formatter | function(string): number | - |\n| precision | The precision of input value | number | - |\n| decimalSeparator | Decimal separator | string | - |\n| size | The height of input box | `large` \\| `middle` \\| `small` | - |\n| step | The number to which the current value is increased or decreased. It can be an integer or decimal | number \\| string | 1 |\n| value | The current value | number | - |\n| onChange | The callback triggered when the value is changed | function(value: number \\| string) | - |\n| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |\n\n## Methods\n\n| Name | Description |\n| ------- | ------------ |\n| blur() | Remove focus |\n| focus() | Get focus |\n\n## Notes\n\nPer issues [#21158](https://github.com/ant-design/ant-design/issues/21158), [#17344](https://github.com/ant-design/ant-design/issues/17344), [#9421](https://github.com/ant-design/ant-design/issues/9421), and [documentation about inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_inputs), it appears this community does not support native inclusion of the `type=\"number\"` in the `<Input />` attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.\n",
      "docZh": "\n通过鼠标或键盘，输入范围内的数值。\n\n## 何时使用\n\n当需要获取标准数值时。\n\n## API\n\n属性如下\n\n| 成员 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| autoFocus | 自动获取焦点 | boolean | false |\n| defaultValue | 初始值 | number | - |\n| disabled | 禁用 | boolean | false |\n| readOnly | 只读 | boolean | false |\n| formatter | 指定输入框展示值的格式 | function(value: number \\| string): string | - |\n| max | 最大值 | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) |\n| min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) |\n| parser | 指定从 `formatter` 里转换回数字的方式，和 `formatter` 搭配使用 | function(string): number | - |\n| precision | 数值精度 | number | - |\n| decimalSeparator | 小数点 | string | - |\n| size | 输入框大小 | `large` \\| `middle` \\| `small` | - |\n| step | 每次改变步数，可以为小数 | number \\| string | 1 |\n| value | 当前值 | number | - |\n| onChange | 变化回调 | function(value: number \\| string) | - |\n| onPressEnter | 按下回车的回调 | function(e) | - |\n\n## 方法\n\n| 名称 | 描述 |\n| ------- | -------- |\n| blur() | 移除焦点 |\n| focus() | 获取焦点 |\n"
    },
    {
      "name": "Layout",
      "category": "Layout",
      "description": "",
      "props": [
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "Container className",
          "descriptionZh": "容器 className"
        },
        {
          "name": "hasSider",
          "type": "boolean",
          "default": "-",
          "description": "Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering",
          "descriptionZh": "表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "To customize the styles",
          "descriptionZh": "指定样式"
        },
        {
          "name": "breakpoint",
          "type": "`xs` | `sm` | `md` | `lg` | `xl` | `xxl`",
          "default": "-",
          "description": "[Breakpoints](/components/grid/#Col) of the responsive layout",
          "descriptionZh": "触发响应式布局的[断点](/components/grid/#Col)"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "Container className",
          "descriptionZh": "容器 className"
        },
        {
          "name": "collapsed",
          "type": "boolean",
          "default": "-",
          "description": "To set the current status",
          "descriptionZh": "当前收起状态"
        },
        {
          "name": "collapsedWidth",
          "type": "number",
          "default": "80",
          "description": "Width of the collapsed sidebar, by setting to 0 a special trigger will appear",
          "descriptionZh": "收缩宽度，设置为 0 会出现特殊 trigger"
        },
        {
          "name": "collapsible",
          "type": "boolean",
          "default": "false",
          "description": "Whether can be collapsed",
          "descriptionZh": "是否可收起"
        },
        {
          "name": "defaultCollapsed",
          "type": "boolean",
          "default": "false",
          "description": "To set the initial status",
          "descriptionZh": "是否默认收起"
        },
        {
          "name": "onBreakpoint",
          "type": "(broken) => {}",
          "default": "-",
          "description": "The callback function, executed when [breakpoints](/components/grid/#API) changed",
          "descriptionZh": "触发响应式布局[断点](/components/grid/#API)时的回调"
        },
        {
          "name": "onCollapse",
          "type": "(collapsed, type) => {}",
          "default": "-",
          "description": "The callback function, executed by clicking the trigger or activating the responsive layout",
          "descriptionZh": "展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发"
        },
        {
          "name": "reverseArrow",
          "type": "boolean",
          "default": "false",
          "description": "Reverse direction of arrow, for a sider that expands from the right",
          "descriptionZh": "翻转折叠提示箭头的方向，当 Sider 在右边时可以使用"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "To customize the styles",
          "descriptionZh": "指定样式"
        },
        {
          "name": "theme",
          "type": "`light` | `dark`",
          "default": "`dark`",
          "description": "Color theme of the sidebar",
          "descriptionZh": "主题颜色"
        },
        {
          "name": "trigger",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Specify the customized trigger, set to null to hide the trigger",
          "descriptionZh": "自定义 trigger，设置为 null 时隐藏 trigger"
        },
        {
          "name": "width",
          "type": "number | string",
          "default": "200",
          "description": "Width of the sidebar",
          "descriptionZh": "宽度"
        },
        {
          "name": "zeroWidthTriggerStyle",
          "type": "object",
          "default": "-",
          "description": "To customize the styles of the special trigger that appears when `collapsedWidth` is 0",
          "descriptionZh": "指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式"
        }
      ],
      "tokens": [
        {
          "name": "bodyBg",
          "type": "string",
          "default": "",
          "description": "Background Color of body",
          "descriptionZh": "主体部分背景色"
        },
        {
          "name": "footerBg",
          "type": "string",
          "default": "",
          "description": "Background Color of footer",
          "descriptionZh": "页脚背景色"
        },
        {
          "name": "footerPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of footer",
          "descriptionZh": "页脚内边距"
        },
        {
          "name": "headerBg",
          "type": "string",
          "default": "",
          "description": "Background Color of header",
          "descriptionZh": "顶部背景色"
        },
        {
          "name": "headerColor",
          "type": "string",
          "default": "",
          "description": "Text color of header",
          "descriptionZh": "顶部文字颜色"
        },
        {
          "name": "headerHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of header",
          "descriptionZh": "顶部高度"
        },
        {
          "name": "headerPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of header",
          "descriptionZh": "顶部内边距"
        },
        {
          "name": "lightSiderBg",
          "type": "string",
          "default": "",
          "description": "Background Color of light theme sider",
          "descriptionZh": "亮色主题侧边栏背景色"
        },
        {
          "name": "lightTriggerBg",
          "type": "string",
          "default": "",
          "description": "Background Color of light theme sider trigger",
          "descriptionZh": "亮色主题侧边栏开关背景色"
        },
        {
          "name": "lightTriggerColor",
          "type": "string",
          "default": "",
          "description": "Color of light theme sider trigger",
          "descriptionZh": "亮色主题侧边栏开关颜色"
        },
        {
          "name": "siderBg",
          "type": "string",
          "default": "",
          "description": "Background Color of sider",
          "descriptionZh": "侧边栏背景色"
        },
        {
          "name": "triggerBg",
          "type": "string",
          "default": "",
          "description": "Background Color of sider trigger",
          "descriptionZh": "侧边栏开关背景色"
        },
        {
          "name": "triggerColor",
          "type": "string",
          "default": "",
          "description": "Color of sider trigger",
          "descriptionZh": "侧边栏开关颜色"
        },
        {
          "name": "triggerHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of sider trigger",
          "descriptionZh": "侧边栏开关高度"
        },
        {
          "name": "zeroTriggerHeight",
          "type": "number",
          "default": "",
          "description": "Height of sider trigger when collapse is 0",
          "descriptionZh": "collapse 为 0 时侧边栏开关高度"
        },
        {
          "name": "zeroTriggerWidth",
          "type": "number",
          "default": "",
          "description": "Width of sider trigger when collapse is 0",
          "descriptionZh": "collapse 为 0 时侧边栏开关宽度"
        }
      ],
      "subComponents": [
        "Layout.Sider"
      ],
      "categoryZh": "布局",
      "nameZh": "布局",
      "since": "4.0.0",
      "doc": "\nHandling the overall layout of a page.\n\n## Specification\n\n### Size\n\nThe first level navigation is left aligned near a logo, and the secondary menu is right aligned.\n\n- Top Navigation: the height of the first level navigation `64px`, the second level navigation `48px`.\n- Top Navigation (for landing pages): the height of the first level navigation `80px`, the second level navigation `56px`.\n- Calculation formula of a top navigation: `48+8n`.\n- Calculation formula of an aside navigation: `200+8n`.\n\n### Interaction rules\n\n- The first level navigation and the last level navigation should be distinguishable by visualization;\n- The current item should have the highest priority of visualization;\n- When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;\n- The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.\n\n## Visualization rules\n\nStyle of a navigation should conform to its level.\n\n- **Emphasis by colorblock**\n\n When background color is a deep color, you can use this pattern for the parent level navigation item of the current page.\n\n- **The highlight match stick**\n\n When background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.\n\n- **Highlighted font**\n\n From the visualization aspect, a highlighted font is stronger than colorblock; this pattern is often used for the parent level of the current item.\n\n- **Enlarge the size of the font**\n\n `12px`, `14px` is a standard font size of navigations, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.\n\n## Component Overview\n\n- `Layout`: The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` itself can be nested, and can be placed in any parent container.\n- `Header`: The top layout with the default style, in which any element can be nested, and must be placed in `Layout`.\n- `Sider`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `Layout`.\n- `Content`: The content layout with the default style, in which any element can be nested, and must be placed in `Layout`.\n- `Footer`: The bottom layout with the default style, in which any element can be nested, and must be placed in `Layout`.\n\n> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).\n\n## API\n\n```jsx\n<Layout>\n <Header>header</Header>\n <Layout>\n <Sider>left sidebar</Sider>\n <Content>main content</Content>\n <Sider>right sidebar</Sider>\n </Layout>\n <Footer>footer</Footer>\n</Layout>\n```\n\n### Layout\n\nThe wrapper.\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| className | Container className | string | - |\n| hasSider | Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |\n| style | To customize the styles | CSSProperties | - |\n\n> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.\n\n### Layout.Sider\n\nThe sidebar.\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| breakpoint | [Breakpoints](/components/grid/#Col) of the responsive layout | `xs` \\| `sm` \\| `md` \\| `lg` \\| `xl` \\| `xxl` | - |\n| className | Container className | string | - |\n| collapsed | To set the current status | boolean | - |\n| collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 |\n| collapsible | Whether can be collapsed | boolean | false |\n| defaultCollapsed | To set the initial status | boolean | false |\n| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#API) changed | (broken) => {} | - |\n| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |\n| reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false |\n| style | To customize the styles | CSSProperties | - |\n| theme | Color theme of the sidebar | `light` \\| `dark` | `dark` |\n| trigger | Specify the customized trigger, set to null to hide the trigger | string \\| ReactNode | - |\n| width | Width of the sidebar | number \\| string | 200 |\n| zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |\n\n#### breakpoint width\n\n```js\n{\n xs: '480px',\n sm: '576px',\n md: '768px',\n lg: '992px',\n xl: '1200px',\n xxl: '1600px',\n}\n```\n\n<style>\n [data-theme=\"dark\"].site-layout-background {\n background: #141414;\n }\n [data-theme=\"dark\"].site-layout-header-background {\n background: #1f1f1f;\n }\n</style>\n",
      "docZh": "\n协助进行页面级整体布局。\n\n## 设计规则\n\n### 尺寸\n\n一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。\n\n- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。\n- 顶部导航（展示类页面）：一级导航高度 `80px`，二级导航 `56px`。\n- 顶部导航高度的范围计算公式为：`48+8n`。\n- 侧边导航宽度的范围计算公式：`200+8n`。\n\n### 交互\n\n- 一级导航和末级的导航需要在可视化的层面被强调出来；\n- 当前项应该在呈现上优先级最高；\n- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；\n- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。\n\n### 视觉\n\n导航样式上需要根据信息层级合理的选择样式：\n\n- **大色块强调**\n\n 建议用于底色为深色系时，当前页面父级的导航项。\n\n- **高亮火柴棍**\n\n 当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。\n\n- **字体高亮变色**\n\n 从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。\n\n- **字体放大**\n\n `12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。\n\n## 组件概述\n\n- `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。\n- `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\n- `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。\n- `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\n- `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\n\n> 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。\n\n## API\n\n```jsx\n<Layout>\n <Header>header</Header>\n <Layout>\n <Sider>left sidebar</Sider>\n <Content>main content</Content>\n <Sider>right sidebar</Sider>\n </Layout>\n <Footer>footer</Footer>\n</Layout>\n```\n\n### Layout\n\n布局容器。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| className | 容器 className | string | - |\n| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |\n| style | 指定样式 | CSSProperties | - |\n\n> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同\n\n### Layout.Sider\n\n侧边栏。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| breakpoint | 触发响应式布局的[断点](/components/grid/#Col) | `xs` \\| `sm` \\| `md` \\| `lg` \\| `xl` \\| `xxl` | - |\n| className | 容器 className | string | - |\n| collapsed | 当前收起状态 | boolean | - |\n| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |\n| collapsible | 是否可收起 | boolean | false |\n| defaultCollapsed | 是否默认收起 | boolean | false |\n| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - |\n| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |\n| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |\n| style | 指定样式 | CSSProperties | - |\n| theme | 主题颜色 | `light` \\| `dark` | `dark` |\n| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string \\| ReactNode | - |\n| width | 宽度 | number \\| string | 200 |\n| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |\n\n#### breakpoint width\n\n```js\n{\n xs: '480px',\n sm: '576px',\n md: '768px',\n lg: '992px',\n xl: '1200px',\n xxl: '1600px',\n}\n```\n\n<style>\n [data-theme=\"dark\"].site-layout-background {\n background: #141414;\n }\n [data-theme=\"dark\"].site-layout-header-background {\n background: #1f1f1f;\n }\n</style>\n"
    },
    {
      "name": "List",
      "category": "Data Display",
      "description": "",
      "whenToUse": "A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.",
      "whenToUseZh": "最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。",
      "props": [
        {
          "name": "bordered",
          "type": "boolean",
          "default": "false",
          "description": "Toggles rendering of the border around the list",
          "descriptionZh": "是否展示边框"
        },
        {
          "name": "footer",
          "type": "string | ReactNode",
          "default": "-",
          "description": "List footer renderer",
          "since": "-",
          "descriptionZh": "列表底部"
        },
        {
          "name": "grid",
          "type": "[object](#List-grid-props)",
          "default": "-",
          "description": "The grid type of list. You can set grid to something like {gutter: 16, column: 4}",
          "descriptionZh": "列表栅格配置"
        },
        {
          "name": "header",
          "type": "string | ReactNode",
          "default": "-",
          "description": "List header renderer",
          "since": "-",
          "descriptionZh": "列表头部"
        },
        {
          "name": "itemLayout",
          "type": "string",
          "default": "-",
          "description": "The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical`",
          "descriptionZh": "设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排"
        },
        {
          "name": "rowKey",
          "type": "string | Function(record): string",
          "default": "`key`",
          "description": "Item's unique key, could be a string or function that returns a string",
          "since": "`key`",
          "descriptionZh": ""
        },
        {
          "name": "loading",
          "type": "boolean | [SpinProps](/components/spin/#API) ()",
          "default": "false",
          "description": "Shows a loading indicator while the contents of the list are being fetched",
          "since": "false",
          "descriptionZh": "当卡片内容还在加载中时，可以用 `loading` 展示一个占位"
        },
        {
          "name": "loadMore",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Shows a load more content",
          "since": "-",
          "descriptionZh": "加载更多"
        },
        {
          "name": "locale",
          "type": "object",
          "default": "{emptyText: `No Data`}",
          "description": "The i18n text including empty text",
          "descriptionZh": "默认文案设置，目前包括空数据文案"
        },
        {
          "name": "pagination",
          "type": "boolean | object",
          "default": "false",
          "description": "Pagination [config](/components/pagination/), hide it by setting it to false",
          "since": "false",
          "descriptionZh": "对应的 `pagination` 配置, 设置 false 不显示"
        },
        {
          "name": "size",
          "type": "`default` | `large` | `small`",
          "default": "`default`",
          "description": "Size of list",
          "since": "`small`",
          "descriptionZh": "list 的尺寸"
        },
        {
          "name": "split",
          "type": "boolean",
          "default": "true",
          "description": "Toggles rendering of the split under the list item",
          "descriptionZh": "是否展示分割线"
        },
        {
          "name": "dataSource",
          "type": "any[]",
          "default": "-",
          "description": "DataSource array for list",
          "descriptionZh": "列表数据源"
        },
        {
          "name": "renderItem",
          "type": "(item) => ReactNode",
          "default": "-",
          "description": "Customize list item when using `dataSource`",
          "descriptionZh": "当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项"
        },
        {
          "name": "position",
          "type": "`top` | `bottom` | `both`",
          "default": "`bottom`",
          "description": "The specify the position of `Pagination`",
          "descriptionZh": "指定分页显示的位置"
        },
        {
          "name": "column",
          "type": "number",
          "default": "-",
          "description": "The column of grid",
          "descriptionZh": "列数"
        },
        {
          "name": "gutter",
          "type": "number",
          "default": "0",
          "description": "The spacing between grid",
          "descriptionZh": "栅格间隔"
        },
        {
          "name": "xs",
          "type": "number",
          "default": "-",
          "description": "`<576px` column of grid",
          "descriptionZh": "`<576px` 展示的列数"
        },
        {
          "name": "sm",
          "type": "number",
          "default": "-",
          "description": "`≥576px` column of grid",
          "descriptionZh": "`≥576px` 展示的列数"
        },
        {
          "name": "md",
          "type": "number",
          "default": "-",
          "description": "`≥768px` column of grid",
          "descriptionZh": "`≥768px` 展示的列数"
        },
        {
          "name": "lg",
          "type": "number",
          "default": "-",
          "description": "`≥992px` column of grid",
          "descriptionZh": "`≥992px` 展示的列数"
        },
        {
          "name": "xl",
          "type": "number",
          "default": "-",
          "description": "`≥1200px` column of grid",
          "descriptionZh": "`≥1200px` 展示的列数"
        },
        {
          "name": "xxl",
          "type": "number",
          "default": "-",
          "description": "`≥1600px` column of grid",
          "descriptionZh": "`≥1600px` 展示的列数"
        },
        {
          "name": "actions",
          "type": "Array<ReactNode>",
          "default": "-",
          "description": "The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right",
          "descriptionZh": "列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧"
        },
        {
          "name": "extra",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right",
          "since": "-",
          "descriptionZh": "额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧"
        },
        {
          "name": "avatar",
          "type": "ReactNode",
          "default": "-",
          "description": "The avatar of list item",
          "descriptionZh": "列表元素的图标"
        },
        {
          "name": "description",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The description of list item",
          "since": "-",
          "descriptionZh": "列表元素的描述内容"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The title of list item",
          "since": "-",
          "descriptionZh": "列表元素的标题"
        }
      ],
      "tokens": [
        {
          "name": "avatarMarginRight",
          "type": "MarginRight<string | number> | undefined",
          "default": "",
          "description": "Right margin of avatar",
          "descriptionZh": "头像右间距"
        },
        {
          "name": "contentWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of content",
          "descriptionZh": "内容宽度"
        },
        {
          "name": "descriptionFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of description",
          "descriptionZh": "描述文字大小"
        },
        {
          "name": "emptyTextPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of empty text",
          "descriptionZh": "空文本内边距"
        },
        {
          "name": "footerBg",
          "type": "string",
          "default": "",
          "description": "Background color of footer",
          "descriptionZh": "底部区域背景色"
        },
        {
          "name": "headerBg",
          "type": "string",
          "default": "",
          "description": "Background color of header",
          "descriptionZh": "头部区域背景色"
        },
        {
          "name": "itemPadding",
          "type": "string",
          "default": "",
          "description": "Padding of item",
          "descriptionZh": "列表项内间距"
        },
        {
          "name": "itemPaddingLG",
          "type": "string",
          "default": "",
          "description": "Padding of large item",
          "descriptionZh": "大号列表项内间距"
        },
        {
          "name": "itemPaddingSM",
          "type": "string",
          "default": "",
          "description": "Padding of small item",
          "descriptionZh": "小号列表项内间距"
        },
        {
          "name": "metaMarginBottom",
          "type": "MarginBottom<string | number> | undefined",
          "default": "",
          "description": "Margin bottom of meta",
          "descriptionZh": "Meta 下间距"
        },
        {
          "name": "titleMarginBottom",
          "type": "MarginBottom<string | number> | undefined",
          "default": "",
          "description": "Margin bottom of title",
          "descriptionZh": "标题下间距"
        }
      ],
      "subComponents": [
        "List.Item",
        "List.Item"
      ],
      "categoryZh": "数据展示",
      "nameZh": "列表",
      "since": "4.0.0",
      "doc": "\nSimple List.\n\n## When To Use\n\nA list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.\n\n## API\n\n### List\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| bordered | Toggles rendering of the border around the list | boolean | false | |\n| footer | List footer renderer | string \\| ReactNode | - | |\n| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | [object](#List-grid-props) | - | |\n| header | List header renderer | string \\| ReactNode | - | |\n| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | |\n| rowKey | Item's unique key, could be a string or function that returns a string | string \\| Function(record): string | `key` | |\n| loading | Shows a loading indicator while the contents of the list are being fetched | boolean \\| [SpinProps](/components/spin/#API) () | false | |\n| loadMore | Shows a load more content | string \\| ReactNode | - | |\n| locale | The i18n text including empty text | object | {emptyText: `No Data`} | |\n| pagination | Pagination [config](/components/pagination/), hide it by setting it to false | boolean \\| object | false | |\n| size | Size of list | `default` \\| `large` \\| `small` | `default` | |\n| split | Toggles rendering of the split under the list item | boolean | true | |\n| dataSource | DataSource array for list | any[] | - | |\n| renderItem | Customize list item when using `dataSource` | (item) => ReactNode | - | |\n\n### pagination\n\nProperties for pagination.\n\n| Property | Description | Type | Default |\n| -------- | ---------------------------------------- | --------------------------- | -------- |\n| position | The specify the position of `Pagination` | `top` \\| `bottom` \\| `both` | `bottom` |\n\nMore about pagination, please check [`Pagination`](/components/pagination/).\n\n### List grid props\n\n| Property | Description | Type | Default | Version |\n| -------- | ------------------------ | ------ | ------- | ------- |\n| column | The column of grid | number | - | |\n| gutter | The spacing between grid | number | 0 | |\n| xs | `<576px` column of grid | number | - | |\n| sm | `≥576px` column of grid | number | - | |\n| md | `≥768px` column of grid | number | - | |\n| lg | `≥992px` column of grid | number | - | |\n| xl | `≥1200px` column of grid | number | - | |\n| xxl | `≥1600px` column of grid | number | - | |\n\n### List.Item\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right | Array&lt;ReactNode> | - | |\n| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right | string \\| ReactNode | - | |\n\n### List.Item.Meta\n\n| Property | Description | Type | Default | Version |\n| ----------- | ---------------------------- | ------------------- | ------- | ------- |\n| avatar | The avatar of list item | ReactNode | - | |\n| description | The description of list item | string \\| ReactNode | - | |\n| title | The title of list item | string \\| ReactNode | - | |\n",
      "docZh": "\n通用列表。\n\n## 何时使用\n\n最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。\n\n## API\n\n另外我们封装了 [ProList](https://prolist.ant.design/)，在 `antd` List 之上扩展了更多便捷易用的功能，比如多选，展开等功能，使用体验贴近 Table，欢迎尝试使用。\n\n### List\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| bordered | 是否展示边框 | boolean | false | |\n| footer | 列表底部 | string \\| ReactNode | - | |\n| grid | 列表栅格配置 | [object](#List-grid-props) | - | |\n| header | 列表头部 | string \\| ReactNode | - | |\n| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |\n| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean \\| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |\n| loadMore | 加载更多 | string \\| ReactNode | - | |\n| locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} | |\n| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \\| object | false | |\n| size | list 的尺寸 | `default` \\| `large` \\| `small` | `default` | |\n| split | 是否展示分割线 | boolean | true | |\n| dataSource | 列表数据源 | any[] | - | |\n| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - | |\n\n### pagination\n\n分页的配置项。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| -------- | ------------------ | --------------------------- | -------- |\n| position | 指定分页显示的位置 | `top` \\| `bottom` \\| `both` | `bottom` |\n\n更多配置项，请查看 [`Pagination`](/components/pagination/)。\n\n### List grid props\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ------ | -------------------- | ------ | ------ | ---- |\n| column | 列数 | number | - | |\n| gutter | 栅格间隔 | number | 0 | |\n| xs | `<576px` 展示的列数 | number | - | |\n| sm | `≥576px` 展示的列数 | number | - | |\n| md | `≥768px` 展示的列数 | number | - | |\n| lg | `≥992px` 展示的列数 | number | - | |\n| xl | `≥1200px` 展示的列数 | number | - | |\n| xxl | `≥1600px` 展示的列数 | number | - | |\n\n### List.Item\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - | |\n| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string \\| ReactNode | - | |\n\n### List.Item.Meta\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ----------- | ------------------ | ------------------- | ------ | ---- |\n| avatar | 列表元素的图标 | ReactNode | - | |\n| description | 列表元素的描述内容 | string \\| ReactNode | - | |\n| title | 列表元素的标题 | string \\| ReactNode | - | |\n"
    },
    {
      "name": "Mentions",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "When need to mention someone or something.",
      "whenToUseZh": "用于在输入中提及某人或某事，常用于发布、聊天或评论功能。",
      "props": [
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "Auto get focus when component mounted",
          "descriptionZh": "自动获得焦点"
        },
        {
          "name": "defaultValue",
          "type": "string",
          "default": "-",
          "description": "Default value",
          "descriptionZh": "默认值"
        },
        {
          "name": "filterOption",
          "type": "false | (input: string, option: OptionProps) => boolean",
          "default": "-",
          "description": "Customize filter option logic",
          "descriptionZh": "自定义过滤逻辑"
        },
        {
          "name": "notFoundContent",
          "type": "ReactNode",
          "default": "`Not Found`",
          "description": "Set mentions content when not match",
          "descriptionZh": "当下拉列表为空时显示的内容"
        },
        {
          "name": "placement",
          "type": "`top` | `bottom`",
          "default": "`bottom`",
          "description": "Set popup placement",
          "descriptionZh": "弹出层展示位置"
        },
        {
          "name": "prefix",
          "type": "string | string[]",
          "default": "`@`",
          "description": "Set trigger prefix keyword",
          "descriptionZh": "设置触发关键字"
        },
        {
          "name": "split",
          "type": "string",
          "default": "``",
          "description": "Set split string before and after selected mention",
          "descriptionZh": "设置选中项前后分隔符"
        },
        {
          "name": "validateSearch",
          "type": "(text: string, props: MentionsProps) => void",
          "default": "-",
          "description": "Customize trigger search logic",
          "descriptionZh": "自定义触发验证逻辑"
        },
        {
          "name": "value",
          "type": "string",
          "default": "-",
          "description": "Set value of mentions",
          "descriptionZh": "选择时填充的值"
        },
        {
          "name": "onChange",
          "type": "(text: string) => void",
          "default": "-",
          "description": "Trigger when value changed",
          "descriptionZh": "值改变时触发"
        },
        {
          "name": "onSelect",
          "type": "(option: OptionProps, prefix: string) => void",
          "default": "-",
          "description": "Trigger when user select the option",
          "descriptionZh": "选择选项时触发"
        },
        {
          "name": "onSearch",
          "type": "(text: string, prefix: string) => void",
          "default": "-",
          "description": "Trigger when prefix hit",
          "descriptionZh": "搜索时触发"
        },
        {
          "name": "onFocus",
          "type": "() => void",
          "default": "-",
          "description": "Trigger when mentions get focus",
          "descriptionZh": "获得焦点时触发"
        },
        {
          "name": "onBlur",
          "type": "() => void",
          "default": "-",
          "description": "Trigger when mentions lose focus",
          "descriptionZh": "失去焦点时触发"
        },
        {
          "name": "getPopupContainer",
          "type": "() => HTMLElement",
          "default": "-",
          "description": "Set the mount HTML node for suggestions",
          "descriptionZh": "指定建议框挂载的 HTML 节点"
        },
        {
          "name": "autoSize",
          "type": "boolean | object",
          "default": "false",
          "description": "Textarea height autosize feature, can be set to true \\",
          "descriptionZh": "自适应内容高度，可设置为 true \\"
        },
        {
          "name": "onResize",
          "type": "function({ width, height })",
          "default": "-",
          "description": "The callback function that is triggered when textarea resize",
          "descriptionZh": "resize 回调"
        },
        {
          "name": "blur()",
          "type": "",
          "default": "-",
          "description": "Remove focus",
          "descriptionZh": ""
        },
        {
          "name": "focus()",
          "type": "",
          "default": "-",
          "description": "Get focus",
          "descriptionZh": ""
        },
        {
          "name": "children",
          "type": "ReactNode",
          "default": "-",
          "description": "Suggestion content",
          "descriptionZh": "选项内容"
        },
        {
          "name": "value",
          "type": "string",
          "default": "-",
          "description": "The value of suggestion, the value will insert into input filed while selected",
          "descriptionZh": "选择时填充的值"
        }
      ],
      "tokens": [
        {
          "name": "activeBg",
          "type": "string",
          "default": "",
          "description": "Background color when the input box is activated",
          "descriptionZh": "输入框激活状态时背景颜色"
        },
        {
          "name": "activeBorderColor",
          "type": "string",
          "default": "",
          "description": "Active border color",
          "descriptionZh": "激活态边框色"
        },
        {
          "name": "activeShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active",
          "descriptionZh": "激活态阴影"
        },
        {
          "name": "addonBg",
          "type": "string",
          "default": "",
          "description": "Background color of addon",
          "descriptionZh": "前/后置标签背景色"
        },
        {
          "name": "controlItemWidth",
          "type": "string | number",
          "default": "",
          "description": "Height of menu item",
          "descriptionZh": "菜单项高度"
        },
        {
          "name": "dropdownHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of popup",
          "descriptionZh": "弹层高度"
        },
        {
          "name": "errorActiveShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active in error status",
          "descriptionZh": "错误状态时激活态阴影"
        },
        {
          "name": "hoverBg",
          "type": "string",
          "default": "",
          "description": "Background color when the input box hovers",
          "descriptionZh": "输入框hover状态时背景颜色"
        },
        {
          "name": "hoverBorderColor",
          "type": "string",
          "default": "",
          "description": "Hover border color",
          "descriptionZh": "悬浮态边框色"
        },
        {
          "name": "inputFontSize",
          "type": "number",
          "default": "",
          "description": "Font size",
          "descriptionZh": "字体大小"
        },
        {
          "name": "inputFontSizeLG",
          "type": "number",
          "default": "",
          "description": "Font size of large",
          "descriptionZh": "大号字体大小"
        },
        {
          "name": "inputFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small",
          "descriptionZh": "小号字体大小"
        },
        {
          "name": "paddingBlock",
          "type": "number",
          "default": "",
          "description": "Vertical padding of input",
          "descriptionZh": "输入框纵向内边距"
        },
        {
          "name": "paddingBlockLG",
          "type": "number",
          "default": "",
          "description": "Vertical padding of large input",
          "descriptionZh": "大号输入框纵向内边距"
        },
        {
          "name": "paddingBlockSM",
          "type": "number",
          "default": "",
          "description": "Vertical padding of small input",
          "descriptionZh": "小号输入框纵向内边距"
        },
        {
          "name": "paddingInline",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of input",
          "descriptionZh": "输入框横向内边距"
        },
        {
          "name": "paddingInlineLG",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of large input",
          "descriptionZh": "大号输入框横向内边距"
        },
        {
          "name": "paddingInlineSM",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of small input",
          "descriptionZh": "小号输入框横向内边距"
        },
        {
          "name": "warningActiveShadow",
          "type": "string",
          "default": "",
          "description": "Box-shadow when active in warning status",
          "descriptionZh": "警告状态时激活态阴影"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of popup",
          "descriptionZh": "弹层 z-index"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "提及",
      "since": "4.0.0",
      "doc": "\nMention component.\n\n## When To Use\n\nWhen need to mention someone or something.\n\n## API\n\n```jsx\n<Mentions onChange={onChange}>\n <Mentions.Option value=\"sample\">Sample</Mentions.Option>\n</Mentions>\n```\n\n### Mention\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| autoFocus | Auto get focus when component mounted | boolean | false |\n| defaultValue | Default value | string | - |\n| filterOption | Customize filter option logic | false \\| (input: string, option: OptionProps) => boolean | - |\n| notFoundContent | Set mentions content when not match | ReactNode | `Not Found` |\n| placement | Set popup placement | `top` \\| `bottom` | `bottom` |\n| prefix | Set trigger prefix keyword | string \\| string[] | `@` |\n| split | Set split string before and after selected mention | string | `` |\n| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |\n| value | Set value of mentions | string | - |\n| onChange | Trigger when value changed | (text: string) => void | - |\n| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |\n| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |\n| onFocus | Trigger when mentions get focus | () => void | - |\n| onBlur | Trigger when mentions lose focus | () => void | - |\n| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - |\n| autoSize | Textarea height autosize feature, can be set to true \\| false or an object { minRows: 2, maxRows: 6 } | boolean \\| object | false |\n| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |\n\n### Mention methods\n\n| Name | Description |\n| ------- | ------------ |\n| blur() | Remove focus |\n| focus() | Get focus |\n\n### Option\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| children | Suggestion content | ReactNode | - |\n| value | The value of suggestion, the value will insert into input filed while selected | string | - |\n",
      "docZh": "\n提及组件。\n\n## 何时使用\n\n用于在输入中提及某人或某事，常用于发布、聊天或评论功能。\n\n## API\n\n```jsx\n<Mentions onChange={onChange}>\n <Mentions.Option value=\"sample\">Sample</Mentions.Option>\n</Mentions>\n```\n\n### Mentions\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| autoFocus | 自动获得焦点 | boolean | false |\n| defaultValue | 默认值 | string | - |\n| filterOption | 自定义过滤逻辑 | false \\| (input: string, option: OptionProps) => boolean | - |\n| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` |\n| placement | 弹出层展示位置 | `top` \\| `bottom` | `bottom` |\n| prefix | 设置触发关键字 | string \\| string[] | `@` |\n| split | 设置选中项前后分隔符 | string | `` |\n| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - |\n| value | 设置值 | string | - |\n| onChange | 值改变时触发 | (text: string) => void | - |\n| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |\n| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |\n| onFocus | 获得焦点时触发 | () => void | - |\n| onBlur | 失去焦点时触发 | () => void | - |\n| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - |\n| autoSize | 自适应内容高度，可设置为 true \\| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \\| object | false |\n| onResize | resize 回调 | function({ width, height }) | - |\n\n### Mentions 方法\n\n| 名称 | 描述 |\n| ------- | -------- |\n| blur() | 移除焦点 |\n| focus() | 获取焦点 |\n\n### Option\n\n| 参数 | 说明 | 类型 | 默认值 |\n| -------- | -------------- | --------- | ------ |\n| children | 选项内容 | ReactNode | - |\n| value | 选择时填充的值 | string | - |\n"
    },
    {
      "name": "Menu",
      "category": "Navigation",
      "description": "",
      "whenToUse": "Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.\n\nMore layouts with navigation: [Layout](/components/layout).",
      "whenToUseZh": "导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。\n\n更多布局和导航的使用可以参考：[通用布局](/components/layout)。",
      "props": [],
      "tokens": [
        {
          "name": "activeBarBorderWidth",
          "type": "string | number",
          "default": "",
          "description": "Border width of menu item active bar",
          "descriptionZh": "菜单项指示条边框宽度"
        },
        {
          "name": "activeBarHeight",
          "type": "number",
          "default": "",
          "description": "Height of menu item active bar",
          "descriptionZh": "菜单项指示条高度"
        },
        {
          "name": "activeBarWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of menu item active bar",
          "descriptionZh": "菜单项指示条宽度"
        },
        {
          "name": "collapsedIconSize",
          "type": "number",
          "default": "",
          "description": "Size of icon when collapsed",
          "descriptionZh": "收起时图标尺寸"
        },
        {
          "name": "collapsedWidth",
          "type": "string | number",
          "default": "",
          "description": "Width when collapsed",
          "descriptionZh": "收起后的宽度"
        },
        {
          "name": "dangerItemActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color of danger menu item when active",
          "descriptionZh": "危险菜单项激活态背景色"
        },
        {
          "name": "dangerItemColor",
          "type": "string",
          "default": "",
          "description": "Color of danger menu item text",
          "descriptionZh": "危险菜单项文字颜色"
        },
        {
          "name": "dangerItemHoverColor",
          "type": "string",
          "default": "",
          "description": "Hover color of danger menu item text",
          "descriptionZh": "危险菜单项文字悬浮颜色"
        },
        {
          "name": "dangerItemSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color of selected danger menu item",
          "descriptionZh": "危险菜单项选中背景色"
        },
        {
          "name": "dangerItemSelectedColor",
          "type": "string",
          "default": "",
          "description": "Color of selected danger menu item text",
          "descriptionZh": "危险菜单项文字选中颜色"
        },
        {
          "name": "darkDangerItemActiveBg",
          "type": "string",
          "default": "",
          "description": "Background of active danger menu item in dark mode",
          "descriptionZh": "暗色模式下的危险菜单项激活态背景"
        },
        {
          "name": "darkDangerItemColor",
          "type": "string",
          "default": "",
          "description": "Color of danger menu item text in dark mode",
          "descriptionZh": "暗色模式下的危险菜单项文字颜色"
        },
        {
          "name": "darkDangerItemHoverColor",
          "type": "string",
          "default": "",
          "description": "Background of hovered danger menu item in dark mode",
          "descriptionZh": "暗色模式下的危险菜单项悬浮文字背景"
        },
        {
          "name": "darkDangerItemSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background of active danger menu item in dark mode",
          "descriptionZh": "暗色模式下的危险菜单项选中背景"
        },
        {
          "name": "darkDangerItemSelectedColor",
          "type": "string",
          "default": "",
          "description": "Color of selected danger menu item in dark mode",
          "descriptionZh": "暗色模式下的危险菜单项选中文字颜色"
        },
        {
          "name": "darkGroupTitleColor",
          "type": "string",
          "default": "",
          "description": "Color of group title text in dark mode",
          "descriptionZh": "暗色模式下的分组标题文字颜色"
        },
        {
          "name": "darkItemBg",
          "type": "string",
          "default": "",
          "description": "Background of menu item in dark mode",
          "descriptionZh": "暗色模式下的菜单项背景"
        },
        {
          "name": "darkItemColor",
          "type": "string",
          "default": "",
          "description": "Color of menu item text in dark mode",
          "descriptionZh": "暗色模式下的菜单项文字颜色"
        },
        {
          "name": "darkItemDisabledColor",
          "type": "string",
          "default": "",
          "description": "Color of disabled menu item in dark mode",
          "descriptionZh": "暗色模式下的菜单项禁用颜色"
        },
        {
          "name": "darkItemHoverBg",
          "type": "string",
          "default": "",
          "description": "Background of hovered menu item in dark mode",
          "descriptionZh": "暗色模式下的菜单项悬浮背景"
        },
        {
          "name": "darkItemHoverColor",
          "type": "string",
          "default": "",
          "description": "Color of hovered menu item in dark mode",
          "descriptionZh": "暗色模式下的菜单项悬浮颜色"
        },
        {
          "name": "darkItemSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background of active menu item in dark mode",
          "descriptionZh": "暗色模式下的菜单项选中背景"
        },
        {
          "name": "darkItemSelectedColor",
          "type": "string",
          "default": "",
          "description": "Color of selected menu item in dark mode",
          "descriptionZh": "暗色模式下的菜单项选中颜色"
        },
        {
          "name": "darkPopupBg",
          "type": "string",
          "default": "",
          "description": "The background color of the overlay menu in dark mode.",
          "descriptionZh": "暗色模式下的浮层菜单的背景颜色"
        },
        {
          "name": "darkSubMenuItemBg",
          "type": "string",
          "default": "",
          "description": "Background of submenu item in dark mode",
          "descriptionZh": "暗色模式下的子菜单项背景"
        },
        {
          "name": "dropdownWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of popup menu",
          "descriptionZh": "弹出菜单的宽度"
        },
        {
          "name": "groupTitleColor",
          "type": "string",
          "default": "",
          "description": "Color of group title text",
          "descriptionZh": "分组标题文字颜色"
        },
        {
          "name": "groupTitleFontSize",
          "type": "number",
          "default": "",
          "description": "font-size of group title",
          "descriptionZh": "分组标题文字大小"
        },
        {
          "name": "groupTitleLineHeight",
          "type": "string | number",
          "default": "",
          "description": "line-height of group title",
          "descriptionZh": "分组标题文字高度"
        },
        {
          "name": "horizontalItemBorderRadius",
          "type": "number",
          "default": "",
          "description": "Border radius of horizontal menu item",
          "descriptionZh": "横向菜单项圆角"
        },
        {
          "name": "horizontalItemHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of horizontal menu item when hover",
          "descriptionZh": "横向菜单项横悬浮态背景色"
        },
        {
          "name": "horizontalItemHoverColor",
          "type": "string",
          "default": "",
          "description": "Hover color of horizontal menu item text",
          "descriptionZh": "水平菜单项文字悬浮颜色"
        },
        {
          "name": "horizontalItemSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color of horizontal menu item when selected",
          "descriptionZh": "水平菜单项选中态背景色"
        },
        {
          "name": "horizontalItemSelectedColor",
          "type": "string",
          "default": "",
          "description": "Color of selected horizontal menu item text",
          "descriptionZh": "水平菜单项文字选中颜色"
        },
        {
          "name": "horizontalLineHeight",
          "type": "LineHeight<string | number> | undefined",
          "default": "",
          "description": "LineHeight of horizontal menu item",
          "descriptionZh": "横向菜单行高"
        },
        {
          "name": "iconMarginInlineEnd",
          "type": "MarginInlineEnd<string | number> | undefined",
          "default": "",
          "description": "Spacing between icon and text",
          "descriptionZh": "图标与文字间距"
        },
        {
          "name": "iconSize",
          "type": "number",
          "default": "",
          "description": "Size of icon",
          "descriptionZh": "图标尺寸"
        },
        {
          "name": "itemActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color of menu item when active",
          "descriptionZh": "菜单项激活态背景色"
        },
        {
          "name": "itemBg",
          "type": "string",
          "default": "",
          "description": "",
          "descriptionZh": "菜单项背景色"
        },
        {
          "name": "itemBorderRadius",
          "type": "number",
          "default": "",
          "description": "Radius of menu item",
          "descriptionZh": "菜单项的圆角"
        },
        {
          "name": "itemColor",
          "type": "string",
          "default": "",
          "description": "Color of menu item text",
          "descriptionZh": "菜单项文字颜色"
        },
        {
          "name": "itemDisabledColor",
          "type": "string",
          "default": "",
          "description": "Color of disabled menu item text",
          "descriptionZh": "菜单项文字禁用颜色"
        },
        {
          "name": "itemHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of menu item",
          "descriptionZh": "菜单项高度"
        },
        {
          "name": "itemHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of menu item when hover",
          "descriptionZh": "菜单项悬浮态背景色"
        },
        {
          "name": "itemHoverColor",
          "type": "string",
          "default": "",
          "description": "Hover color of menu item text",
          "descriptionZh": "菜单项文字悬浮颜色"
        },
        {
          "name": "itemMarginBlock",
          "type": "MarginBlock<string | number> | undefined",
          "default": "",
          "description": "margin-block of menu item",
          "descriptionZh": "菜单项纵向外间距"
        },
        {
          "name": "itemMarginInline",
          "type": "number",
          "default": "",
          "description": "Horizontal margin of menu item",
          "descriptionZh": "菜单项横向外间距"
        },
        {
          "name": "itemPaddingInline",
          "type": "PaddingInline<string | number> | undefined",
          "default": "",
          "description": "padding-inline of menu item",
          "descriptionZh": "菜单项横向内间距"
        },
        {
          "name": "itemSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color of menu item when selected",
          "descriptionZh": "菜单项选中态背景色"
        },
        {
          "name": "itemSelectedColor",
          "type": "string",
          "default": "",
          "description": "Color of selected menu item text",
          "descriptionZh": "菜单项文字选中颜色"
        },
        {
          "name": "popupBg",
          "type": "string",
          "default": "",
          "description": "Background color of popup",
          "descriptionZh": "弹出框背景色"
        },
        {
          "name": "subMenuItemBg",
          "type": "string",
          "default": "",
          "description": "Background color of sub-menu item",
          "descriptionZh": "子菜单项背景色"
        },
        {
          "name": "subMenuItemBorderRadius",
          "type": "number",
          "default": "",
          "description": "Radius of sub-menu item",
          "descriptionZh": "子菜单项的圆角"
        },
        {
          "name": "subMenuItemSelectedColor",
          "type": "string",
          "default": "",
          "description": "Color of submenu title when submenu has selected item",
          "descriptionZh": "子菜单内有选中项时，子菜单标题色"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of popup menu",
          "descriptionZh": "弹出菜单的 z-index"
        }
      ],
      "subComponents": [
        "Menu.Item",
        "Menu.SubMenu",
        "Menu.ItemGroup",
        "Menu.Divider"
      ],
      "categoryZh": "导航",
      "nameZh": "导航菜单",
      "since": "4.0.0",
      "doc": "\nA versatile menu for navigation.\n\n## When To Use\n\nNavigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.\n\nMore layouts with navigation: [Layout](/components/layout).\n\n## API\n\n```jsx\n<Menu>\n <Menu.Item>Menu</Menu.Item>\n <SubMenu title=\"SubMenu\">\n <Menu.Item>SubMenuItem</Menu.Item>\n </SubMenu>\n</Menu>\n```\n\n### Menu\n\n| Param | Description | Type | Default value | Version |\n| --- | --- | --- | --- | --- |\n| defaultOpenKeys | Array with the keys of default opened sub menus | string\\[] | - | |\n| defaultSelectedKeys | Array with the keys of default selected menu items | string\\[] | - | |\n| forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | |\n| inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | |\n| inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | |\n| mode | Type of menu; `vertical`, `horizontal`, or `inline` | `vertical` \\| `horizontal` \\| `inline` | `vertical` | |\n| multiple | Allows selection of multiple items | boolean | false | |\n| openKeys | Array with the keys of currently opened sub-menus | string\\[] | - | |\n| selectable | Allows selecting menu items | boolean | true | |\n| selectedKeys | Array with the keys of currently selected menu items | string\\[] | - | |\n| style | Style of the root node | CSSProperties | - | |\n| subMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | |\n| subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | |\n| theme | Color theme of the menu | `light` \\| `dark` | `light` | |\n| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | |\n| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |\n| triggerSubMenuAction | Which action can trigger submenu open/close | `hover` \\| `click` | `hover` | |\n| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\\[]) | - | |\n| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |\n| overflowedIndicator | Customized icon when menu is collapsed | ReactNode | - | |\n\n> More options in [rc-menu](https://github.com/react-component/menu#api)\n\n### Menu.Item\n\n| Param | Description | Type | Default value | Version |\n| -------- | ------------------------------------ | --------- | ------------- | ------- |\n| disabled | Whether menu item is disabled | boolean | false | |\n| key | Unique ID of the menu item | string | - | |\n| title | Set display title for collapsed item | string | - | |\n| icon | The icon of the menu item | ReactNode | - | 4.2.0 |\n| danger | Display the danger style | boolean | false | 4.3.0 |\n\n> Note: `icon` is a newly added prop in`4.2.0`. For previous versions, please use the following method to define the icon.\n>\n> ```jsx\n> <Menu.Item>\n> <PieChartOutlined />\n> <span>Option 1</span>\n> </Menu.Item>\n> <Menu.SubMenu\n> title={\n> <>\n> <PieChartOutlined />\n> <span>Option 2</span>\n> </>\n> }\n> >\n>...\n> </Menu.SubMenu>\n> ```\n\n### Menu.SubMenu\n\n| Param | Description | Type | Default value | Version |\n| --- | --- | --- | --- | --- |\n| popupClassName | Sub-menu class name | string | - | |\n| children | Sub-menus or sub-menu items | Array&lt;MenuItem \\| SubMenu> | - | |\n| disabled | Whether sub-menu is disabled | boolean | false | |\n| key | Unique ID of the sub-menu | string | - | |\n| title | Title of sub menu | string \\| ReactNode | - | |\n| icon | Icon of sub menu | ReactNode | - | 4.2.0 |\n| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | |\n\n### Menu.ItemGroup\n\n| Param | Description | Type | Default value | Version |\n| -------- | ---------------------- | ------------------- | ------------- | ------- |\n| children | Sub-menu items | MenuItem\\[] | - | |\n| title | The title of the group | string \\| ReactNode | - | |\n\n### Menu.Divider\n\nDivider line in between menu items, only used in vertical popup Menu or Dropdown Menu.\n",
      "docZh": "\n为页面和功能提供导航的菜单列表。\n\n## 何时使用\n\n导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。\n\n更多布局和导航的使用可以参考：[通用布局](/components/layout)。\n\n## API\n\n```jsx\n<Menu>\n <Menu.Item>菜单项</Menu.Item>\n <SubMenu title=\"子菜单\">\n <Menu.Item>子菜单项</Menu.Item>\n </SubMenu>\n</Menu>\n```\n\n### Menu\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\\[] | - | |\n| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\\[] | - | |\n| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |\n| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |\n| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |\n| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \\| `horizontal` \\| `inline` | `vertical` | |\n| multiple | 是否允许多选 | boolean | false | |\n| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\\[] | - | |\n| selectable | 是否允许选中 | boolean | true | |\n| selectedKeys | 当前选中的菜单项 key 数组 | string\\[] | - | |\n| style | 根节点样式 | CSSProperties | - | |\n| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |\n| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |\n| theme | 主题颜色 | `light` \\| `dark` | `light` | |\n| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |\n| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |\n| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | `hover` \\| `click` | `hover` | |\n| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\\[]) | - | |\n| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   | |\n| overflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - | |\n\n> More options in [rc-menu](https://github.com/react-component/menu#api)\n\n### Menu.Item\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| -------- | ------------------------ | --------- | ------ | ----- |\n| disabled | 是否禁用 | boolean | false | |\n| key | item 的唯一标志 | string | - | |\n| title | 设置收缩时展示的悬浮标题 | string | - | |\n| icon | 菜单图标 | ReactNode | - | 4.2.0 |\n| danger | 展示错误状态样式 | boolean | false | 4.3.0 |\n\n> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。\n>\n> ```jsx\n> <Menu.Item>\n> <PieChartOutlined />\n> <span>Option 1</span>\n> </Menu.Item>\n> <Menu.SubMenu\n> title={\n> <>\n> <PieChartOutlined />\n> <span>Option 2</span>\n> </>\n> }\n> >\n>...\n> </Menu.SubMenu>\n> ```\n\n### Menu.SubMenu\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| -------------- | -------------- | ----------------------------- | ------ | ----- |\n| popupClassName | 子菜单样式 | string | - | |\n| children | 子菜单的菜单项 | Array&lt;MenuItem \\| SubMenu> | - | |\n| disabled | 是否禁用 | boolean | false | |\n| key | 唯一标志 | string | - | |\n| title | 子菜单项值 | string \\| ReactNode | - | |\n| icon | 菜单图标 | ReactNode | - | 4.2.0 |\n| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |\n\n### Menu.ItemGroup\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| -------- | ------------ | ------------------- | ------ | ---- |\n| children | 分组的菜单项 | MenuItem\\[] | - | |\n| title | 分组标题 | string \\| ReactNode | - | |\n\n### Menu.Divider\n\n菜单项分割线，只用在弹出菜单内。\n"
    },
    {
      "name": "Message",
      "category": "Feedback",
      "description": "",
      "whenToUse": "- To provide feedback such as success, warning, error etc.\n- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.",
      "whenToUseZh": "- 可提供成功、警告和错误等反馈信息。\n- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。",
      "props": [
        {
          "name": "content",
          "type": "ReactNode",
          "default": "-",
          "description": "The content of the message",
          "descriptionZh": "提示内容"
        },
        {
          "name": "duration",
          "type": "number",
          "default": "3",
          "description": "Time(seconds) before auto-dismiss, don't dismiss if set to 0",
          "descriptionZh": "默认自动关闭延时，单位秒"
        },
        {
          "name": "onClose",
          "type": "function",
          "default": "-",
          "description": "Specify a function that will be called when the message is closed",
          "descriptionZh": "关闭时触发的回调函数"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "-",
          "description": "Customized Icon",
          "descriptionZh": "自定义图标"
        },
        {
          "name": "key",
          "type": "string | number",
          "default": "-",
          "description": "The unique identifier of the Message",
          "descriptionZh": "当前提示的唯一标志"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "Customized CSS class",
          "descriptionZh": "自定义 CSS class"
        },
        {
          "name": "style",
          "type": "",
          "default": "-",
          "description": "Customized inline style",
          "descriptionZh": "自定义内联样式"
        }
      ],
      "tokens": [
        {
          "name": "contentBg",
          "type": "string",
          "default": "",
          "description": "Background color of Message",
          "descriptionZh": "提示框背景色"
        },
        {
          "name": "contentPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of Message",
          "descriptionZh": "提示框内边距"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of Message",
          "descriptionZh": "提示框 z-index"
        }
      ],
      "faq": [
        {
          "question": "Why I can not access context, redux in message?",
          "answer": "antd will dynamic create React instance by `ReactDOM.render` when call message methods. Whose context is different with origin code located context.\n\nWhen you need context info (like ConfigProvider context), you can use `message.useMessage` to get `api` instance and `contextHolder` node. And put it in your children:\n\n```tsx\nconst [api, contextHolder] = message.useMessage();\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder is inside Context1 which means api will get value of Context1 */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder is outside Context2 which means api will **not** get value of Context2 */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**Note:** You must insert `contextHolder` into your children with hooks. You can use origin method if you do not need context connection."
        }
      ],
      "categoryZh": "反馈",
      "nameZh": "全局提示",
      "since": "4.0.0",
      "doc": "\nDisplay global messages as feedback in response to user operations.\n\n## When To Use\n\n- To provide feedback such as success, warning, error etc.\n- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.\n\n## API\n\nThis components provides some static methods, with usage and arguments as following:\n\n- `message.success(content, [duration], onClose)`\n- `message.error(content, [duration], onClose)`\n- `message.info(content, [duration], onClose)`\n- `message.warning(content, [duration], onClose)`\n- `message.warn(content, [duration], onClose)` // alias of warning\n- `message.loading(content, [duration], onClose)`\n\n| Argument | Description | Type | Default |\n| --- | --- | --- | --- |\n| content | The content of the message | string \\| ReactNode \\| config | - |\n| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 |\n| onClose | Specify a function that will be called when the message is closed | function | - |\n\n`afterClose` can be called in thenable interface:\n\n- `message[level](content, [duration]).then(afterClose)`\n- `message[level](content, [duration], onClose).then(afterClose)`\n\nwhere `level` refers one static methods of `message`. The result of `then` method will be a Promise.\n\nSupports passing parameters wrapped in an object:\n\n- `message.open(config)`\n- `message.success(config)`\n- `message.error(config)`\n- `message.info(config)`\n- `message.warning(config)`\n- `message.warn(config)` // alias of warning\n- `message.loading(config)`\n\nThe properties of config are as follows:\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| content | The content of the message | ReactNode | - |\n| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |\n| onClose | Specify a function that will be called when the message is closed | function | - |\n| icon | Customized Icon | ReactNode | - |\n| key | The unique identifier of the Message | string \\| number | - |\n| className | Customized CSS class | string | - |\n| style | Customized inline style | | - |\n\n### Global static methods\n\nMethods for global configuration and destruction are also provided:\n\n- `message.config(options)`\n- `message.destroy()`\n\n> use `message.destroy(key)` to remove a message。\n\n#### message.config\n\n> When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default.(4.3.0+)\n>\n> When you want to use it alone, you can start the RTL mode through the following settings.\n\n```js\nmessage.config({\n top: 100,\n duration: 2,\n maxCount: 3,\n rtl: true,\n prefixCls: 'my-message',\n});\n```\n\n| Argument | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| duration | Time before auto-dismiss, in seconds | number | 1.5 | |\n| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body | |\n| maxCount | Max message show, drop oldest if exceed limit | number | - | |\n| top | Distance from top | number | 24 | |\n| rtl | Whether to enable RTL mode | boolean | false | |\n| prefixCls | The prefix className of message node | string | `ant-message` | 4.5.0 |\n\n## FAQ\n\n### Why I can not access context, redux in message?\n\nantd will dynamic create React instance by `ReactDOM.render` when call message methods. Whose context is different with origin code located context.\n\nWhen you need context info (like ConfigProvider context), you can use `message.useMessage` to get `api` instance and `contextHolder` node. And put it in your children:\n\n```tsx\nconst [api, contextHolder] = message.useMessage();\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder is inside Context1 which means api will get value of Context1 */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder is outside Context2 which means api will **not** get value of Context2 */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**Note:** You must insert `contextHolder` into your children with hooks. You can use origin method if you do not need context connection.\n",
      "docZh": "\n全局展示操作反馈信息。\n\n## 何时使用\n\n- 可提供成功、警告和错误等反馈信息。\n- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。\n\n## API\n\n组件提供了一些静态方法，使用方式和参数如下：\n\n- `message.success(content, [duration], onClose)`\n- `message.error(content, [duration], onClose)`\n- `message.info(content, [duration], onClose)`\n- `message.warning(content, [duration], onClose)`\n- `message.warn(content, [duration], onClose)` // alias of warning\n- `message.loading(content, [duration], onClose)`\n\n| 参数 | 说明 | 类型 | 默认值 |\n| -------- | ------------------------------------------- | ----------------------------- | ------ |\n| content | 提示内容 | string \\| ReactNode \\| config | - |\n| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |\n| onClose | 关闭时触发的回调函数 | function | - |\n\n组件同时提供 promise 接口。\n\n- `message[level](content, [duration]).then(afterClose)`\n- `message[level](content, [duration], onClose).then(afterClose)`\n\n其中`message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。\n\n也可以对象的形式传递参数：\n\n- `message.open(config)`\n- `message.success(config)`\n- `message.error(config)`\n- `message.info(config)`\n- `message.warning(config)`\n- `message.warn(config)` // alias of warning\n- `message.loading(config)`\n\n`config` 对象属性如下：\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| content | 提示内容 | ReactNode | - |\n| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |\n| onClose | 关闭时触发的回调函数 | function | - |\n| icon | 自定义图标 | ReactNode | - |\n| key | 当前提示的唯一标志 | string \\| number | - |\n| className | 自定义 CSS class | string | - |\n| style | 自定义内联样式 | | - |\n\n### 全局方法\n\n还提供了全局配置和全局销毁方法：\n\n- `message.config(options)`\n- `message.destroy()`\n\n> 也可通过 `message.destroy(key)` 来关闭一条消息。\n\n#### message.config\n\n> 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)\n>\n> 当你想单独使用，可通过如下设置开启 RTL 模式。\n\n```js\nmessage.config({\n top: 100,\n duration: 2,\n maxCount: 3,\n rtl: true,\n prefixCls: 'my-message',\n});\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| duration | 默认自动关闭延时，单位秒 | number | 3 | |\n| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body | |\n| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | |\n| top | 消息距离顶部的位置 | number | 24 | |\n| rtl | 是否开启 RTL 模式 | boolean | false | |\n| prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 4.5.0 |\n\n## FAQ\n\n### 为什么 message 不能获取 context、redux 的内容？\n\n直接调用 message 方法，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。\n\n当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `message.useMessage` 方法会返回 `api` 实体以及 `contextHolder` 节点。将其插入到你需要获取 context 位置即可：\n\n```tsx\nconst [api, contextHolder] = message.useMessage();\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder 在 Context1 内，它可以获得 Context1 的 context */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder 在 Context2 外，因而不会获得 Context2 的 context */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**异同：**通过 hooks 创建的 `contextHolder` 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。\n"
    },
    {
      "name": "Modal",
      "category": "Feedback",
      "description": "",
      "whenToUse": "When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`, and so on.",
      "whenToUseZh": "需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。\n\n另外当需要一个简洁的确认框询问用户时，可以使用 `Modal.confirm()` 等语法糖方法。",
      "props": [
        {
          "name": "afterClose",
          "type": "function",
          "default": "-",
          "description": "Specify a function that will be called when modal is closed completely",
          "descriptionZh": "Modal 完全关闭后的回调"
        },
        {
          "name": "bodyStyle",
          "type": "CSSProperties",
          "default": "{}",
          "description": "Body style for modal body element. Such as height, padding etc",
          "descriptionZh": "Modal body 样式"
        },
        {
          "name": "cancelText",
          "type": "string",
          "default": "`Cancel`",
          "description": "Text of the Cancel button",
          "descriptionZh": "设置 Modal.confirm 取消按钮文字"
        },
        {
          "name": "cancelButtonProps",
          "type": "[ButtonProps](/components/button/#API)",
          "default": "-",
          "description": "The cancel button props",
          "descriptionZh": "cancel 按钮 props"
        },
        {
          "name": "centered",
          "type": "boolean",
          "default": "false",
          "description": "Centered Modal",
          "descriptionZh": "垂直居中展示 Modal"
        },
        {
          "name": "closable",
          "type": "boolean",
          "default": "true",
          "description": "Whether a close (x) button is visible on top right of the modal dialog or not",
          "descriptionZh": "是否显示右上角的关闭按钮"
        },
        {
          "name": "closeIcon",
          "type": "ReactNode",
          "default": "<CloseOutlined />",
          "description": "Custom close icon",
          "descriptionZh": "自定义关闭图标"
        },
        {
          "name": "confirmLoading",
          "type": "boolean",
          "default": "false",
          "description": "Whether to apply loading visual effect for OK button or not",
          "descriptionZh": "确定按钮 loading"
        },
        {
          "name": "destroyOnClose",
          "type": "boolean",
          "default": "false",
          "description": "Whether to unmount child components on onClose",
          "descriptionZh": "关闭时销毁 Modal 里的子元素"
        },
        {
          "name": "footer",
          "type": "string | ReactNode",
          "default": "(OK and Cancel buttons)",
          "description": "Footer content, set as `footer={null}` when you don't need default buttons",
          "descriptionZh": "底部内容，当不需要默认底部按钮时，可以设为 `footer={null}`"
        },
        {
          "name": "forceRender",
          "type": "boolean",
          "default": "false",
          "description": "Force render Modal",
          "descriptionZh": "强制渲染 Modal"
        },
        {
          "name": "getContainer",
          "type": "HTMLElement | () => HTMLElement | Selectors | false",
          "default": "document.body",
          "description": "Return the mount node for Modal",
          "descriptionZh": "指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom"
        },
        {
          "name": "keyboard",
          "type": "boolean",
          "default": "true",
          "description": "Whether support press esc to close",
          "descriptionZh": "是否支持键盘 esc 关闭"
        },
        {
          "name": "mask",
          "type": "boolean",
          "default": "true",
          "description": "Whether show mask or not",
          "descriptionZh": "是否展示遮罩"
        },
        {
          "name": "maskClosable",
          "type": "boolean",
          "default": "true",
          "description": "Whether to close the modal dialog when the mask (area outside the modal) is clicked",
          "descriptionZh": "点击蒙层是否允许关闭"
        },
        {
          "name": "maskStyle",
          "type": "object",
          "default": "{}",
          "description": "Style for modal's mask element",
          "descriptionZh": "遮罩样式"
        },
        {
          "name": "okButtonProps",
          "type": "[ButtonProps](/components/button/#API)",
          "default": "-",
          "description": "The ok button props",
          "descriptionZh": "ok 按钮 props"
        },
        {
          "name": "okText",
          "type": "string",
          "default": "`OK`",
          "description": "Text of the OK button",
          "descriptionZh": "确认按钮文字"
        },
        {
          "name": "okType",
          "type": "string",
          "default": "`primary`",
          "description": "Button `type` of the OK button",
          "descriptionZh": "确认按钮类型"
        },
        {
          "name": "onCancel",
          "type": "function(e)",
          "default": "-",
          "description": "Specify a function that will be called when a user clicks mask, close button on top right or Cancel button",
          "descriptionZh": "取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭"
        },
        {
          "name": "onOk",
          "type": "function(e)",
          "default": "-",
          "description": "Specify a function that will be called when a user clicks the OK button",
          "descriptionZh": "点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "Style of floating layer, typically used at least for adjusting the position",
          "descriptionZh": "可用于设置浮层的样式，调整浮层位置等"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The modal dialog's title",
          "descriptionZh": "标题"
        },
        {
          "name": "visible",
          "type": "boolean",
          "default": "false",
          "description": "Whether the modal dialog is visible or not",
          "descriptionZh": "对话框是否可见"
        },
        {
          "name": "width",
          "type": "string | number",
          "default": "416",
          "description": "Width of the modal dialog",
          "descriptionZh": "宽度"
        },
        {
          "name": "wrapClassName",
          "type": "string",
          "default": "-",
          "description": "The class name of the container of the modal dialog",
          "descriptionZh": "对话框外层容器的类名"
        },
        {
          "name": "zIndex",
          "type": "number",
          "default": "1000",
          "description": "The `z-index` of the Modal",
          "descriptionZh": "设置 Modal 的 `z-index`"
        },
        {
          "name": "autoFocusButton",
          "type": "null | `ok` | `cancel`",
          "default": "`ok`",
          "description": "Specify which button to autofocus",
          "since": "`cancel`",
          "descriptionZh": "指定自动获得焦点的按钮"
        },
        {
          "name": "cancelButtonProps",
          "type": "[ButtonProps](/components/button/#API)",
          "default": "-",
          "description": "The cancel button props",
          "descriptionZh": "cancel 按钮 props"
        },
        {
          "name": "cancelText",
          "type": "string",
          "default": "`Cancel`",
          "description": "Text of the Cancel button with Modal.confirm",
          "descriptionZh": "设置 Modal.confirm 取消按钮文字"
        },
        {
          "name": "centered",
          "type": "boolean",
          "default": "false",
          "description": "Centered Modal",
          "descriptionZh": "垂直居中展示 Modal"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The className of container",
          "descriptionZh": "容器类名"
        },
        {
          "name": "content",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Content",
          "since": "-",
          "descriptionZh": "内容"
        },
        {
          "name": "getContainer",
          "type": "HTMLElement | () => HTMLElement | Selectors | false",
          "default": "document.body",
          "description": "Return the mount node for Modal",
          "since": "Selectors \\",
          "descriptionZh": "指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "<QuestionCircle />",
          "description": "Custom icon",
          "since": "3.12.0",
          "descriptionZh": "自定义图标"
        },
        {
          "name": "keyboard",
          "type": "boolean",
          "default": "true",
          "description": "Whether support press esc to close",
          "descriptionZh": "是否支持键盘 esc 关闭"
        },
        {
          "name": "mask",
          "type": "boolean",
          "default": "true",
          "description": "Whether show mask or not.",
          "descriptionZh": "是否展示遮罩"
        },
        {
          "name": "maskClosable",
          "type": "boolean",
          "default": "false",
          "description": "Whether to close the modal dialog when the mask (area outside the modal) is clicked",
          "descriptionZh": "点击蒙层是否允许关闭"
        },
        {
          "name": "maskStyle",
          "type": "object",
          "default": "{}",
          "description": "Style for modal's mask element",
          "descriptionZh": "遮罩样式"
        },
        {
          "name": "okButtonProps",
          "type": "[ButtonProps](/components/button/#API)",
          "default": "-",
          "description": "The ok button props",
          "descriptionZh": "ok 按钮 props"
        },
        {
          "name": "okText",
          "type": "string",
          "default": "`OK`",
          "description": "Text of the OK button",
          "descriptionZh": "确认按钮文字"
        },
        {
          "name": "okType",
          "type": "string",
          "default": "`primary`",
          "description": "Button `type` of the OK button",
          "descriptionZh": "确认按钮类型"
        },
        {
          "name": "onCancel",
          "type": "function(close)",
          "default": "-",
          "description": "Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed",
          "descriptionZh": "取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭"
        },
        {
          "name": "onOk",
          "type": "function(close)",
          "default": "-",
          "description": "Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed",
          "descriptionZh": "点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭"
        },
        {
          "name": "style",
          "type": "CSSProperties",
          "default": "-",
          "description": "Style of floating layer, typically used at least for adjusting the position",
          "descriptionZh": "可用于设置浮层的样式，调整浮层位置等"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Title",
          "since": "-",
          "descriptionZh": "标题"
        },
        {
          "name": "width",
          "type": "string | number",
          "default": "416",
          "description": "Width of the modal dialog",
          "since": "416",
          "descriptionZh": "宽度"
        },
        {
          "name": "zIndex",
          "type": "number",
          "default": "1000",
          "description": "The `z-index` of the Modal",
          "descriptionZh": "设置 Modal 的 `z-index`"
        }
      ],
      "tokens": [
        {
          "name": "contentBg",
          "type": "string",
          "default": "",
          "description": "Background color of content",
          "descriptionZh": "内容区域背景色"
        },
        {
          "name": "footerBg",
          "type": "string",
          "default": "",
          "description": "Background color of footer",
          "descriptionZh": "底部区域背景色"
        },
        {
          "name": "headerBg",
          "type": "string",
          "default": "",
          "description": "Background color of header",
          "descriptionZh": "顶部背景色"
        },
        {
          "name": "titleColor",
          "type": "string",
          "default": "",
          "description": "Font color of title",
          "descriptionZh": "标题字体颜色"
        },
        {
          "name": "titleFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of title",
          "descriptionZh": "标题字体大小"
        },
        {
          "name": "titleLineHeight",
          "type": "string | number",
          "default": "",
          "description": "Line height of title",
          "descriptionZh": "标题行高"
        }
      ],
      "faq": [
        {
          "question": "Why I can not access context, redux in Modal.xxx?",
          "answer": "antd will dynamic create React instance by `ReactDOM.render` when call Modal methods. Whose context is different with origin code located context.\n\nWhen you need context info (like ConfigProvider context), you can use `Modal.useModal` to get `modal` instance and `contextHolder` node. And put it in your children:\n\n```tsx\nconst [modal, contextHolder] = Modal.useModal();\n\n// then call modal.confirm instead of Modal.confirm\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder is in Context1 which mean modal will not get context of Context1 */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder is out of Context2 which mean modal will not get context of Context2 */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**Note:** You must insert `contextHolder` into your children with hooks. You can use origin method if you do not need context connection."
        }
      ],
      "subComponents": [
        "Modal.method",
        "Modal.useModal",
        "Modal.config"
      ],
      "categoryZh": "反馈",
      "nameZh": "对话框",
      "since": "4.0.0",
      "doc": "\nModal dialogs.\n\n## When To Use\n\nWhen requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`, and so on.\n\n## API\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| afterClose | Specify a function that will be called when modal is closed completely | function | - |\n| bodyStyle | Body style for modal body element. Such as height, padding etc | CSSProperties | {} |\n| cancelText | Text of the Cancel button | string \\| ReactNode | `Cancel` |\n| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |\n| centered | Centered Modal | boolean | false |\n| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |\n| closeIcon | Custom close icon | ReactNode | &lt;CloseOutlined /> |\n| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |\n| destroyOnClose | Whether to unmount child components on onClose | boolean | false |\n| footer | Footer content, set as `footer={null}` when you don't need default buttons | string \\| ReactNode | (OK and Cancel buttons) |\n| forceRender | Force render Modal | boolean | false |\n| getContainer | Return the mount node for Modal | HTMLElement \\| () => HTMLElement \\| Selectors \\| false | document.body |\n| keyboard | Whether support press esc to close | boolean | true |\n| mask | Whether show mask or not | boolean | true |\n| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |\n| maskStyle | Style for modal's mask element | object | {} |\n| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |\n| okText | Text of the OK button | string \\| ReactNode | `OK` |\n| okType | Button `type` of the OK button | string | `primary` |\n| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |\n| onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - |\n| style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - |\n| title | The modal dialog's title | string \\| ReactNode | - |\n| visible | Whether the modal dialog is visible or not | boolean | false |\n| width | Width of the modal dialog | string \\| number | 520 |\n| wrapClassName | The class name of the container of the modal dialog | string | - |\n| zIndex | The `z-index` of the Modal | number | 1000 |\n\n#### Note\n\n- The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set `destroyOnClose` on it.\n- There is a situation that using `<Modal />` with Form, which won't clear fields value when closing Modal even you have set `destroyOnClose`. You need `<Form preserve={false} />` in this case.\n- `Modal.method()` RTL mode only supports hooks.\n\n### Modal.method()\n\nThere are five ways to display the information based on the content's nature:\n\n- `Modal.info`\n- `Modal.success`\n- `Modal.error`\n- `Modal.warning`\n- `Modal.confirm`\n\nThe items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| autoFocusButton | Specify which button to autofocus | null \\| `ok` \\| `cancel` | `ok` | |\n| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - | |\n| cancelText | Text of the Cancel button with Modal.confirm | string | `Cancel` | |\n| centered | Centered Modal | boolean | false | |\n| className | The className of container | string | - | |\n| content | Content | string \\| ReactNode | - | |\n| getContainer | Return the mount node for Modal | HTMLElement \\| () => HTMLElement \\| Selectors \\| false | document.body | |\n| icon | Custom icon | ReactNode | &lt;QuestionCircle /> | 3.12.0 |\n| keyboard | Whether support press esc to close | boolean | true | |\n| mask | Whether show mask or not. | boolean | true | |\n| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | false | |\n| maskStyle | Style for modal's mask element | object | {} | |\n| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | |\n| okText | Text of the OK button | string | `OK` | |\n| okType | Button `type` of the OK button | string | `primary` | |\n| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | |\n| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | |\n| style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - | |\n| title | Title | string \\| ReactNode | - | |\n| width | Width of the modal dialog | string \\| number | 416 | |\n| zIndex | The `z-index` of the Modal | number | 1000 | |\n\nAll the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference.\n\n```jsx\nconst modal = Modal.info();\n\nmodal.update({\n title: 'Updated title',\n content: 'Updated content',\n});\n\nmodal.destroy();\n```\n\n- `Modal.destroyAll`\n\n`Modal.destroyAll()` could destroy all confirmation modal dialogs(Modal.info/Modal.success/Modal.error/Modal.warning/Modal.confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)\n\n```jsx\nimport { browserHistory } from 'react-router';\n\n// router change\nbrowserHistory.listen(() => {\n Modal.destroyAll();\n});\n```\n\n### Modal.useModal()\n\nWhen you need using Context, you can use `contextHolder` which created by `Modal.useModal` to insert into children. Modal created by hooks will get all the context where `contextHolder` are. Created `modal` has the same creating function with `Modal.method`](<#Modal.method()>).\n\n```jsx\nconst [modal, contextHolder] = Modal.useModal();\n\nReact.useEffect(() => {\n modal.confirm({\n //...\n });\n}, []);\n\nreturn <div>{contextHolder}</div>;\n```\n\n### Modal.config() `4.5.0+`\n\nLike `message.config()`, `Modal.config()` could set `Modal.confirm` props globally (such as `prefixCls`), and it will affect `Modal.confirm|success|info|error|warning` **static methods only**.\n\n```jsx\nModal.config({\n rootPrefixCls: 'ant',\n});\n```\n\n## FAQ\n\n### Why I can not access context, redux in Modal.xxx?\n\nantd will dynamic create React instance by `ReactDOM.render` when call Modal methods. Whose context is different with origin code located context.\n\nWhen you need context info (like ConfigProvider context), you can use `Modal.useModal` to get `modal` instance and `contextHolder` node. And put it in your children:\n\n```tsx\nconst [modal, contextHolder] = Modal.useModal();\n\n// then call modal.confirm instead of Modal.confirm\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder is in Context1 which mean modal will not get context of Context1 */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder is out of Context2 which mean modal will not get context of Context2 */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**Note:** You must insert `contextHolder` into your children with hooks. You can use origin method if you do not need context connection.\n",
      "docZh": "\n模态对话框。\n\n## 何时使用\n\n需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。\n\n另外当需要一个简洁的确认框询问用户时，可以使用 `Modal.confirm()` 等语法糖方法。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| afterClose | Modal 完全关闭后的回调 | function | - |\n| bodyStyle | Modal body 样式 | object | {} |\n| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |\n| cancelText | 取消按钮文字 | string \\| ReactNode | `取消` |\n| centered | 垂直居中展示 Modal | boolean | false |\n| closable | 是否显示右上角的关闭按钮 | boolean | true |\n| closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> |\n| confirmLoading | 确定按钮 loading | boolean | false |\n| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |\n| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string \\| ReactNode | (确定取消按钮) |\n| forceRender | 强制渲染 Modal | boolean | false |\n| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \\| () => HTMLElement \\| Selectors \\| false | document.body |\n| keyboard | 是否支持键盘 esc 关闭 | boolean | true |\n| mask | 是否展示遮罩 | boolean | true |\n| maskClosable | 点击蒙层是否允许关闭 | boolean | true |\n| maskStyle | 遮罩样式 | object | {} |\n| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |\n| okText | 确认按钮文字 | string \\| ReactNode | `确定` |\n| okType | 确认按钮类型 | string | `primary` |\n| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |\n| onOk | 点击确定回调 | function(e) | - |\n| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - |\n| title | 标题 | string \\| ReactNode | - |\n| visible | 对话框是否可见 | boolean | - |\n| width | 宽度 | string \\| number | 520 |\n| wrapClassName | 对话框外层容器的类名 | string | - |\n| zIndex | 设置 Modal 的 `z-index` | number | 1000 |\n\n#### 注意\n\n- `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。\n- `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnClose` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。\n- `Modal.method()` RTL 模式仅支持 hooks 用法。\n\n### Modal.method()\n\n包括：\n\n- `Modal.info`\n- `Modal.success`\n- `Modal.error`\n- `Modal.warning`\n- `Modal.confirm`\n\n以上均为一个函数，参数为 object，具体属性如下：\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| autoFocusButton | 指定自动获得焦点的按钮 | null \\| `ok` \\| `cancel` | `ok` | |\n| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |\n| cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` | |\n| centered | 垂直居中展示 Modal | boolean | false | |\n| className | 容器类名 | string | - | |\n| content | 内容 | string \\| ReactNode | - | |\n| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \\| () => HTMLElement \\| Selectors \\| false | document.body | |\n| icon | 自定义图标 | ReactNode | &lt;QuestionCircle /> | 3.12.0 |\n| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |\n| mask | 是否展示遮罩 | boolean | true | |\n| maskClosable | 点击蒙层是否允许关闭 | boolean | false | |\n| maskStyle | 遮罩样式 | object | {} | |\n| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |\n| okText | 确认按钮文字 | string | `确定` | |\n| okType | 确认按钮类型 | string | `primary` | |\n| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | |\n| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | |\n| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | |\n| title | 标题 | string \\| ReactNode | - | |\n| width | 宽度 | string \\| number | 416 | |\n| zIndex | 设置 Modal 的 `z-index` | number | 1000 | |\n\n以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。\n\n```jsx\nconst modal = Modal.info();\n\nmodal.update({\n title: '修改的标题',\n content: '修改的内容',\n});\n\nmodal.destroy();\n```\n\n- `Modal.destroyAll`\n\n使用 `Modal.destroyAll()` 可以销毁弹出的确认窗（即上述的 `Modal.info`、`Modal.success`、`Modal.error`、`Modal.warning`、`Modal.confirm`）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（`modal.destroy()` 适用于主动关闭，而不是路由这样被动关闭）\n\n```jsx\nimport { browserHistory } from 'react-router';\n\n// router change\nbrowserHistory.listen(() => {\n Modal.destroyAll();\n});\n```\n\n### Modal.useModal()\n\n当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](<#Modal.method()>) 相同的创建通知方法。\n\n```jsx\nconst [modal, contextHolder] = Modal.useModal();\n\nReact.useEffect(() => {\n modal.confirm({\n //...\n });\n}, []);\n\nreturn <div>{contextHolder}</div>;\n```\n\n### Modal.config() `4.5.0+`\n\n类似 `message.config()`，全局设置 `Modal.confirm` 等方法的属性（如 `prefixCls`）。\n\n> 此方法只对 `Modal.confirm|success|info|error|warning` 等**静态方法**生效，`<Modal />` 的调用方式是读取 ConfigProvider 的设置。\n\n```jsx\nModal.config({\n rootPrefixCls: 'ant',\n});\n```\n\n## FAQ\n\n### 为什么 Modal 方法不能获取 context、redux 的内容？\n\n直接调用 Modal 方法，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。\n\n当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `Modal.useModal` 方法会返回 `modal` 实体以及 `contextHolder` 节点。将其插入到你需要获取 context 位置即可：\n\n```tsx\nconst [modal, contextHolder] = Modal.useModal();\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder 在 Context1 内，它可以获得 Context1 的 context */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder 在 Context2 外，因而不会获得 Context2 的 context */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**异同：**通过 hooks 创建的 `contextHolder` 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。\n"
    },
    {
      "name": "Notification",
      "category": "Feedback",
      "description": "",
      "whenToUse": "To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:\n\n- A notification with complex content.\n- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.\n- A notification that is pushed by the application.",
      "whenToUseZh": "在系统四个角显示通知提醒信息。经常用于以下情况：\n\n- 较为复杂的通知内容。\n- 带有交互的通知，给出用户下一步的行动点。\n- 系统主动推送。",
      "props": [
        {
          "name": "bottom",
          "type": "number",
          "default": "24",
          "description": "Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels)",
          "descriptionZh": "消息从底部弹出时，距离底部的位置，单位像素"
        },
        {
          "name": "btn",
          "type": "ReactNode",
          "default": "-",
          "description": "Customized close button",
          "descriptionZh": "自定义关闭按钮"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "Customized CSS class",
          "descriptionZh": "自定义 CSS class"
        },
        {
          "name": "description",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The content of notification box (required)",
          "descriptionZh": "通知提醒内容，必选"
        },
        {
          "name": "duration",
          "type": "number",
          "default": "4.5",
          "description": "Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically",
          "descriptionZh": "默认自动关闭延时，单位秒"
        },
        {
          "name": "getContainer",
          "type": "() => HTMLNode",
          "default": "() => document.body",
          "description": "Return the mount node for Notification",
          "descriptionZh": "配置渲染节点的输出位置"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "-",
          "description": "Customized icon",
          "descriptionZh": "自定义图标"
        },
        {
          "name": "closeIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "Custom close icon",
          "descriptionZh": "自定义关闭图标"
        },
        {
          "name": "key",
          "type": "string",
          "default": "-",
          "description": "The unique identifier of the Notification",
          "descriptionZh": "当前通知唯一标志"
        },
        {
          "name": "message",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The title of notification box (required)",
          "descriptionZh": "通知提醒标题，必选"
        },
        {
          "name": "onClose",
          "type": "function",
          "default": "-",
          "description": "Trigger when notification closed",
          "descriptionZh": "当通知关闭时触发"
        },
        {
          "name": "onClick",
          "type": "function",
          "default": "-",
          "description": "Specify a function that will be called when the notification is clicked",
          "descriptionZh": "点击通知时触发的回调函数"
        },
        {
          "name": "placement",
          "type": "string",
          "default": "`topRight`",
          "description": "Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight`",
          "descriptionZh": "弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight`"
        },
        {
          "name": "style",
          "type": "",
          "default": "-",
          "description": "Customized inline style",
          "descriptionZh": "自定义内联样式"
        },
        {
          "name": "top",
          "type": "number",
          "default": "24",
          "description": "Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels)",
          "descriptionZh": "消息从顶部弹出时，距离顶部的位置，单位像素"
        },
        {
          "name": "bottom",
          "type": "number",
          "default": "24",
          "description": "Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels)",
          "descriptionZh": "消息从底部弹出时，距离底部的位置，单位像素"
        },
        {
          "name": "closeIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "Custom close icon",
          "descriptionZh": "自定义关闭图标"
        },
        {
          "name": "duration",
          "type": "number",
          "default": "4.5",
          "description": "Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically",
          "descriptionZh": "默认自动关闭延时，单位秒"
        },
        {
          "name": "getContainer",
          "type": "() => HTMLNode",
          "default": "() => document.body",
          "description": "Return the mount node for Notification",
          "descriptionZh": "配置渲染节点的输出位置"
        },
        {
          "name": "placement",
          "type": "string",
          "default": "`topRight`",
          "description": "Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight`",
          "descriptionZh": "弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight`"
        },
        {
          "name": "top",
          "type": "number",
          "default": "24",
          "description": "Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels)",
          "descriptionZh": "消息从顶部弹出时，距离顶部的位置，单位像素"
        },
        {
          "name": "rtl",
          "type": "boolean",
          "default": "false",
          "description": "Whether to enable RTL mode",
          "descriptionZh": "是否开启 RTL 模式"
        }
      ],
      "tokens": [
        {
          "name": "colorErrorBg",
          "type": "string",
          "default": "",
          "description": "Background color of error notification container",
          "descriptionZh": "错误提醒框容器背景色"
        },
        {
          "name": "colorInfoBg",
          "type": "string",
          "default": "",
          "description": "Background color of info notification container",
          "descriptionZh": "信息提醒框容器背景色"
        },
        {
          "name": "colorSuccessBg",
          "type": "string",
          "default": "",
          "description": "Background color of success notification container",
          "descriptionZh": "成功提醒框容器背景色"
        },
        {
          "name": "colorWarningBg",
          "type": "string",
          "default": "",
          "description": "Background color of warning notification container",
          "descriptionZh": "警告提醒框容器背景色"
        },
        {
          "name": "progressBg",
          "type": "string",
          "default": "",
          "description": "Background color of Notification progress bar",
          "descriptionZh": "提醒框进度条背景色"
        },
        {
          "name": "width",
          "type": "string | number",
          "default": "",
          "description": "Width of Notification",
          "descriptionZh": "提醒框宽度"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of Notification",
          "descriptionZh": "提醒框 z-index"
        }
      ],
      "faq": [
        {
          "question": "Why I can not access context, redux in notification?",
          "answer": "antd will dynamic create React instance by `ReactDOM.render` when call notification methods. Whose context is different with origin code located context.\n\nWhen you need context info (like ConfigProvider context), you can use `notification.useNotification` to get `api` instance and `contextHolder` node. And put it in your children:\n\n```tsx\nconst [api, contextHolder] = notification.useNotification();\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder is inside Context1 which means api will get value of Context1 */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder is outside Context2 which means api will **not** get value of Context2 */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**Note:** You must insert `contextHolder` into your children with hooks. You can use origin method if you do not need context connection."
        }
      ],
      "categoryZh": "反馈",
      "nameZh": "通知提醒框",
      "since": "4.0.0",
      "doc": "\nDisplay a notification message globally.\n\n## When To Use\n\nTo display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:\n\n- A notification with complex content.\n- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.\n- A notification that is pushed by the application.\n\n## API\n\n- `notification.success(config)`\n- `notification.error(config)`\n- `notification.info(config)`\n- `notification.warning(config)`\n- `notification.warn(config)`\n- `notification.open(config)`\n- `notification.close(key: String)`\n- `notification.destroy()`\n\nThe properties of config are as follows:\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |\n| btn | Customized close button | ReactNode | - |\n| className | Customized CSS class | string | - |\n| description | The content of notification box (required) | string \\| ReactNode | - |\n| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |\n| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |\n| icon | Customized icon | ReactNode | - |\n| closeIcon | Custom close icon | ReactNode | - |\n| key | The unique identifier of the Notification | string | - |\n| message | The title of notification box (required) | string \\| ReactNode | - |\n| onClose | Trigger when notification closed | function | - |\n| onClick | Specify a function that will be called when the notification is clicked | function | - |\n| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |\n| style | Customized inline style | | - |\n| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |\n\n`notification` also provides a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.\n\n- `notification.config(options)`\n\n > When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default.(4.3.0+)\n >\n > When you want to use it alone, you can start the RTL mode through the following settings.\n\n```js\nnotification.config({\n placement: 'bottomRight',\n bottom: 50,\n duration: 3,\n rtl: true,\n});\n```\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |\n| closeIcon | Custom close icon | ReactNode | - |\n| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |\n| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |\n| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |\n| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |\n| rtl | Whether to enable RTL mode | boolean | false |\n\n## FAQ\n\n### Why I can not access context, redux in notification?\n\nantd will dynamic create React instance by `ReactDOM.render` when call notification methods. Whose context is different with origin code located context.\n\nWhen you need context info (like ConfigProvider context), you can use `notification.useNotification` to get `api` instance and `contextHolder` node. And put it in your children:\n\n```tsx\nconst [api, contextHolder] = notification.useNotification();\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder is inside Context1 which means api will get value of Context1 */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder is outside Context2 which means api will **not** get value of Context2 */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**Note:** You must insert `contextHolder` into your children with hooks. You can use origin method if you do not need context connection.\n",
      "docZh": "\n全局展示通知提醒信息。\n\n## 何时使用\n\n在系统四个角显示通知提醒信息。经常用于以下情况：\n\n- 较为复杂的通知内容。\n- 带有交互的通知，给出用户下一步的行动点。\n- 系统主动推送。\n\n## API\n\n- `notification.success(config)`\n- `notification.error(config)`\n- `notification.info(config)`\n- `notification.warning(config)`\n- `notification.warn(config)`\n- `notification.open(config)`\n- `notification.close(key: String)`\n- `notification.destroy()`\n\nconfig 参数如下：\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| btn | 自定义关闭按钮 | ReactNode | - |\n| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |\n| className | 自定义 CSS class | string | - |\n| closeIcon | 自定义关闭图标 | ReactNode | - |\n| description | 通知提醒内容，必选 | string \\| ReactNode | - |\n| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 |\n| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |\n| icon | 自定义图标 | ReactNode | - |\n| key | 当前通知唯一标志 | string | - |\n| message | 通知提醒标题，必选 | string \\| ReactNode | - |\n| onClose | 当通知关闭时触发 | function | - |\n| onClick | 点击通知时触发的回调函数 | function | - |\n| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |\n| style | 自定义内联样式 | | - |\n| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |\n\n还提供了一个全局配置方法，在调用前提前配置，全局一次生效。\n\n- `notification.config(options)`\n\n > 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)\n >\n > 当你想单独使用，可通过如下设置开启 RTL 模式。\n\n```js\nnotification.config({\n placement: 'bottomRight',\n bottom: 50,\n duration: 3,\n rtl: true,\n});\n```\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |\n| closeIcon | 自定义关闭图标 | ReactNode | - |\n| duration | 默认自动关闭延时，单位秒 | number | 4.5 |\n| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |\n| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |\n| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |\n| rtl | 是否开启 RTL 模式 | boolean | false |\n\n## FAQ\n\n### 为什么 notification 不能获取 context、redux 的内容？\n\n直接调用 notification 方法，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。\n\n当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `notification.useNotification` 方法会返回 `api` 实体以及 `contextHolder` 节点。将其插入到你需要获取 context 位置即可：\n\n```tsx\nconst [api, contextHolder] = notification.useNotification();\n\nreturn (\n <Context1.Provider value=\"Ant\">\n {/* contextHolder 在 Context1 内，它可以获得 Context1 的 context */}\n {contextHolder}\n <Context2.Provider value=\"Design\">\n {/* contextHolder 在 Context2 外，因而不会获得 Context2 的 context */}\n </Context2.Provider>\n </Context1.Provider>\n);\n```\n\n**异同：**通过 hooks 创建的 `contextHolder` 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。\n"
    },
    {
      "name": "PageHeader",
      "category": "Navigation",
      "description": "",
      "whenToUse": "PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.",
      "whenToUseZh": "当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。",
      "props": [],
      "categoryZh": "导航",
      "nameZh": "页头",
      "since": "4.0.0",
      "doc": "\nA header with common actions and design elements built in.\n\n## When To Use\n\nPageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.\n\n## API\n\n| Param | Description | Type | Default value | Version |\n| --- | --- | --- | --- | --- |\n| title | Custom title text | ReactNode | - | |\n| subTitle | Custom subtitle text | ReactNode | - | |\n| ghost | PageHeader type, will change background color | boolean | true | |\n| avatar | Avatar next to the title bar | [AvatarProps](/components/avatar/) | - | |\n| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \\| boolean | &lt;ArrowLeft /> | |\n| tags | Tag list next to title | [Tag](/components/tag/)[] \\| [Tag](/components/tag/) | - | |\n| extra | Operating area, at the end of the line of the title line | ReactNode | - | |\n| breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - | |\n| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | |\n| onBack | Back icon click event | () => void | - | |\n\n<style>\n [data-theme=\"dark\"].site-page-header {\n border: 1px solid #303030;\n }\n [data-theme=\"dark\"].site-page-header-ghost-wrapper {\n background-color: rgba(255,255,255,0.08);\n }\n</style>\n",
      "docZh": "\n页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。\n\n## 何时使用\n\n当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| title | 自定义标题文字 | ReactNode | - | |\n| subTitle | 自定义的二级标题文字 | ReactNode | - | |\n| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | |\n| avatar | 标题栏旁的头像 | [AvatarProps](/components/avatar/) | - | |\n| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \\| boolean | &lt;ArrowLeft /> | |\n| tags | title 旁的 tag 列表 | [Tag](/components/tag/)[] \\| [Tag](/components/tag/) | - | |\n| extra | 操作区，位于 title 行的行尾 | ReactNode | - | |\n| breadcrumb | 面包屑的配置 | [Breadcrumb](/components/breadcrumb/) | - | |\n| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | |\n| onBack | 返回按钮的点击事件 | () => void | - | |\n\n<style>\n [data-theme=\"dark\"].site-page-header {\n border: 1px solid #303030;\n }\n [data-theme=\"dark\"].site-page-header-ghost-wrapper {\n background-color: rgba(255,255,255,0.08);\n }\n</style>\n"
    },
    {
      "name": "Pagination",
      "category": "Navigation",
      "description": "",
      "whenToUse": "- When it will take a long time to load/render all items.\n- If you want to browse the data by navigating through pages.",
      "whenToUseZh": "- 当加载/渲染所有数据将花费很多时间时；\n- 可切换页码浏览数据。",
      "props": [
        {
          "name": "current",
          "type": "number",
          "default": "-",
          "description": "Current page number",
          "descriptionZh": "当前页数"
        },
        {
          "name": "defaultCurrent",
          "type": "number",
          "default": "1",
          "description": "Default initial page number",
          "descriptionZh": "默认的当前页数"
        },
        {
          "name": "defaultPageSize",
          "type": "number",
          "default": "10",
          "description": "Default number of data items per page",
          "descriptionZh": "默认的每页条数"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "-",
          "description": "Disable pagination",
          "descriptionZh": "禁用分页"
        },
        {
          "name": "hideOnSinglePage",
          "type": "boolean",
          "default": "false",
          "description": "Whether to hide pager on single page",
          "descriptionZh": "只有一页时是否隐藏分页器"
        },
        {
          "name": "itemRender",
          "type": "(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode",
          "default": "-",
          "description": "To customize item's innerHTML",
          "since": "'next', originalElement) => React.ReactNode",
          "descriptionZh": "用于自定义页码的结构，可用于优化 SEO"
        },
        {
          "name": "pageSize",
          "type": "number",
          "default": "-",
          "description": "Number of data items per page",
          "descriptionZh": "每页条数"
        },
        {
          "name": "pageSizeOptions",
          "type": "string[]",
          "default": "[`10`, `20`, `50`, `100`]",
          "description": "Specify the sizeChanger options",
          "descriptionZh": "指定每页可以显示多少条"
        },
        {
          "name": "showLessItems",
          "type": "boolean",
          "default": "false",
          "description": "Show less page items",
          "descriptionZh": "是否显示较少页面内容"
        },
        {
          "name": "showQuickJumper",
          "type": "boolean | { goButton: ReactNode }",
          "default": "false",
          "description": "Determine whether you can jump to pages directly",
          "since": "false",
          "descriptionZh": "是否可以快速跳转至某页"
        },
        {
          "name": "showSizeChanger",
          "type": "boolean",
          "default": "-",
          "description": "Determine whether to show `pageSize` select, it will be true when `total > 50`",
          "descriptionZh": "是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true"
        },
        {
          "name": "showTitle",
          "type": "boolean",
          "default": "true",
          "description": "Show page item's title",
          "descriptionZh": "是否显示原生 tooltip 页码提示"
        },
        {
          "name": "showTotal",
          "type": "function(total, range)",
          "default": "-",
          "description": "To display the total number and range",
          "descriptionZh": "用于显示数据总量和当前数据顺序"
        },
        {
          "name": "simple",
          "type": "boolean",
          "default": "-",
          "description": "Whether to use simple mode",
          "descriptionZh": "当添加该属性时，显示为简单分页"
        },
        {
          "name": "size",
          "type": "`default` | `small`",
          "default": "`default`",
          "description": "Specify the size of `Pagination`, can be set to `small`",
          "since": "`default`",
          "descriptionZh": "当为 `small` 时，是小尺寸分页"
        },
        {
          "name": "responsive",
          "type": "boolean",
          "default": "-",
          "description": "If `size` is not specified, `Pagination` would resize according to the width of the window",
          "descriptionZh": "当 size 未指定时，根据屏幕宽度自动调整尺寸"
        },
        {
          "name": "total",
          "type": "number",
          "default": "0",
          "description": "Total number of data items",
          "descriptionZh": "数据总数"
        },
        {
          "name": "onChange",
          "type": "function(page, pageSize)",
          "default": "-",
          "description": "Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments",
          "descriptionZh": "页码改变的回调，参数是改变后的页码及每页条数"
        },
        {
          "name": "onShowSizeChange",
          "type": "function(current, size)",
          "default": "-",
          "description": "Called when `pageSize` is changed",
          "descriptionZh": "pageSize 变化的回调"
        }
      ],
      "tokens": [
        {
          "name": "itemActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color of active Pagination item",
          "descriptionZh": "页码激活态背景色"
        },
        {
          "name": "itemActiveBgDisabled",
          "type": "string",
          "default": "",
          "description": "Background color of disabled active Pagination item",
          "descriptionZh": "页码激活态禁用状态背景色"
        },
        {
          "name": "itemActiveColor",
          "type": "string",
          "default": "",
          "description": "Text color of active Pagination item",
          "descriptionZh": "页码激活态文字颜色"
        },
        {
          "name": "itemActiveColorDisabled",
          "type": "string",
          "default": "",
          "description": "Text color of disabled active Pagination item",
          "descriptionZh": "页码激活态禁用状态文字颜色"
        },
        {
          "name": "itemActiveColorHover",
          "type": "string",
          "default": "",
          "description": "Text color of active Pagination item hover",
          "descriptionZh": "页码激活态文字颜色悬停态"
        },
        {
          "name": "itemBg",
          "type": "string",
          "default": "",
          "description": "Background color of Pagination item",
          "descriptionZh": "页码选项背景色"
        },
        {
          "name": "itemInputBg",
          "type": "string",
          "default": "",
          "description": "Background color of input",
          "descriptionZh": "输入框背景色"
        },
        {
          "name": "itemLinkBg",
          "type": "string",
          "default": "",
          "description": "Background color of Pagination item link",
          "descriptionZh": "页码链接背景色"
        },
        {
          "name": "itemSize",
          "type": "number",
          "default": "",
          "description": "Size of Pagination item",
          "descriptionZh": "页码尺寸"
        },
        {
          "name": "itemSizeLG",
          "type": "number",
          "default": "",
          "description": "Size of large Pagination item",
          "descriptionZh": "大号页码尺寸"
        },
        {
          "name": "itemSizeSM",
          "type": "number",
          "default": "",
          "description": "Size of small Pagination item",
          "descriptionZh": "小号页码尺寸"
        },
        {
          "name": "miniOptionsSizeChangerTop",
          "type": "number",
          "default": "",
          "description": "Top of Pagination size changer",
          "descriptionZh": "每页展示数量选择器 top"
        }
      ],
      "categoryZh": "导航",
      "nameZh": "分页",
      "since": "4.0.0",
      "doc": "\nA long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time.\n\n## When To Use\n\n- When it will take a long time to load/render all items.\n- If you want to browse the data by navigating through pages.\n\n## API\n\n```jsx\n<Pagination onChange={onChange} total={50} />\n```\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| current | Current page number | number | - | |\n| defaultCurrent | Default initial page number | number | 1 | |\n| defaultPageSize | Default number of data items per page | number | 10 | |\n| disabled | Disable pagination | boolean | - | |\n| hideOnSinglePage | Whether to hide pager on single page | boolean | false | |\n| itemRender | To customize item's innerHTML | (page, type: 'page' \\| 'prev' \\| 'next', originalElement) => React.ReactNode | - | |\n| pageSize | Number of data items per page | number | - | |\n| pageSizeOptions | Specify the sizeChanger options | string\\[] | \\[`10`, `20`, `50`, `100`] | |\n| showLessItems | Show less page items | boolean | false | |\n| showQuickJumper | Determine whether you can jump to pages directly | boolean \\| { goButton: ReactNode } | false | |\n| showSizeChanger | Determine whether to show `pageSize` select, it will be true when `total > 50` | boolean | - | |\n| showTitle | Show page item's title | boolean | true | |\n| showTotal | To display the total number and range | function(total, range) | - | |\n| simple | Whether to use simple mode | boolean | - | |\n| size | Specify the size of `Pagination`, can be set to `small` | `default` \\| `small` | `default` | |\n| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - | |\n| total | Total number of data items | number | 0 | |\n| onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | - | |\n| onShowSizeChange | Called when `pageSize` is changed | function(current, size) | - | |\n",
      "docZh": "\n采用分页的形式分隔长列表，每次只加载一个页面。\n\n## 何时使用\n\n- 当加载/渲染所有数据将花费很多时间时；\n- 可切换页码浏览数据。\n\n## API\n\n```jsx\n<Pagination onChange={onChange} total={50} />\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| current | 当前页数 | number | - | |\n| defaultCurrent | 默认的当前页数 | number | 1 | |\n| defaultPageSize | 默认的每页条数 | number | 10 | |\n| disabled | 禁用分页 | boolean | - | |\n| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |\n| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \\| 'prev' \\| 'next', originalElement) => React.ReactNode | - | |\n| pageSize | 每页条数 | number | - | |\n| pageSizeOptions | 指定每页可以显示多少条 | string\\[] | \\[`10`, `20`, `50`, `100`] | |\n| showLessItems | 是否显示较少页面内容 | boolean | false | |\n| showQuickJumper | 是否可以快速跳转至某页 | boolean \\| { goButton: ReactNode } | false | |\n| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean | - | |\n| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |\n| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |\n| simple | 当添加该属性时，显示为简单分页 | boolean | - | |\n| size | 当为 `small` 时，是小尺寸分页 | `default` \\| `small` | `default` | |\n| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |\n| total | 数据总数 | number | 0 | |\n| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | |\n| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |\n"
    },
    {
      "name": "Popconfirm",
      "category": "Feedback",
      "description": "",
      "whenToUse": "A simple and compact dialog used for asking for user confirmation.\n\nThe difference with the `confirm` modal dialog is that it's more lightweight than the static popped full-screen confirm modal.",
      "whenToUseZh": "目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。\n\n和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。",
      "props": [],
      "tokens": [
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of Popconfirm",
          "descriptionZh": "确认框 z-index"
        }
      ],
      "categoryZh": "反馈",
      "nameZh": "气泡确认框",
      "since": "4.0.0",
      "doc": "\nA simple and compact confirmation dialog of an action.\n\n## When To Use\n\nA simple and compact dialog used for asking for user confirmation.\n\nThe difference with the `confirm` modal dialog is that it's more lightweight than the static popped full-screen confirm modal.\n\n## API\n\n| Param | Description | Type | Default value |\n| --- | --- | --- | --- |\n| cancelText | The text of the Cancel button | string | `Cancel` |\n| okText | The text of the Confirm button | string | `OK` |\n| okType | Button `type` of the Confirm button | string | `primary` |\n| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |\n| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |\n| title | The title of the confirmation box | string \\| ReactNode \\| () => ReactNode | - |\n| onCancel | A callback of cancel | function(e) | - |\n| onConfirm | A callback of confirmation | function(e) | - |\n| icon | Customize icon of confirmation | ReactNode | &lt;ExclamationCircle /> |\n| disabled | Whether show popconfirm when click its childrenNode | boolean | false |\n\nConsult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.\n\n## Note\n\nPlease ensure that the child node of `Popconfirm` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.\n",
      "docZh": "\n点击元素，弹出气泡式的确认框。\n\n## 何时使用\n\n目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。\n\n和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| cancelText | 取消按钮文字 | string | `取消` |\n| okText | 确认按钮文字 | string | `确定` |\n| okType | 确认按钮类型 | string | `primary` |\n| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |\n| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |\n| title | 确认框的描述 | string \\| ReactNode \\| () => ReactNode | - |\n| onCancel | 点击取消的回调 | function(e) | - |\n| onConfirm | 点击确认的回调 | function(e) | - |\n| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;ExclamationCircle /> |\n| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false |\n\n更多属性请参考 [Tooltip](/components/tooltip/#API)。\n\n## 注意\n\n请确保 `Popconfirm` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。\n"
    },
    {
      "name": "Popover",
      "category": "Data Display",
      "description": "",
      "whenToUse": "A simple popup menu to provide extra information or operations.\n\nComparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons.",
      "whenToUseZh": "当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。\n\n和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。",
      "props": [],
      "tokens": [
        {
          "name": "titleMinWidth",
          "type": "string | number",
          "default": "",
          "description": "Min width of Popover title",
          "descriptionZh": "气泡卡片标题最小宽度"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of Popover",
          "descriptionZh": "气泡卡片 z-index"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "气泡卡片",
      "since": "4.0.0",
      "doc": "\nThe floating card popped by clicking or hovering.\n\n## When To Use\n\nA simple popup menu to provide extra information or operations.\n\nComparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons.\n\n## API\n\n| Param | Description | Type | Default value | Version |\n| ------- | ------------------- | -------------------------------------- | ------------- | ------- |\n| content | Content of the card | string \\| ReactNode \\| () => ReactNode | - | |\n| title | Title of the card | string \\| ReactNode \\| () => ReactNode | - | |\n\nConsult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.\n\n## Note\n\nPlease ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.\n",
      "docZh": "\n点击/鼠标移入元素，弹出气泡式的卡片浮层。\n\n## 何时使用\n\n当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。\n\n和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ------- | -------- | -------------------------------------- | ------ | ---- |\n| content | 卡片内容 | string \\| ReactNode \\| () => ReactNode | - | |\n| title | 卡片标题 | string \\| ReactNode \\| () => ReactNode | - | |\n\n更多属性请参考 [Tooltip](/components/tooltip/#API)。\n\n## 注意\n\n请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。\n"
    },
    {
      "name": "Progress",
      "category": "Feedback",
      "description": "",
      "whenToUse": "If it will take a long time to complete an operation, you can use `Progress` to show the current progress and status.\n\n- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.\n- When you need to display the completion percentage of an operation.",
      "whenToUseZh": "在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。\n\n- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；\n- 当需要显示一个操作完成的百分比时。",
      "props": [
        {
          "name": "type",
          "type": "string",
          "default": "`line`",
          "description": "To set the type, options: `line` `circle` `dashboard`",
          "descriptionZh": "类型，可选 `line` `circle` `dashboard`"
        },
        {
          "name": "format",
          "type": "function(percent, successPercent)",
          "default": "(percent) => percent + `%`",
          "description": "The template function of the content",
          "descriptionZh": "内容的模板函数"
        },
        {
          "name": "percent",
          "type": "number",
          "default": "0",
          "description": "To set the completion percentage",
          "descriptionZh": "百分比"
        },
        {
          "name": "showInfo",
          "type": "boolean",
          "default": "true",
          "description": "Whether to display the progress value and the status icon",
          "descriptionZh": "是否显示进度数值或状态图标"
        },
        {
          "name": "status",
          "type": "string",
          "default": "-",
          "description": "To set the status of the Progress, options: `success` `exception` `normal` `active`(line only)",
          "descriptionZh": "状态，可选：`success` `exception` `normal` `active`(仅限 line)"
        },
        {
          "name": "strokeLinecap",
          "type": "`round` | `square`",
          "default": "`round`",
          "description": "To set the style of the progress linecap",
          "descriptionZh": "进度条的样式"
        },
        {
          "name": "strokeColor",
          "type": "string",
          "default": "-",
          "description": "The color of progress bar",
          "descriptionZh": "圆形进度条线的色彩，传入 object 时为渐变"
        },
        {
          "name": "trailColor",
          "type": "string",
          "default": "-",
          "description": "The color of unfilled part",
          "descriptionZh": "未完成的分段的颜色"
        },
        {
          "name": "success",
          "type": "{ percent: number, strokeColor: string }",
          "default": "-",
          "description": "Configs of successfully progress bar",
          "descriptionZh": "成功进度条相关配置"
        },
        {
          "name": "strokeWidth",
          "type": "number",
          "default": "10",
          "description": "To set the width of the progress bar, unit: `px`",
          "descriptionZh": "仪表盘进度条线的宽度，单位是进度条画布宽度的百分比"
        },
        {
          "name": "strokeColor",
          "type": "string | object",
          "default": "-",
          "description": "The color of progress bar, render `linear-gradient` when passing an object",
          "descriptionZh": "圆形进度条线的色彩，传入 object 时为渐变"
        },
        {
          "name": "steps",
          "type": "number",
          "default": "-",
          "description": "The total step count",
          "descriptionZh": "进度条总共步数"
        },
        {
          "name": "width",
          "type": "number",
          "default": "132",
          "description": "To set the canvas width of the circular progress, unit: `px`",
          "descriptionZh": "仪表盘进度条画布宽度，单位 px"
        },
        {
          "name": "strokeWidth",
          "type": "number",
          "default": "6",
          "description": "To set the width of the circular progress, unit: percentage of the canvas width",
          "descriptionZh": "仪表盘进度条线的宽度，单位是进度条画布宽度的百分比"
        },
        {
          "name": "strokeColor",
          "type": "string | object",
          "default": "-",
          "description": "The color of circular progress, render `linear-gradient` when passing an object",
          "descriptionZh": "圆形进度条线的色彩，传入 object 时为渐变"
        },
        {
          "name": "width",
          "type": "number",
          "default": "132",
          "description": "To set the canvas width of the dashboard progress, unit: `px`",
          "descriptionZh": "仪表盘进度条画布宽度，单位 px"
        },
        {
          "name": "strokeWidth",
          "type": "number",
          "default": "6",
          "description": "To set the width of the dashboard progress, unit: percentage of the canvas width",
          "descriptionZh": "仪表盘进度条线的宽度，单位是进度条画布宽度的百分比"
        },
        {
          "name": "gapDegree",
          "type": "number",
          "default": "75",
          "description": "The gap degree of half circle, 0 ~ 295",
          "descriptionZh": "仪表盘进度条缺口角度，可取值 0 ~ 295"
        },
        {
          "name": "gapPosition",
          "type": "string",
          "default": "`bottom`",
          "description": "The gap position, options: `top` `bottom` `left` `right`",
          "descriptionZh": "仪表盘进度条缺口位置"
        }
      ],
      "tokens": [
        {
          "name": "circleIconFontSize",
          "type": "string",
          "default": "",
          "description": "Icon size of circular progress bar",
          "descriptionZh": "圆形进度条图标大小"
        },
        {
          "name": "circleTextColor",
          "type": "string",
          "default": "",
          "description": "Text color of circular progress bar",
          "descriptionZh": "圆形进度条文字颜色"
        },
        {
          "name": "circleTextFontSize",
          "type": "string",
          "default": "",
          "description": "Text size of circular progress bar",
          "descriptionZh": "圆形进度条文本大小"
        },
        {
          "name": "defaultColor",
          "type": "string",
          "default": "",
          "description": "Default color of progress bar",
          "descriptionZh": "进度条默认颜色"
        },
        {
          "name": "lineBorderRadius",
          "type": "number",
          "default": "",
          "description": "Border radius of line progress bar",
          "descriptionZh": "条状进度条圆角"
        },
        {
          "name": "remainingColor",
          "type": "string",
          "default": "",
          "description": "Color of remaining part of progress bar",
          "descriptionZh": "进度条剩余部分颜色"
        }
      ],
      "categoryZh": "反馈",
      "nameZh": "进度条",
      "since": "4.0.0",
      "doc": "\nDisplay the current progress of an operation flow.\n\n## When To Use\n\nIf it will take a long time to complete an operation, you can use `Progress` to show the current progress and status.\n\n- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.\n- When you need to display the completion percentage of an operation.\n\n## API\n\nProperties that shared by all types.\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| type | To set the type, options: `line` `circle` `dashboard` | string | `line` |\n| format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` |\n| percent | To set the completion percentage | number | 0 |\n| showInfo | Whether to display the progress value and the status icon | boolean | true |\n| status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |\n| strokeLinecap | To set the style of the progress linecap | `round` \\| `square` | `round` |\n| strokeColor | The color of progress bar | string | - |\n| trailColor | The color of unfilled part | string | - |\n| success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - |\n\n### `type=\"line\"`\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 |\n| strokeColor | The color of progress bar, render `linear-gradient` when passing an object | string \\| { from: string; to: string; direction: string } | - |\n| steps | The total step count | number | - |\n\n### `type=\"circle\"`\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| width | To set the canvas width of the circular progress, unit: `px` | number | 132 |\n| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 |\n| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \\| object | - |\n\n### `type=\"dashboard\"`\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| width | To set the canvas width of the dashboard progress, unit: `px` | number | 132 |\n| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |\n| gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |\n| gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` |\n",
      "docZh": "\n展示操作的当前进度。\n\n## 何时使用\n\n在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。\n\n- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；\n- 当需要显示一个操作完成的百分比时。\n\n## API\n\n各类型共用的属性。\n\n| 属性 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |\n| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` |\n| percent | 百分比 | number | 0 |\n| showInfo | 是否显示进度数值或状态图标 | boolean | true |\n| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |\n| strokeLinecap | 进度条的样式 | `round` \\| `square` | `round` |\n| strokeColor | 进度条的色彩 | string | - |\n| trailColor | 未完成的分段的颜色 | string | - |\n| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - |\n\n### `type=\"line\"`\n\n| 属性 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| strokeWidth | 进度条线的宽度，单位 px | number | 10 |\n| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \\| { from: string; to: string; direction: string } | - |\n| steps | 进度条总共步数 | number | - |\n\n### `type=\"circle\"`\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ----------- | ------------------------------------------------ | ---------------- | ------ |\n| width | 圆形进度条画布宽度，单位 px | number | 132 |\n| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |\n| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \\| object | - |\n\n### `type=\"dashboard\"`\n\n| 属性 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| width | 仪表盘进度条画布宽度，单位 px | number | 132 |\n| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |\n| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 |\n| gapPosition | 仪表盘进度条缺口位置 | `top` \\| `bottom` \\| `left` \\| `right` | `bottom` |\n"
    },
    {
      "name": "Radio",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "- Used to select a single state from multiple options.\n- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.",
      "whenToUseZh": "- 用于在多个备选项中选中单个状态。\n- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。",
      "props": [
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "Whether get focus when component mounted",
          "descriptionZh": "自动获取焦点"
        },
        {
          "name": "checked",
          "type": "boolean",
          "default": "false",
          "description": "Specifies whether the radio is selected",
          "descriptionZh": "指定当前是否选中"
        },
        {
          "name": "defaultChecked",
          "type": "boolean",
          "default": "false",
          "description": "Specifies the initial state: whether or not the radio is selected",
          "descriptionZh": "初始是否选中"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disable radio",
          "descriptionZh": "禁选所有子单选器"
        },
        {
          "name": "value",
          "type": "any",
          "default": "-",
          "description": "According to value for comparison, to determine whether the selected",
          "descriptionZh": "用于设置当前选中的值"
        },
        {
          "name": "defaultValue",
          "type": "any",
          "default": "-",
          "description": "Default selected value",
          "descriptionZh": "默认选中的值"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disable all radio buttons",
          "descriptionZh": "禁选所有子单选器"
        },
        {
          "name": "name",
          "type": "string",
          "default": "-",
          "description": "The `name` property of all `input[type=\"radio\"]` children",
          "descriptionZh": "RadioGroup 下所有 `input[type=\"radio\"]` 的 `name` 属性"
        },
        {
          "name": "options",
          "type": "string[] | Array<{ label: string value: string disabled?: boolean }>",
          "default": "-",
          "description": "Set children optional",
          "since": "-",
          "descriptionZh": "以配置形式设置子元素"
        },
        {
          "name": "size",
          "type": "`large` | `middle` | `small`",
          "default": "-",
          "description": "The size of radio button style",
          "since": "`small`",
          "descriptionZh": "大小，只对按钮样式生效"
        },
        {
          "name": "value",
          "type": "any",
          "default": "-",
          "description": "Used for setting the currently selected value",
          "descriptionZh": "用于设置当前选中的值"
        },
        {
          "name": "onChange",
          "type": "function(e:Event)",
          "default": "-",
          "description": "The callback function that is triggered when the state changes",
          "descriptionZh": "选项变化时的回调函数"
        },
        {
          "name": "optionType",
          "type": "`default` | `button`",
          "default": "`default`",
          "description": "Set Radio optionType",
          "since": "4.4.0",
          "descriptionZh": "用于设置 Radio `options` 类型"
        },
        {
          "name": "buttonStyle",
          "type": "`outline` | `solid`",
          "default": "`outline`",
          "description": "The style type of radio button",
          "since": "`outline`",
          "descriptionZh": "RadioButton 的风格样式，目前有描边和填色两种风格"
        }
      ],
      "tokens": [
        {
          "name": "buttonBg",
          "type": "string",
          "default": "",
          "description": "Background color of Radio button",
          "descriptionZh": "单选框按钮背景色"
        },
        {
          "name": "buttonCheckedBg",
          "type": "string",
          "default": "",
          "description": "Background color of checked Radio button",
          "descriptionZh": "单选框按钮选中背景色"
        },
        {
          "name": "buttonCheckedBgDisabled",
          "type": "string",
          "default": "",
          "description": "Background color of checked and disabled Radio button",
          "descriptionZh": "单选框按钮选中并禁用时的背景色"
        },
        {
          "name": "buttonCheckedColorDisabled",
          "type": "string",
          "default": "",
          "description": "Color of checked and disabled Radio button text",
          "descriptionZh": "单选框按钮选中并禁用时的文本颜色"
        },
        {
          "name": "buttonColor",
          "type": "string",
          "default": "",
          "description": "Color of Radio button text",
          "descriptionZh": "单选框按钮文本颜色"
        },
        {
          "name": "buttonPaddingInline",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of Radio button",
          "descriptionZh": "单选框按钮横向内间距"
        },
        {
          "name": "buttonSolidCheckedActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color of checked solid Radio button text when active",
          "descriptionZh": "单选框实色按钮选中时的激活态背景色"
        },
        {
          "name": "buttonSolidCheckedBg",
          "type": "string",
          "default": "",
          "description": "Background color of checked solid Radio button text",
          "descriptionZh": "单选框实色按钮选中时的背景色"
        },
        {
          "name": "buttonSolidCheckedColor",
          "type": "string",
          "default": "",
          "description": "Color of checked solid Radio button text",
          "descriptionZh": "单选框实色按钮选中时的文本颜色"
        },
        {
          "name": "buttonSolidCheckedHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of checked solid Radio button text when hover",
          "descriptionZh": "单选框实色按钮选中时的悬浮态背景色"
        },
        {
          "name": "dotColorDisabled",
          "type": "string",
          "default": "",
          "description": "Color of disabled Radio dot",
          "descriptionZh": "单选框圆点禁用颜色"
        },
        {
          "name": "dotSize",
          "type": "number",
          "default": "",
          "description": "Size of Radio dot",
          "descriptionZh": "单选框圆点大小"
        },
        {
          "name": "radioSize",
          "type": "number",
          "default": "",
          "description": "Radio size",
          "descriptionZh": "单选框大小"
        },
        {
          "name": "wrapperMarginInlineEnd",
          "type": "number",
          "default": "",
          "description": "Margin right of Radio button",
          "descriptionZh": "单选框右间距"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "单选框",
      "since": "4.0.0",
      "doc": "\nRadio.\n\n## When To Use\n\n- Used to select a single state from multiple options.\n- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.\n\n## API\n\n### Radio/Radio.Button\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| autoFocus | Whether get focus when component mounted | boolean | false |\n| checked | Specifies whether the radio is selected | boolean | false |\n| defaultChecked | Specifies the initial state: whether or not the radio is selected | boolean | false |\n| disabled | Disable radio | boolean | false |\n| value | According to value for comparison, to determine whether the selected | any | - |\n\n### RadioGroup\n\nRadio group can wrap a group of `Radio`。\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| defaultValue | Default selected value | any | - | |\n| disabled | Disable all radio buttons | boolean | false | |\n| name | The `name` property of all `input[type=\"radio\"]` children | string | - | |\n| options | Set children optional | string\\[] \\| Array&lt;{ label: string value: string disabled?: boolean }> | - | |\n| size | The size of radio button style | `large` \\| `middle` \\| `small` | - | |\n| value | Used for setting the currently selected value | any | - | |\n| onChange | The callback function that is triggered when the state changes | function(e:Event) | - | |\n| optionType | Set Radio optionType | `default` \\| `button` | `default` | 4.4.0 |\n| buttonStyle | The style type of radio button | `outline` \\| `solid` | `outline` | |\n\n## Methods\n\n### Radio\n\n| Name | Description |\n| ------- | ------------ |\n| blur() | Remove focus |\n| focus() | Get focus |\n",
      "docZh": "\n单选框。\n\n## 何时使用\n\n- 用于在多个备选项中选中单个状态。\n- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。\n\n## API\n\n### Radio/Radio.Button\n\n| 参数 | 说明 | 类型 | 默认值 |\n| -------------- | --------------------------------- | ------- | ------ |\n| autoFocus | 自动获取焦点 | boolean | false |\n| checked | 指定当前是否选中 | boolean | false |\n| defaultChecked | 初始是否选中 | boolean | false |\n| disabled | 禁用 Radio | boolean | false |\n| value | 根据 value 进行比较，判断是否选中 | any | - |\n\n### RadioGroup\n\n单选框组合，用于包裹一组 `Radio`。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| defaultValue | 默认选中的值 | any | - | |\n| disabled | 禁选所有子单选器 | boolean | false | | |\n| name | RadioGroup 下所有 `input[type=\"radio\"]` 的 `name` 属性 | string | - | |\n| options | 以配置形式设置子元素 | string\\[] \\| Array&lt;{ label: string value: string disabled?: boolean }> | - | |\n| size | 大小，只对按钮样式生效 | `large` \\| `middle` \\| `small` | - | |\n| value | 用于设置当前选中的值 | any | - | |\n| onChange | 选项变化时的回调函数 | function(e:Event) | - | |\n| optionType | 用于设置 Radio `options` 类型 | `default` \\| `button` | `default` | 4.4.0 |\n| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \\| `solid` | `outline` | |\n\n## 方法\n\n### Radio\n\n| 名称 | 描述 |\n| ------- | -------- |\n| blur() | 移除焦点 |\n| focus() | 获取焦点 |\n"
    },
    {
      "name": "Rate",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "- Show evaluation.\n- A quick rating operation on something.",
      "whenToUseZh": "- 对评价进行展示。\n- 对事物进行快速的评级操作。",
      "props": [
        {
          "name": "allowClear",
          "type": "",
          "default": "true",
          "description": "Whether to allow clear when click again",
          "descriptionZh": "是否允许再次点击后清除"
        },
        {
          "name": "allowHalf",
          "type": "",
          "default": "false",
          "description": "Whether to allow semi selection",
          "descriptionZh": "是否允许半选"
        },
        {
          "name": "autoFocus",
          "type": "",
          "default": "false",
          "description": "If get focus when component mounted",
          "descriptionZh": "自动获取焦点"
        },
        {
          "name": "character",
          "type": "",
          "default": "(RateProps) => ReactNode",
          "description": "The custom character of rate",
          "since": "<StarFilled />",
          "descriptionZh": "自定义字符"
        },
        {
          "name": "className",
          "type": "",
          "default": "-",
          "description": "The custom class name of rate",
          "descriptionZh": "自定义样式类名"
        },
        {
          "name": "count",
          "type": "",
          "default": "5",
          "description": "Star count",
          "descriptionZh": "star 总数"
        },
        {
          "name": "defaultValue",
          "type": "",
          "default": "0",
          "description": "The default value",
          "descriptionZh": "默认值"
        },
        {
          "name": "disabled",
          "type": "",
          "default": "false",
          "description": "If read only, unable to interact",
          "descriptionZh": "只读，无法进行交互"
        },
        {
          "name": "style",
          "type": "",
          "default": "-",
          "description": "The custom style object of rate",
          "descriptionZh": "自定义样式对象"
        },
        {
          "name": "tooltips",
          "type": "",
          "default": "-",
          "description": "Customize tooltip by each character",
          "descriptionZh": "自定义每项的提示信息"
        },
        {
          "name": "value",
          "type": "",
          "default": "-",
          "description": "The current value",
          "descriptionZh": "当前数，受控值"
        },
        {
          "name": "onBlur",
          "type": "",
          "default": "-",
          "description": "Callback when component lose focus",
          "descriptionZh": "失去焦点时的回调"
        },
        {
          "name": "onChange",
          "type": "",
          "default": "-",
          "description": "Callback when select value",
          "descriptionZh": "选择时的回调"
        },
        {
          "name": "onFocus",
          "type": "",
          "default": "-",
          "description": "Callback when component get focus",
          "descriptionZh": "获取焦点时的回调"
        },
        {
          "name": "onHoverChange",
          "type": "",
          "default": "-",
          "description": "Callback when hover item",
          "descriptionZh": "鼠标经过时数值变化的回调"
        },
        {
          "name": "onKeyDown",
          "type": "",
          "default": "-",
          "description": "Callback when keydown on component",
          "descriptionZh": "按键回调"
        }
      ],
      "tokens": [
        {
          "name": "starBg",
          "type": "string",
          "default": "",
          "description": "Star background color",
          "descriptionZh": "星星背景色"
        },
        {
          "name": "starColor",
          "type": "string",
          "default": "",
          "description": "Star color",
          "descriptionZh": "星星颜色"
        },
        {
          "name": "starHoverScale",
          "type": "readonly string[] | Transform | readonly Transform[] | { _multi_value_?: boolean; _skip_check_?: boolean; value: readonly string[] | Transform | (readonly string[] | Transform | undefined)[] | undefined } | undefined",
          "default": "",
          "description": "Scale of star when hover",
          "descriptionZh": "星星悬浮时的缩放"
        },
        {
          "name": "starSize",
          "type": "number",
          "default": "",
          "description": "Star size",
          "descriptionZh": "星星尺寸"
        },
        {
          "name": "starSizeLG",
          "type": "number",
          "default": "",
          "description": "Large star size",
          "descriptionZh": "大星星尺寸"
        },
        {
          "name": "starSizeSM",
          "type": "number",
          "default": "",
          "description": "Small star size",
          "descriptionZh": "小星星尺寸"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "评分",
      "since": "4.0.0",
      "doc": "\nRate component.\n\n## When To Use\n\n- Show evaluation.\n- A quick rating operation on something.\n\n## API\n\n| Property | Description | type | Default | Version |\n| --- | --- | --- | --- | --- |\n| allowClear | Whether to allow clear when click again | boolean | true | |\n| allowHalf | Whether to allow semi selection | boolean | false | |\n| autoFocus | If get focus when component mounted | boolean | false | |\n| character | The custom character of rate | ReactNode \\| (RateProps) => ReactNode | &lt;StarFilled /> | function(): 4.4.0 |\n| className | The custom class name of rate | string | - | |\n| count | Star count | number | 5 | |\n| defaultValue | The default value | number | 0 | |\n| disabled | If read only, unable to interact | boolean | false | |\n| style | The custom style object of rate | CSSProperties | - | |\n| tooltips | Customize tooltip by each character | string\\[] | - | |\n| value | The current value | number | - | |\n| onBlur | Callback when component lose focus | function() | - | |\n| onChange | Callback when select value | function(value: number) | - | |\n| onFocus | Callback when component get focus | function() | - | |\n| onHoverChange | Callback when hover item | function(value: number) | - | |\n| onKeyDown | Callback when keydown on component | function(event) | - | |\n\n## Methods\n\n| Name | Description |\n| ------- | ------------ |\n| blur() | Remove focus |\n| focus() | Get focus |\n",
      "docZh": "\n评分组件。\n\n## 何时使用\n\n- 对评价进行展示。\n- 对事物进行快速的评级操作。\n\n## API\n\n| 属性 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowClear | 是否允许再次点击后清除 | boolean | true | |\n| allowHalf | 是否允许半选 | boolean | false | |\n| autoFocus | 自动获取焦点 | boolean | false | |\n| character | 自定义字符 | ReactNode \\| (RateProps) => ReactNode | &lt;StarFilled /> | function(): 4.4.0 |\n| className | 自定义样式类名 | string | - | |\n| count | star 总数 | number | 5 | |\n| defaultValue | 默认值 | number | 0 | |\n| disabled | 只读，无法进行交互 | boolean | false | |\n| style | 自定义样式对象 | CSSProperties | - | |\n| tooltips | 自定义每项的提示信息 | string\\[] | - | |\n| value | 当前数，受控值 | number | - | |\n| onBlur | 失去焦点时的回调 | function() | - | |\n| onChange | 选择时的回调 | function(value: number) | - | |\n| onFocus | 获取焦点时的回调 | function() | - | |\n| onHoverChange | 鼠标经过时数值变化的回调 | function(value: number) | - | |\n| onKeyDown | 按键回调 | function(event) | - | |\n\n## 方法\n\n| 名称 | 描述 |\n| ------- | -------- |\n| blur() | 移除焦点 |\n| focus() | 获取焦点 |\n"
    },
    {
      "name": "Result",
      "category": "Feedback",
      "description": "",
      "whenToUse": "Use when important operations need to inform the user to process the results and the feedback is more complicated.",
      "whenToUseZh": "当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。",
      "props": [
        {
          "name": "title",
          "type": "ReactNode",
          "default": "-",
          "description": "The title",
          "descriptionZh": "title 文字"
        },
        {
          "name": "subTitle",
          "type": "ReactNode",
          "default": "-",
          "description": "The subTitle",
          "descriptionZh": "subTitle 文字"
        },
        {
          "name": "status",
          "type": "`success` | `error` | `info` | `warning` | `404` | `403` | `500`",
          "default": "`info`",
          "description": "Result status, decide icons and colors",
          "descriptionZh": "结果的状态，决定图标和颜色"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "-",
          "description": "Custom back icon",
          "descriptionZh": "自定义 icon"
        },
        {
          "name": "extra",
          "type": "ReactNode",
          "default": "-",
          "description": "Operating area",
          "descriptionZh": "操作区"
        }
      ],
      "tokens": [
        {
          "name": "extraMargin",
          "type": "Margin<string | number> | undefined",
          "default": "",
          "description": "Margin of extra area",
          "descriptionZh": "额外区域外间距"
        },
        {
          "name": "iconFontSize",
          "type": "number",
          "default": "",
          "description": "Icon size",
          "descriptionZh": "图标大小"
        },
        {
          "name": "subtitleFontSize",
          "type": "number",
          "default": "",
          "description": "Subtitle font size",
          "descriptionZh": "副标题字体大小"
        },
        {
          "name": "titleFontSize",
          "type": "number",
          "default": "",
          "description": "Title font size",
          "descriptionZh": "标题字体大小"
        }
      ],
      "categoryZh": "反馈",
      "nameZh": "结果",
      "since": "4.0.0",
      "doc": "\nUsed to feed back the results of a series of operational tasks.\n\n## When To Use\n\nUse when important operations need to inform the user to process the results and the feedback is more complicated.\n\n## API\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| title | The title | ReactNode | - |\n| subTitle | The subTitle | ReactNode | - |\n| status | Result status, decide icons and colors | `success` \\| `error` \\| `info` \\| `warning` \\| `404` \\| `403` \\| `500` | `info` |\n| icon | Custom back icon | ReactNode | - |\n| extra | Operating area | ReactNode | - |\n",
      "docZh": "\n用于反馈一系列操作任务的处理结果。\n\n## 何时使用\n\n当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| title | title 文字 | ReactNode | - |\n| subTitle | subTitle 文字 | ReactNode | - |\n| status | 结果的状态，决定图标和颜色 | `success` \\| `error` \\| `info` \\| `warning` \\| `404` \\| `403` \\| `500` | `info` |\n| icon | 自定义 icon | ReactNode | - |\n| extra | 操作区 | ReactNode | - |\n"
    },
    {
      "name": "Select",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "- A dropdown menu for displaying choices - an elegant alternative to the native `<select>` element.\n- Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).",
      "whenToUseZh": "- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。\n- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio/) 是更好的选择。",
      "props": [
        {
          "name": "allowClear",
          "type": "boolean",
          "default": "false",
          "description": "Show clear button",
          "descriptionZh": "支持清除"
        },
        {
          "name": "autoClearSearchValue",
          "type": "boolean",
          "default": "true",
          "description": "Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`",
          "descriptionZh": "是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效"
        },
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "Get focus by default",
          "descriptionZh": "默认获取焦点"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Whether has border style",
          "descriptionZh": "是否有边框"
        },
        {
          "name": "clearIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom clear icon",
          "descriptionZh": "自定义的多选框清空图标"
        },
        {
          "name": "defaultActiveFirstOption",
          "type": "boolean",
          "default": "true",
          "description": "Whether active first option by default",
          "descriptionZh": "是否默认高亮第一个选项"
        },
        {
          "name": "defaultOpen",
          "type": "boolean",
          "default": "-",
          "description": "Initial open state of dropdown",
          "descriptionZh": "是否默认展开下拉菜单"
        },
        {
          "name": "defaultValue",
          "type": "string | string[]<br />number | number[]<br />LabeledValue | LabeledValue[]",
          "default": "-",
          "description": "Initial selected option",
          "since": "number[]<br />LabeledValue \\",
          "descriptionZh": "指定默认选中的条目"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Whether disabled select",
          "descriptionZh": "是否禁用"
        },
        {
          "name": "dropdownClassName",
          "type": "string",
          "default": "-",
          "description": "The className of dropdown menu",
          "descriptionZh": "下拉菜单的 className 属性"
        },
        {
          "name": "dropdownMatchSelectWidth",
          "type": "boolean | number",
          "default": "true",
          "description": "Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll",
          "since": "true",
          "descriptionZh": "下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动"
        },
        {
          "name": "dropdownRender",
          "type": "(originNode: ReactNode) => ReactNode",
          "default": "-",
          "description": "Customize dropdown content",
          "descriptionZh": "自定义下拉框内容"
        },
        {
          "name": "dropdownStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "The style of dropdown menu",
          "descriptionZh": "下拉菜单的 style 属性"
        },
        {
          "name": "filterOption",
          "type": "boolean | function(inputValue, option)",
          "default": "true",
          "description": "If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded",
          "since": "true",
          "descriptionZh": "是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false"
        },
        {
          "name": "getPopupContainer",
          "type": "function(triggerNode)",
          "default": "() => document.body",
          "description": "Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0)",
          "descriptionZh": "菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0)"
        },
        {
          "name": "labelInValue",
          "type": "boolean",
          "default": "false",
          "description": "Whether to embed label in value, turn the format of value from `string` to { value: string, label: ReactNode }",
          "descriptionZh": "是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 { value: string, label: ReactNode } 的格式"
        },
        {
          "name": "listHeight",
          "type": "number",
          "default": "256",
          "description": "Config popup height",
          "descriptionZh": "设置弹窗滚动高度"
        },
        {
          "name": "loading",
          "type": "boolean",
          "default": "false",
          "description": "Indicate loading state",
          "descriptionZh": "加载中状态"
        },
        {
          "name": "maxTagCount",
          "type": "number",
          "default": "-",
          "description": "Max tag count to show",
          "descriptionZh": "最多显示多少个 tag"
        },
        {
          "name": "maxTagPlaceholder",
          "type": "ReactNode | function(omittedValues)",
          "default": "-",
          "description": "Placeholder for not showing tags",
          "since": "-",
          "descriptionZh": "隐藏 tag 时显示的内容"
        },
        {
          "name": "maxTagTextLength",
          "type": "number",
          "default": "-",
          "description": "Max tag text length to show",
          "descriptionZh": "最大显示的 tag 文本长度"
        },
        {
          "name": "menuItemSelectedIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom menuItemSelected icon with multiple options",
          "descriptionZh": "自定义多选时当前选中的条目图标"
        },
        {
          "name": "mode",
          "type": "`multiple` | `tags`",
          "default": "-",
          "description": "Set mode of Select",
          "since": "-",
          "descriptionZh": "设置 Select 的模式为多选或标签"
        },
        {
          "name": "notFoundContent",
          "type": "ReactNode",
          "default": "`Not Found`",
          "description": "Specify content to show when no result matches",
          "descriptionZh": "当下拉列表为空时显示的内容"
        },
        {
          "name": "onBlur",
          "type": "function",
          "default": "-",
          "description": "Called when blur",
          "descriptionZh": "失去焦点时回调"
        },
        {
          "name": "onChange",
          "type": "function(value, option:Option | Array<Option>)",
          "default": "-",
          "description": "Called when select an option or input value change",
          "since": "-",
          "descriptionZh": "选中 option，或 input 的 value 变化时，调用此函数"
        },
        {
          "name": "onClear",
          "type": "function",
          "default": "-",
          "description": "Called when clear",
          "since": "4.6.0",
          "descriptionZh": "清除内容时回调"
        },
        {
          "name": "onDeselect",
          "type": "function(string | number | LabeledValue)",
          "default": "-",
          "description": "Called when a option is deselected, param is the selected option's value. Only called for `multiple` or `tags`, effective in multiple or tags mode only",
          "since": "LabeledValue)",
          "descriptionZh": "取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 或 `tags` 模式下生效"
        },
        {
          "name": "onDropdownVisibleChange",
          "type": "function(open)",
          "default": "-",
          "description": "Called when dropdown open",
          "descriptionZh": "展开下拉菜单的回调"
        },
        {
          "name": "onFocus",
          "type": "function",
          "default": "-",
          "description": "Called when focus",
          "descriptionZh": "获得焦点时回调"
        },
        {
          "name": "onInputKeyDown",
          "type": "function",
          "default": "-",
          "description": "Called when key pressed",
          "descriptionZh": "按键按下时回调"
        },
        {
          "name": "onMouseEnter",
          "type": "function",
          "default": "-",
          "description": "Called when mouse enter",
          "descriptionZh": "鼠标移入时回调"
        },
        {
          "name": "onMouseLeave",
          "type": "function",
          "default": "-",
          "description": "Called when mouse leave",
          "descriptionZh": "鼠标移出时回调"
        },
        {
          "name": "onPopupScroll",
          "type": "function",
          "default": "-",
          "description": "Called when dropdown scrolls",
          "descriptionZh": "下拉列表滚动时的回调"
        },
        {
          "name": "onSearch",
          "type": "function(value: string)",
          "default": "-",
          "description": "Callback function that is fired when input changed",
          "descriptionZh": "文本框值变化时回调"
        },
        {
          "name": "onSelect",
          "type": "function(string | number | LabeledValue, option: Option)",
          "default": "-",
          "description": "Called when a option is selected, the params are option's value (or key) and option instance",
          "since": "LabeledValue, option: Option)",
          "descriptionZh": "被选中时调用，参数为选中项的 value (或 key) 值"
        },
        {
          "name": "open",
          "type": "boolean",
          "default": "-",
          "description": "Controlled open state of dropdown",
          "descriptionZh": "是否展开下拉菜单"
        },
        {
          "name": "options",
          "type": "{ label, value }[]",
          "default": "-",
          "description": "Select options. Will get better perf than jsx definition",
          "descriptionZh": "数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能"
        },
        {
          "name": "optionFilterProp",
          "type": "string",
          "default": "`value`",
          "description": "Which prop value of option will be used for filter if filterOption is true",
          "descriptionZh": "搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678)"
        },
        {
          "name": "optionLabelProp",
          "type": "string",
          "default": "`children`",
          "description": "Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678)",
          "descriptionZh": "回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`"
        },
        {
          "name": "placeholder",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Placeholder of select",
          "since": "-",
          "descriptionZh": "选择框默认文字"
        },
        {
          "name": "removeIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom remove icon",
          "descriptionZh": "自定义的多选框清除图标"
        },
        {
          "name": "showArrow",
          "type": "boolean",
          "default": "true(for single select), false(for multiple select)",
          "description": "Whether to show the drop-down arrow",
          "descriptionZh": "是否显示下拉小箭头"
        },
        {
          "name": "showSearch",
          "type": "boolean",
          "default": "false",
          "description": "Whether show search input in single mode",
          "descriptionZh": "使单选模式可搜索"
        },
        {
          "name": "size",
          "type": "`large` | `middle` | `small`",
          "default": "-",
          "description": "Size of Select input",
          "since": "`small`",
          "descriptionZh": "选择框大小"
        },
        {
          "name": "suffixIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom suffix icon",
          "descriptionZh": "自定义的选择框后缀图标"
        },
        {
          "name": "tagRender",
          "type": "(props) => ReactNode",
          "default": "-",
          "description": "Customize tag render",
          "descriptionZh": "自定义 tag 内容 render"
        },
        {
          "name": "tokenSeparators",
          "type": "string[]",
          "default": "-",
          "description": "Separator used to tokenize on `tag` and `multiple` mode",
          "descriptionZh": "在 `tags` 和 `multiple` 模式下自动分词的分隔符"
        },
        {
          "name": "value",
          "type": "string | number",
          "default": "-",
          "description": "Current selected option",
          "since": "number[]<br />LabeledValue \\",
          "descriptionZh": "默认根据此属性值进行筛选"
        },
        {
          "name": "virtual",
          "type": "boolean",
          "default": "true",
          "description": "Disable virtual scroll when set to false",
          "since": "4.1.0",
          "descriptionZh": "设置 false 时关闭虚拟滚动"
        },
        {
          "name": "blur()",
          "type": "",
          "default": "-",
          "description": "Remove focus",
          "descriptionZh": ""
        },
        {
          "name": "focus()",
          "type": "",
          "default": "-",
          "description": "Get focus",
          "descriptionZh": ""
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The additional class to option",
          "descriptionZh": "Option 器类名"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disable this option",
          "descriptionZh": "是否禁用"
        },
        {
          "name": "title",
          "type": "string",
          "default": "-",
          "description": "`title` of Select after select this Option",
          "descriptionZh": "选中该 Option 后，Select 的 title"
        },
        {
          "name": "value",
          "type": "string | number",
          "default": "-",
          "description": "Default to filter with this property",
          "since": "-",
          "descriptionZh": "默认根据此属性值进行筛选"
        },
        {
          "name": "key",
          "type": "string",
          "default": "-",
          "description": "Group key",
          "descriptionZh": "Key"
        },
        {
          "name": "label",
          "type": "string | React.Element",
          "default": "-",
          "description": "Group label",
          "since": "-",
          "descriptionZh": "组名"
        }
      ],
      "tokens": [
        {
          "name": "activeBorderColor",
          "type": "string",
          "default": "",
          "description": "Active border color",
          "descriptionZh": "激活态边框色"
        },
        {
          "name": "activeOutlineColor",
          "type": "string",
          "default": "",
          "description": "Active outline color",
          "descriptionZh": "激活态 outline 颜色"
        },
        {
          "name": "clearBg",
          "type": "string",
          "default": "",
          "description": "Background color of clear button",
          "descriptionZh": "清空按钮背景色"
        },
        {
          "name": "hoverBorderColor",
          "type": "string",
          "default": "",
          "description": "Hover border color",
          "descriptionZh": "悬浮态边框色"
        },
        {
          "name": "multipleItemBg",
          "type": "string",
          "default": "",
          "description": "Background color of multiple tag",
          "descriptionZh": "多选标签背景色"
        },
        {
          "name": "multipleItemBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of multiple tag",
          "descriptionZh": "多选标签边框色"
        },
        {
          "name": "multipleItemBorderColorDisabled",
          "type": "string",
          "default": "",
          "description": "Border color of multiple tag when disabled",
          "descriptionZh": "多选标签禁用边框色"
        },
        {
          "name": "multipleItemColorDisabled",
          "type": "string",
          "default": "",
          "description": "Text color of multiple tag when disabled",
          "descriptionZh": "多选标签禁用文本颜色"
        },
        {
          "name": "multipleItemHeight",
          "type": "number",
          "default": "",
          "description": "Height of multiple tag",
          "descriptionZh": "多选标签高度"
        },
        {
          "name": "multipleItemHeightLG",
          "type": "number",
          "default": "",
          "description": "Height of multiple tag with large size",
          "descriptionZh": "大号多选标签高度"
        },
        {
          "name": "multipleItemHeightSM",
          "type": "number",
          "default": "",
          "description": "Height of multiple tag with small size",
          "descriptionZh": "小号多选标签高度"
        },
        {
          "name": "multipleSelectorBgDisabled",
          "type": "string",
          "default": "",
          "description": "Background color of multiple selector when disabled",
          "descriptionZh": "多选框禁用背景"
        },
        {
          "name": "optionActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color when option is active",
          "descriptionZh": "选项激活态时背景色"
        },
        {
          "name": "optionFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of option",
          "descriptionZh": "选项字体大小"
        },
        {
          "name": "optionHeight",
          "type": "number",
          "default": "",
          "description": "Height of option",
          "descriptionZh": "选项高度"
        },
        {
          "name": "optionLineHeight",
          "type": "LineHeight<string | number> | undefined",
          "default": "",
          "description": "Line height of option",
          "descriptionZh": "选项行高"
        },
        {
          "name": "optionPadding",
          "type": "Padding<string | number> | undefined",
          "default": "",
          "description": "Padding of option",
          "descriptionZh": "选项内间距"
        },
        {
          "name": "optionSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color when option is selected",
          "descriptionZh": "选项选中时背景色"
        },
        {
          "name": "optionSelectedColor",
          "type": "string",
          "default": "",
          "description": "Text color when option is selected",
          "descriptionZh": "选项选中时文本颜色"
        },
        {
          "name": "optionSelectedFontWeight",
          "type": "FontWeight | undefined",
          "default": "",
          "description": "Font weight when option is selected",
          "descriptionZh": "选项选中时文本字重"
        },
        {
          "name": "selectorBg",
          "type": "string",
          "default": "",
          "description": "Background color of selector",
          "descriptionZh": "选框背景色"
        },
        {
          "name": "showArrowPaddingInlineEnd",
          "type": "number",
          "default": "",
          "description": "Inline end padding of arrow",
          "descriptionZh": "箭头的行末内边距"
        },
        {
          "name": "singleItemHeightLG",
          "type": "number",
          "default": "",
          "description": "Height of single selected item with large size",
          "descriptionZh": "单选大号回填项高度"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of dropdown",
          "descriptionZh": "下拉菜单 z-index"
        }
      ],
      "faq": [
        {
          "question": "The dropdown is closed when click `dropdownRender` area?",
          "answer": "See the instruction in [dropdownRender example](#components-select-demo-custom-dropdown-menu)."
        },
        {
          "question": "Why sometime customize Option cause scroll break?",
          "answer": "Virtual scroll internal set item height as `32px`. You need to adjust `listItemHeight` when your option height is less and `listHeight` config list container height:\n\n```tsx\n<Select listItemHeight={10} listHeight={250} />\n```\n\nNote: `listItemHeight` and `listHeight` are internal props. Please only modify when necessary."
        },
        {
          "question": "Why a11y test report missing `aria-` props?",
          "answer": "Select only create a11y auxiliary node when operating on. Please open Select and retry. For `aria-label` & `aria-labelledby` miss warning, please add related prop to Select with your own requirement."
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "选择器",
      "since": "4.0.0",
      "doc": "\nSelect component to select value from options.\n\n## When To Use\n\n- A dropdown menu for displaying choices - an elegant alternative to the native `<select>` element.\n- Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).\n\n## API\n\n```jsx\n<Select>\n <Option value=\"lucy\">lucy</Option>\n</Select>\n```\n\n### Select props\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| allowClear | Show clear button | boolean | false | |\n| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags` | boolean | true | |\n| autoFocus | Get focus by default | boolean | false | |\n| bordered | Whether has border style | boolean | true | |\n| clearIcon | The custom clear icon | ReactNode | - | |\n| defaultActiveFirstOption | Whether active first option by default | boolean | true | |\n| defaultOpen | Initial open state of dropdown | boolean | - | |\n| defaultValue | Initial selected option | string \\| string\\[]<br />number \\| number\\[]<br />LabeledValue \\| LabeledValue[] | - | |\n| disabled | Whether disabled select | boolean | false | |\n| dropdownClassName | The className of dropdown menu | string | - | |\n| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \\| number | true | |\n| dropdownRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - | |\n| dropdownStyle | The style of dropdown menu | CSSProperties | - | |\n| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \\| function(inputValue, option) | true | |\n| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |\n| labelInValue | Whether to embed label in value, turn the format of value from `string` to { value: string, label: ReactNode } | boolean | false | |\n| listHeight | Config popup height | number | 256 | |\n| loading | Indicate loading state | boolean | false | |\n| maxTagCount | Max tag count to show | number | - | |\n| maxTagPlaceholder | Placeholder for not showing tags | ReactNode \\| function(omittedValues) | - | |\n| maxTagTextLength | Max tag text length to show | number | - | |\n| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - | |\n| mode | Set mode of Select | `multiple` \\| `tags` | - | |\n| notFoundContent | Specify content to show when no result matches | ReactNode | `Not Found` | |\n| onBlur | Called when blur | function | - | |\n| onChange | Called when select an option or input value change | function(value, option:Option \\| Array&lt;Option>) | - | |\n| onClear | Called when clear | function | - | 4.6.0 |\n| onDeselect | Called when a option is deselected, param is the selected option's value. Only called for `multiple` or `tags`, effective in multiple or tags mode only | function(string \\| number \\| LabeledValue) | - | |\n| onDropdownVisibleChange | Called when dropdown open | function(open) | - | |\n| onFocus | Called when focus | function | - | |\n| onInputKeyDown | Called when key pressed | function | - | |\n| onMouseEnter | Called when mouse enter | function | - | |\n| onMouseLeave | Called when mouse leave | function | - | |\n| onPopupScroll | Called when dropdown scrolls | function | - | |\n| onSearch | Callback function that is fired when input changed | function(value: string) | - | |\n| onSelect | Called when a option is selected, the params are option's value (or key) and option instance | function(string \\| number \\| LabeledValue, option: Option) | - | |\n| open | Controlled open state of dropdown | boolean | - | |\n| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | |\n| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` | |\n| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | |\n| placeholder | Placeholder of select | string \\| ReactNode | - | |\n| removeIcon | The custom remove icon | ReactNode | - | |\n| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) | |\n| showSearch | Whether show search input in single mode | boolean | false | |\n| size | Size of Select input | `large` \\| `middle` \\| `small` | - | |\n| suffixIcon | The custom suffix icon | ReactNode | - | |\n| tagRender | Customize tag render | (props) => ReactNode | - | |\n| tokenSeparators | Separator used to tokenize on `tag` and `multiple` mode | string\\[] | - | |\n| value | Current selected option | string \\| string\\[]<br />number \\| number\\[]<br />LabeledValue \\| LabeledValue[] | - | |\n| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |\n\n> Note, if you find that the drop-down menu scrolls with the page, or you need to trigger Select in other popup layers, please try to use `getPopupContainer={triggerNode => triggerNode.parentElement}` to fix the drop-down popup rendering node in the parent element of the trigger.\n\n### Select Methods\n\n| Name | Description | Version |\n| ------- | ------------ | ------- |\n| blur() | Remove focus | |\n| focus() | Get focus | |\n\n### Option props\n\n| Property | Description | Type | Default | Version |\n| --------- | ------------------------------------------ | ---------------- | ------- | ------- |\n| className | The additional class to option | string | - | |\n| disabled | Disable this option | boolean | false | |\n| title | `title` of Select after select this Option | string | - | |\n| value | Default to filter with this property | string \\| number | - | |\n\n### OptGroup props\n\n| Property | Description | Type | Default | Version |\n| -------- | ----------- | ----------------------- | ------- | ------- |\n| key | Group key | string | - | |\n| label | Group label | string \\| React.Element | - | |\n\n## FAQ\n\n### The dropdown is closed when click `dropdownRender` area?\n\nSee the instruction in [dropdownRender example](#components-select-demo-custom-dropdown-menu).\n\n### Why sometime customize Option cause scroll break?\n\nVirtual scroll internal set item height as `32px`. You need to adjust `listItemHeight` when your option height is less and `listHeight` config list container height:\n\n```tsx\n<Select listItemHeight={10} listHeight={250} />\n```\n\nNote: `listItemHeight` and `listHeight` are internal props. Please only modify when necessary.\n\n### Why a11y test report missing `aria-` props?\n\nSelect only create a11y auxiliary node when operating on. Please open Select and retry. For `aria-label` & `aria-labelledby` miss warning, please add related prop to Select with your own requirement.\n",
      "docZh": "\n下拉选择器。\n\n## 何时使用\n\n- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。\n- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio/) 是更好的选择。\n\n## API\n\n```jsx\n<Select>\n <Option value=\"lucy\">lucy</Option>\n</Select>\n```\n\n### Select props\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowClear | 支持清除 | boolean | false | |\n| autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效 | boolean | true | |\n| autoFocus | 默认获取焦点 | boolean | false | |\n| bordered | 是否有边框 | boolean | true | |\n| clearIcon | 自定义的多选框清空图标 | ReactNode | - | |\n| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |\n| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |\n| defaultValue | 指定默认选中的条目 | string \\| string\\[]<br />number \\| number\\[]<br />LabeledValue \\| LabeledValue[] | - | |\n| disabled | 是否禁用 | boolean | false | |\n| dropdownClassName | 下拉菜单的 className 属性 | string | - | |\n| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \\| number | true | |\n| dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - | |\n| dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - | |\n| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \\| function(inputValue, option) | true | |\n| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |\n| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 { value: string, label: ReactNode } 的格式 | boolean | false | |\n| listHeight | 设置弹窗滚动高度 | number | 256 | |\n| loading | 加载中状态 | boolean | false | |\n| maxTagCount | 最多显示多少个 tag | number | - | |\n| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \\| function(omittedValues) | - | |\n| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |\n| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | |\n| mode | 设置 Select 的模式为多选或标签 | `multiple` \\| `tags` | - | |\n| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` | |\n| onBlur | 失去焦点时回调 | function | - | |\n| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value, option:Option \\| Array&lt;Option>) | - | |\n| onClear | 清除内容时回调 | function | - | 4.6.0 |\n| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 或 `tags` 模式下生效 | function(string \\| number \\| LabeledValue) | - | |\n| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |\n| onFocus | 获得焦点时回调 | function | - | |\n| onInputKeyDown | 按键按下时回调 | function | - | |\n| onMouseEnter | 鼠标移入时回调 | function | - | |\n| onMouseLeave | 鼠标移出时回调 | function | - | |\n| onPopupScroll | 下拉列表滚动时的回调 | function | - | |\n| onSearch | 文本框值变化时回调 | function(value: string) | - | |\n| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(string \\| number \\| LabeledValue, option: Option) | - | |\n| open | 是否展开下拉菜单 | boolean | - | |\n| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |\n| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` | |\n| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` | string | `children` | |\n| placeholder | 选择框默认文字 | string | - | |\n| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |\n| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false | |\n| showSearch | 使单选模式可搜索 | boolean | false | |\n| size | 选择框大小 | `large` \\| `middle` \\| `small` | - | |\n| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |\n| tagRender | 自定义 tag 内容 render | (props) => ReactNode | - | |\n| tokenSeparators | 在 `tags` 和 `multiple` 模式下自动分词的分隔符 | string\\[] | - | |\n| value | 指定当前选中的条目 | string \\| string\\[]<br />number \\| number\\[]<br />LabeledValue \\| LabeledValue[] | - | |\n| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |\n\n> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。\n\n### Select Methods\n\n| 名称 | 说明 | 版本 |\n| ------- | -------- | ---- |\n| blur() | 取消焦点 | |\n| focus() | 获取焦点 | |\n\n### Option props\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --------- | --------------------------------- | ---------------- | ------ | ---- |\n| className | Option 器类名 | string | - | |\n| disabled | 是否禁用 | boolean | false | |\n| title | 选中该 Option 后，Select 的 title | string | - | |\n| value | 默认根据此属性值进行筛选 | string \\| number | - | |\n\n### OptGroup props\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ----- | ---- | ----------------------- | ------ | ---- |\n| key | Key | string | - | |\n| label | 组名 | string \\| React.Element | - | |\n\n## FAQ\n\n### 点击 `dropdownRender` 里的内容浮层关闭怎么办？\n\n看下 [dropdownRender 例子](#components-select-demo-custom-dropdown-menu) 里的说明。\n\n### 自定义 Option 样式导致滚动异常怎么办？\n\n这是由于虚拟滚动默认选项高度为 `32px`，如果你的选项高度小于该值则需要通过 `listItemHeight` 属性调整，而 `listHeight` 用于设置滚动容器高度：\n\n```tsx\n<Select listItemHeight={10} listHeight={250} />\n```\n\n注意：`listItemHeight` 和 `listHeight` 为内部属性，如无必要，请勿修改该值。\n\n### 为何无障碍测试会报缺失 `aria-` 属性？\n\nSelect 无障碍辅助元素仅在弹窗展开时创建，因而当你在进行无障碍检测时请先打开下拉后再进行测试。对于 `aria-label` 与 `aria-labelledby` 属性缺失警告，请自行为 Select 组件添加相应无障碍属性。\n"
    },
    {
      "name": "Skeleton",
      "category": "Feedback",
      "description": "",
      "whenToUse": "- When a resource needs long time to load.\n- When the component contains lots of information, such as List or Card.\n- Only works when loading data for the first time.\n- Could be replaced by Spin in any situation, but can provide a better user experience.",
      "whenToUseZh": "- 网络较慢，需要长时间等待加载处理的情况下。\n- 图文信息内容较多的列表/卡片中。\n- 只在第一次加载数据的时候使用。\n- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。",
      "props": [
        {
          "name": "active",
          "type": "boolean",
          "default": "false",
          "description": "Show animation effect",
          "descriptionZh": "是否展示动画效果"
        },
        {
          "name": "avatar",
          "type": "boolean | [SkeletonAvatarProps](#SkeletonAvatarProps)",
          "default": "false",
          "description": "Show avatar placeholder",
          "descriptionZh": "是否显示头像占位图"
        },
        {
          "name": "loading",
          "type": "boolean",
          "default": "-",
          "description": "Display the skeleton when true",
          "descriptionZh": "为 true 时，显示占位图。反之则直接展示子组件"
        },
        {
          "name": "paragraph",
          "type": "boolean | [SkeletonParagraphProps](#SkeletonParagraphProps)",
          "default": "true",
          "description": "Show paragraph placeholder",
          "descriptionZh": "是否显示段落占位图"
        },
        {
          "name": "title",
          "type": "boolean | [SkeletonTitleProps](#SkeletonTitleProps)",
          "default": "true",
          "description": "Show title placeholder",
          "descriptionZh": "是否显示标题占位图"
        },
        {
          "name": "round",
          "type": "boolean",
          "default": "false",
          "description": "Show paragraph and title radius when true",
          "descriptionZh": "为 true 时，段落和标题显示圆角"
        },
        {
          "name": "active",
          "type": "boolean",
          "default": "false",
          "description": "Show animation effect, only valid when used avatar independently",
          "descriptionZh": "是否展示动画效果"
        },
        {
          "name": "size",
          "type": "`large` | `small` | `default`",
          "default": "-",
          "description": "Set the size of avatar",
          "descriptionZh": "设置输入框的大小"
        },
        {
          "name": "shape",
          "type": "`circle` | `round` | `default`",
          "default": "-",
          "description": "Set the shape of avatar",
          "descriptionZh": "指定按钮的形状"
        },
        {
          "name": "width",
          "type": "number | string | Array<number | string>",
          "default": "-",
          "description": "Set the width of title",
          "descriptionZh": "设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度"
        },
        {
          "name": "rows",
          "type": "number",
          "default": "-",
          "description": "Set the row count of paragraph",
          "descriptionZh": "设置段落占位图的行数"
        },
        {
          "name": "width",
          "type": "number | string | Array<number | string>",
          "default": "-",
          "description": "Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width",
          "descriptionZh": "设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度"
        },
        {
          "name": "active",
          "type": "boolean",
          "default": "false",
          "description": "Show animation effect",
          "descriptionZh": "是否展示动画效果"
        },
        {
          "name": "size",
          "type": "`large` | `small` | `default`",
          "default": "-",
          "description": "Set the size of button",
          "descriptionZh": "设置输入框的大小"
        },
        {
          "name": "shape",
          "type": "`circle` | `round` | `default`",
          "default": "-",
          "description": "Set the shape of button",
          "descriptionZh": "指定按钮的形状"
        },
        {
          "name": "active",
          "type": "boolean",
          "default": "false",
          "description": "Show animation effect",
          "descriptionZh": "是否展示动画效果"
        },
        {
          "name": "size",
          "type": "`large` | `small` | `default`",
          "default": "-",
          "description": "Set the size of input",
          "descriptionZh": "设置输入框的大小"
        }
      ],
      "tokens": [
        {
          "name": "blockRadius",
          "type": "number",
          "default": "",
          "description": "Border radius of skeleton",
          "descriptionZh": "骨架屏圆角"
        },
        {
          "name": "gradientFromColor",
          "type": "string",
          "default": "",
          "description": "Start color of gradient",
          "descriptionZh": "渐变色起点颜色"
        },
        {
          "name": "gradientToColor",
          "type": "string",
          "default": "",
          "description": "End color of gradient",
          "descriptionZh": "渐变色终点颜色"
        },
        {
          "name": "paragraphLiHeight",
          "type": "number",
          "default": "",
          "description": "Line height of paragraph skeleton",
          "descriptionZh": "段落骨架屏单行高度"
        },
        {
          "name": "paragraphMarginTop",
          "type": "number",
          "default": "",
          "description": "Margin top of paragraph skeleton",
          "descriptionZh": "段落骨架屏上间距"
        },
        {
          "name": "titleHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of title skeleton",
          "descriptionZh": "标题骨架屏高度"
        }
      ],
      "categoryZh": "反馈",
      "nameZh": "骨架屏",
      "since": "4.0.0",
      "doc": "\nProvide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.\n\n## When To Use\n\n- When a resource needs long time to load.\n- When the component contains lots of information, such as List or Card.\n- Only works when loading data for the first time.\n- Could be replaced by Spin in any situation, but can provide a better user experience.\n\n## API\n\n### Skeleton\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| active | Show animation effect | boolean | false |\n| avatar | Show avatar placeholder | boolean \\| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |\n| loading | Display the skeleton when true | boolean | - |\n| paragraph | Show paragraph placeholder | boolean \\| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |\n| title | Show title placeholder | boolean \\| [SkeletonTitleProps](#SkeletonTitleProps) | true |\n| round | Show paragraph and title radius when true | boolean | false |\n\n### SkeletonAvatarProps\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| active | Show animation effect, only valid when used avatar independently | boolean | false |\n| size | Set the size of avatar | number \\| `large` \\| `small` \\| `default` | - |\n| shape | Set the shape of avatar | `circle` \\| `square` | - |\n\n### SkeletonTitleProps\n\n| Property | Description | Type | Default |\n| -------- | ---------------------- | ---------------- | ------- |\n| width | Set the width of title | number \\| string | - |\n\n### SkeletonParagraphProps\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| rows | Set the row count of paragraph | number | - |\n| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \\| string \\| Array<number \\| string> | - |\n\n### SkeletonButtonProps\n\n| Property | Description | Type | Default |\n| -------- | ----------------------- | -------------------------------- | ------- |\n| active | Show animation effect | boolean | false |\n| size | Set the size of button | `large` \\| `small` \\| `default` | - |\n| shape | Set the shape of button | `circle` \\| `round` \\| `default` | - |\n\n### SkeletonInputProps\n\n| Property | Description | Type | Default |\n| -------- | --------------------- | ------------------------------- | ------- |\n| active | Show animation effect | boolean | false |\n| size | Set the size of input | `large` \\| `small` \\| `default` | - |\n",
      "docZh": "\n在需要等待加载内容的位置提供一个占位图形组合。\n\n## 何时使用\n\n- 网络较慢，需要长时间等待加载处理的情况下。\n- 图文信息内容较多的列表/卡片中。\n- 只在第一次加载数据的时候使用。\n- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。\n\n## API\n\n### Skeleton\n\n| 属性 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| active | 是否展示动画效果 | boolean | false |\n| avatar | 是否显示头像占位图 | boolean \\| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |\n| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |\n| paragraph | 是否显示段落占位图 | boolean \\| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |\n| title | 是否显示标题占位图 | boolean \\| [SkeletonTitleProps](#SkeletonTitleProps) | true |\n| round | 为 true 时，段落和标题显示圆角 | boolean | false |\n\n### SkeletonAvatarProps\n\n| 属性 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |\n| size | 设置头像占位图的大小 | number \\| `large` \\| `small` \\| `default` | - |\n| shape | 指定头像的形状 | `circle` \\| `square` | - |\n\n### SkeletonTitleProps\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ----- | -------------------- | ---------------- | ------ |\n| width | 设置标题占位图的宽度 | number \\| string | - |\n\n### SkeletonParagraphProps\n\n| 属性 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| rows | 设置段落占位图的行数 | number | - |\n| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \\| string \\| Array<number \\| string> | - |\n\n### SkeletonButtonProps\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ------ | ---------------- | -------------------------------- | ------ |\n| active | 是否展示动画效果 | boolean | false |\n| size | 设置按钮的大小 | `large` \\| `small` \\| `default` | - |\n| shape | 指定按钮的形状 | `circle` \\| `round` \\| `default` | - |\n\n### SkeletonInputProps\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ------ | ---------------- | ------------------------------- | ------ |\n| active | 是否展示动画效果 | boolean | false |\n| size | 设置输入框的大小 | `large` \\| `small` \\| `default` | - |\n"
    },
    {
      "name": "Slider",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "To input a value in a range.",
      "whenToUseZh": "当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。",
      "props": [
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "Whether get focus when component mounted",
          "descriptionZh": ""
        },
        {
          "name": "defaultValue",
          "type": "number | [number, number]",
          "default": "0 | [0, 0]",
          "description": "The default value of slider. When `range` is false, use number, otherwise, use [number, number]",
          "since": "0 \\",
          "descriptionZh": "设置初始取值。当 `range` 为 false 时，使用 number，否则用 [number, number]"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "If true, the slider will not be interactable",
          "descriptionZh": "值为 true 时，滑块为禁用状态"
        },
        {
          "name": "dots",
          "type": "boolean",
          "default": "false",
          "description": "Whether the thumb can drag over tick only",
          "descriptionZh": "是否只能拖拽到刻度上"
        },
        {
          "name": "included",
          "type": "boolean",
          "default": "true",
          "description": "Make effect when `marks` not null, true means containment and false means coordinative",
          "descriptionZh": "`marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列"
        },
        {
          "name": "marks",
          "type": "object",
          "default": "{ number: string | ReactNode } | { number: { style: object, label: string | ReactNode } }",
          "description": "Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max], each mark can declare its own style",
          "since": "ReactNode } \\",
          "descriptionZh": "刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式"
        },
        {
          "name": "max",
          "type": "number",
          "default": "100",
          "description": "The maximum value the slider can slide to",
          "descriptionZh": "最大值"
        },
        {
          "name": "min",
          "type": "number",
          "default": "0",
          "description": "The minimum value the slider can slide to",
          "descriptionZh": "最小值"
        },
        {
          "name": "range",
          "type": "boolean",
          "default": "false",
          "description": "Dual thumb mode",
          "descriptionZh": "双滑块模式"
        },
        {
          "name": "reverse",
          "type": "boolean",
          "default": "false",
          "description": "Reverse the component",
          "descriptionZh": "反向坐标轴"
        },
        {
          "name": "step",
          "type": "number | null",
          "default": "1",
          "description": "The granularity the slider can step through values. Must greater than 0, and be divided by (max - min). When `marks` no null, `step` can be null",
          "since": "1",
          "descriptionZh": "步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分"
        },
        {
          "name": "tipFormatter",
          "type": "value => ReactNode | null",
          "default": "IDENTITY",
          "description": "Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null",
          "since": "IDENTITY",
          "descriptionZh": "Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip"
        },
        {
          "name": "value",
          "type": "number | [number, number]",
          "default": "-",
          "description": "The value of slider. When `range` is false, use number, otherwise, use [number, number]",
          "since": "-",
          "descriptionZh": "设置当前取值。当 `range` 为 false 时，使用 number，否则用 [number, number]"
        },
        {
          "name": "vertical",
          "type": "boolean",
          "default": "false",
          "description": "If true, the slider will be vertical",
          "descriptionZh": "值为 true 时，Slider 为垂直方向"
        },
        {
          "name": "onAfterChange",
          "type": "(value) => void",
          "default": "-",
          "description": "Fire when onmouseup is fired",
          "descriptionZh": "与 `onmouseup` 触发时机一致，把当前值作为参数传入"
        },
        {
          "name": "onChange",
          "type": "(value) => void",
          "default": "-",
          "description": "Callback function that is fired when the user changes the slider's value",
          "descriptionZh": "当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入"
        },
        {
          "name": "tooltipPlacement",
          "type": "string",
          "default": "-",
          "description": "Set Tooltip display position. Ref [Tooltip](/components/tooltip/)",
          "descriptionZh": "设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/)"
        },
        {
          "name": "tooltipVisible",
          "type": "boolean",
          "default": "-",
          "description": "If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering",
          "descriptionZh": "值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时"
        },
        {
          "name": "getTooltipPopupContainer",
          "type": "(triggerNode) => HTMLElement",
          "default": "() => document.body",
          "description": "The DOM container of the Tooltip, the default behavior is to create a div element in body",
          "descriptionZh": "Tooltip 渲染父节点，默认渲染到 body 上"
        }
      ],
      "tokens": [
        {
          "name": "controlSize",
          "type": "number",
          "default": "",
          "description": "Height of slider",
          "descriptionZh": "滑动输入高度"
        },
        {
          "name": "dotActiveBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of dot when active",
          "descriptionZh": "圆点激活态边框颜色"
        },
        {
          "name": "dotBorderColor",
          "type": "string",
          "default": "",
          "description": "Border color of dot",
          "descriptionZh": "圆点边框颜色"
        },
        {
          "name": "dotSize",
          "type": "number",
          "default": "",
          "description": "Size of dot",
          "descriptionZh": "滑块圆点尺寸"
        },
        {
          "name": "handleActiveColor",
          "type": "string",
          "default": "",
          "description": "Border color of handle when active",
          "descriptionZh": "滑块激活态边框色"
        },
        {
          "name": "handleActiveOutlineColor",
          "type": "string",
          "default": "",
          "description": "Outline color of handle when active",
          "descriptionZh": "滑块激活态外框色"
        },
        {
          "name": "handleColor",
          "type": "string",
          "default": "",
          "description": "Color of handle",
          "descriptionZh": "滑块颜色"
        },
        {
          "name": "handleColorDisabled",
          "type": "string",
          "default": "",
          "description": "Color of handle when disabled",
          "descriptionZh": "滑块禁用颜色"
        },
        {
          "name": "handleLineWidth",
          "type": "string | number",
          "default": "",
          "description": "Border width of handle",
          "descriptionZh": "滑块边框宽度"
        },
        {
          "name": "handleLineWidthHover",
          "type": "string | number",
          "default": "",
          "description": "Border width of handle when hover",
          "descriptionZh": "滑块边框宽度（悬浮态）"
        },
        {
          "name": "handleSize",
          "type": "number",
          "default": "",
          "description": "Size of handle",
          "descriptionZh": "滑块尺寸"
        },
        {
          "name": "handleSizeHover",
          "type": "number",
          "default": "",
          "description": "Size of handle when hover",
          "descriptionZh": "滑块尺寸（悬浮态）"
        },
        {
          "name": "railBg",
          "type": "string",
          "default": "",
          "description": "Background color of rail",
          "descriptionZh": "轨道背景色"
        },
        {
          "name": "railHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of rail when hover",
          "descriptionZh": "轨道背景色（悬浮态）"
        },
        {
          "name": "railSize",
          "type": "number",
          "default": "",
          "description": "Height of rail",
          "descriptionZh": "轨道高度"
        },
        {
          "name": "trackBg",
          "type": "string",
          "default": "",
          "description": "Background color of track",
          "descriptionZh": "轨道已覆盖部分背景色"
        },
        {
          "name": "trackBgDisabled",
          "type": "string",
          "default": "",
          "description": "Background color of track when disabled",
          "descriptionZh": "轨道禁用态背景色"
        },
        {
          "name": "trackHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of track when hover",
          "descriptionZh": "轨道已覆盖部分背景色（悬浮态）"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "滑动输入条",
      "since": "4.0.0",
      "doc": "\nA Slider component for displaying current value and intervals in range.\n\n## When To Use\n\nTo input a value in a range.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| autoFocus | Whether get focus when component mounted | boolean | false | |\n| defaultValue | The default value of slider. When `range` is false, use number, otherwise, use \\[number, number] | number \\| \\[number, number] | 0 \\| \\[0, 0] | |\n| disabled | If true, the slider will not be interactable | boolean | false | |\n| dots | Whether the thumb can drag over tick only | boolean | false | |\n| included | Make effect when `marks` not null, true means containment and false means coordinative | boolean | true | |\n| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \\[min, max], each mark can declare its own style | object | { number: string \\| ReactNode } \\| { number: { style: object, label: string \\| ReactNode } } | |\n| max | The maximum value the slider can slide to | number | 100 | |\n| min | The minimum value the slider can slide to | number | 0 | |\n| range | Dual thumb mode | boolean | false | |\n| reverse | Reverse the component | boolean | false | |\n| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min). When `marks` no null, `step` can be null | number \\| null | 1 | |\n| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode \\| null | IDENTITY | |\n| value | The value of slider. When `range` is false, use number, otherwise, use \\[number, number] | number \\| \\[number, number] | - |\n| vertical | If true, the slider will be vertical | boolean | false | |\n| onAfterChange | Fire when onmouseup is fired | (value) => void | - | |\n| onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - | |\n| tooltipPlacement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - | |\n| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - | |\n| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body | |\n\n## Methods\n\n| Name | Description | Version |\n| ------- | ------------ | ------- |\n| blur() | Remove focus | |\n| focus() | Get focus | |\n",
      "docZh": "\n滑动型输入器，展示当前值和可选范围。\n\n## 何时使用\n\n当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowClear | 支持清除, 单选模式有效 | boolean | false | |\n| defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \\[number, number] | number \\| \\[number, number] | 0 \\| \\[0, 0] | |\n| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |\n| dots | 是否只能拖拽到刻度上 | boolean | false | |\n| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | |\n| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \\[min, max] 内，每个标签可以单独设置样式 | object | { number: string \\| ReactNode } or { number: { style: object, label: string \\| ReactNode } } | |\n| max | 最大值 | number | 100 | |\n| min | 最小值 | number | 0 | |\n| range | 双滑块模式 | boolean | false | |\n| reverse | 反向坐标轴 | boolean | false | |\n| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number \\| null | 1 | |\n| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode \\| null | IDENTITY | |\n| value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \\[number, number] | number \\| \\[number, number] | - | |\n| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |\n| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value) => void | - | |\n| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |\n| tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - | |\n| tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | |\n| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | |\n\n## 方法\n\n| 名称 | 描述 | 版本 |\n| ------- | -------- | ---- |\n| blur() | 移除焦点 | |\n| focus() | 获取焦点 | |\n"
    },
    {
      "name": "Space",
      "category": "Layout",
      "description": "",
      "whenToUse": "Avoid components clinging together and set a unified space.",
      "whenToUseZh": "避免组件紧贴在一起，拉开统一的空间。\n\n- 适合行内元素的水平间距。\n- 可以设置各种水平对齐方式。",
      "props": [
        {
          "name": "align",
          "type": "`start` | `end` |`center` |`baseline`",
          "default": "-",
          "description": "Align items",
          "since": "4.2.0",
          "descriptionZh": "对齐方式"
        },
        {
          "name": "direction",
          "type": "`vertical` | `horizontal`",
          "default": "`horizontal`",
          "description": "The space direction",
          "since": "4.1.0",
          "descriptionZh": "间距方向"
        },
        {
          "name": "size",
          "type": "`small` | `middle` | `large` | `number`",
          "default": "`small`",
          "description": "The space size",
          "since": "4.1.0",
          "descriptionZh": "间距大小"
        }
      ],
      "categoryZh": "布局",
      "nameZh": "间距",
      "since": "4.1.0",
      "doc": "\nSet components spacing.\n\n## When To Use\n\nAvoid components clinging together and set a unified space.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| align | Align items | `start` \\| `end` \\|`center` \\|`baseline` | - | 4.2.0 |\n| direction | The space direction | `vertical` \\| `horizontal` | `horizontal` | 4.1.0 |\n| size | The space size | `small` \\| `middle` \\| `large` \\| `number` | `small` | 4.1.0 |\n",
      "docZh": "\n设置组件之间的间距。\n\n## 何时使用\n\n避免组件紧贴在一起，拉开统一的空间。\n\n- 适合行内元素的水平间距。\n- 可以设置各种水平对齐方式。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --------- | -------- | ------------------------------------------ | ------------ | ----- |\n| align | 对齐方式 | `start` \\| `end` \\|`center` \\|`baseline` | - | 4.2.0 |\n| direction | 间距方向 | `vertical` \\| `horizontal` | `horizontal` | 4.1.0 |\n| size | 间距大小 | `small` \\| `middle` \\| `large` \\| `number` | `small` | 4.1.0 |\n"
    },
    {
      "name": "Spin",
      "category": "Feedback",
      "description": "",
      "whenToUse": "When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.",
      "whenToUseZh": "页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。",
      "props": [
        {
          "name": "delay",
          "type": "number (milliseconds)",
          "default": "-",
          "description": "Specifies a delay in milliseconds for loading state (prevent flush)",
          "descriptionZh": "延迟显示加载效果的时间（防止闪烁）"
        },
        {
          "name": "indicator",
          "type": "ReactNode",
          "default": "-",
          "description": "React node of the spinning indicator",
          "descriptionZh": "加载指示符"
        },
        {
          "name": "size",
          "type": "string",
          "default": "-",
          "description": "The size of Spin, options: `small`, `default` and `large`",
          "descriptionZh": "组件大小，可选值为 `small` `default` `large`"
        },
        {
          "name": "spinning",
          "type": "boolean",
          "default": "-",
          "description": "Whether Spin is spinning",
          "descriptionZh": "是否为加载中状态"
        },
        {
          "name": "tip",
          "type": "string",
          "default": "-",
          "description": "Customize description content when Spin has children",
          "descriptionZh": "当作为包裹元素时，可以自定义描述文案"
        },
        {
          "name": "wrapperClassName",
          "type": "string",
          "default": "-",
          "description": "The className of wrapper when Spin has children",
          "descriptionZh": "包装器的类属性"
        }
      ],
      "tokens": [
        {
          "name": "contentHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of content area",
          "descriptionZh": "内容区域高度"
        },
        {
          "name": "dotSize",
          "type": "number",
          "default": "",
          "description": "Loading icon size",
          "descriptionZh": "加载图标尺寸"
        },
        {
          "name": "dotSizeLG",
          "type": "number",
          "default": "",
          "description": "Large loading icon size",
          "descriptionZh": "大号加载图标尺寸"
        },
        {
          "name": "dotSizeSM",
          "type": "number",
          "default": "",
          "description": "Small loading icon size",
          "descriptionZh": "小号加载图标尺寸"
        }
      ],
      "categoryZh": "反馈",
      "nameZh": "加载中",
      "since": "4.0.0",
      "doc": "\nA spinner for displaying loading state of a page or a section.\n\n## When To Use\n\nWhen part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.\n\n## API\n\n| Property | Description | Type | Default Value |\n| --- | --- | --- | --- |\n| delay | Specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |\n| indicator | React node of the spinning indicator | ReactNode | - |\n| size | The size of Spin, options: `small`, `default` and `large` | string | `default` |\n| spinning | Whether Spin is spinning | boolean | true |\n| tip | Customize description content when Spin has children | string | - |\n| wrapperClassName | The className of wrapper when Spin has children | string | - |\n\n### Static Method\n\n- `Spin.setDefaultIndicator(indicator: ReactNode)`\n\n You can define default spin element globally.\n",
      "docZh": "\n用于页面和区块的加载中状态。\n\n## 何时使用\n\n页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ---------------- | -------------------------------------------- | ------------- | --------- |\n| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |\n| indicator | 加载指示符 | ReactNode | - |\n| size | 组件大小，可选值为 `small` `default` `large` | string | `default` |\n| spinning | 是否为加载中状态 | boolean | true |\n| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |\n| wrapperClassName | 包装器的类属性 | string | - |\n\n### 静态方法\n\n- `Spin.setDefaultIndicator(indicator: ReactNode)`\n\n 你可以自定义全局默认 Spin 的元素。\n"
    },
    {
      "name": "Statistic",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- When want to highlight some data.\n- When want to display statistic data with description.",
      "whenToUseZh": "- 当需要突出某个或某组数字时。\n- 当需要展示带描述的统计类数据时使用。",
      "props": [
        {
          "name": "decimalSeparator",
          "type": "string",
          "default": "`.`",
          "description": "The decimal separator",
          "descriptionZh": "设置小数点"
        },
        {
          "name": "formatter",
          "type": "(value) => ReactNode",
          "default": "-",
          "description": "Customize value display logic",
          "descriptionZh": "自定义数值展示"
        },
        {
          "name": "groupSeparator",
          "type": "string",
          "default": "`,`",
          "description": "Group separator",
          "descriptionZh": "设置千分位标识符"
        },
        {
          "name": "precision",
          "type": "number",
          "default": "-",
          "description": "The precision of input value",
          "descriptionZh": "数值精度"
        },
        {
          "name": "prefix",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The prefix node of value",
          "since": "-",
          "descriptionZh": "设置数值的前缀"
        },
        {
          "name": "suffix",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The suffix node of value",
          "since": "-",
          "descriptionZh": "设置数值的后缀"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Display title",
          "since": "-",
          "descriptionZh": "数值的标题"
        },
        {
          "name": "value",
          "type": "number | moment",
          "default": "-",
          "description": "Display value",
          "since": "-",
          "descriptionZh": "数值内容"
        },
        {
          "name": "valueStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "Set value css style",
          "descriptionZh": "设置数值的样式"
        },
        {
          "name": "format",
          "type": "string",
          "default": "`HH:mm:ss`",
          "description": "Format as [moment](http://momentjs.com/)",
          "descriptionZh": "格式化倒计时展示，参考 [moment](http://momentjs.com/)"
        },
        {
          "name": "onFinish",
          "type": "() => void",
          "default": "-",
          "description": "Trigger when time's up",
          "descriptionZh": "倒计时完成时触发"
        },
        {
          "name": "prefix",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The prefix node of value",
          "since": "-",
          "descriptionZh": "设置数值的前缀"
        },
        {
          "name": "suffix",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The suffix node of value",
          "since": "-",
          "descriptionZh": "设置数值的后缀"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Display title",
          "since": "-",
          "descriptionZh": "数值的标题"
        },
        {
          "name": "value",
          "type": "number | moment",
          "default": "-",
          "description": "Set target countdown time",
          "since": "-",
          "descriptionZh": "数值内容"
        },
        {
          "name": "valueStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "Set value css style",
          "descriptionZh": "设置数值的样式"
        }
      ],
      "tokens": [
        {
          "name": "contentFontSize",
          "type": "number",
          "default": "",
          "description": "Content font size",
          "descriptionZh": "内容字体大小"
        },
        {
          "name": "titleFontSize",
          "type": "number",
          "default": "",
          "description": "Title font size",
          "descriptionZh": "标题字体大小"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "统计数值",
      "since": "4.0.0",
      "doc": "\nDisplay statistic number.\n\n## When To Use\n\n- When want to highlight some data.\n- When want to display statistic data with description.\n\n## API\n\n#### Statistic\n\n| Property | Description | Type | Default | Version |\n| ---------------- | ----------------------------- | -------------------- | ------- | ------- |\n| decimalSeparator | The decimal separator | string | `.` | |\n| formatter | Customize value display logic | (value) => ReactNode | - | |\n| groupSeparator | Group separator | string | `,` | |\n| precision | The precision of input value | number | - | |\n| prefix | The prefix node of value | string \\| ReactNode | - | |\n| suffix | The suffix node of value | string \\| ReactNode | - | |\n| title | Display title | string \\| ReactNode | - | |\n| value | Display value | string \\| number | - | |\n| valueStyle | Set value css style | CSSProperties | - | |\n\n#### Statistic.Countdown\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| format | Format as [moment](http://momentjs.com/) | string | `HH:mm:ss` | |\n| onFinish | Trigger when time's up | () => void | - | |\n| prefix | The prefix node of value | string \\| ReactNode | - | |\n| suffix | The suffix node of value | string \\| ReactNode | - | |\n| title | Display title | string \\| ReactNode | - | |\n| value | Set target countdown time | number \\| moment | - | |\n| valueStyle | Set value css style | CSSProperties | - | |\n",
      "docZh": "\n展示统计数值。\n\n## 何时使用\n\n- 当需要突出某个或某组数字时。\n- 当需要展示带描述的统计类数据时使用。\n\n## API\n\n#### Statistic\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ---------------- | ---------------- | -------------------- | ------ | ---- |\n| decimalSeparator | 设置小数点 | string | `.` | |\n| formatter | 自定义数值展示 | (value) => ReactNode | - | |\n| groupSeparator | 设置千分位标识符 | string | `,` | |\n| precision | 数值精度 | number | - | |\n| prefix | 设置数值的前缀 | string \\| ReactNode | - | |\n| suffix | 设置数值的后缀 | string \\| ReactNode | - | |\n| title | 数值的标题 | string \\| ReactNode | - | |\n| value | 数值内容 | string \\| number | - | |\n| valueStyle | 设置数值的样式 | CSSProperties | - | |\n\n#### Statistic.Countdown\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| format | 格式化倒计时展示，参考 [moment](http://momentjs.com/) | string | `HH:mm:ss` | |\n| onFinish | 倒计时完成时触发 | () => void | - | |\n| prefix | 设置数值的前缀 | string \\| ReactNode | - | |\n| suffix | 设置数值的后缀 | string \\| ReactNode | - | |\n| title | 数值的标题 | string \\| ReactNode | - | |\n| value | 数值内容 | number \\| moment | - | |\n| valueStyle | 设置数值的样式 | CSSProperties | - | |\n"
    },
    {
      "name": "Steps",
      "category": "Navigation",
      "description": "",
      "whenToUse": "When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.",
      "whenToUseZh": "当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。",
      "props": [
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "Additional class to Steps",
          "descriptionZh": "步骤条类名"
        },
        {
          "name": "type",
          "type": "string",
          "default": "`default`",
          "description": "Type of steps, can be set to one of the following values: `default`, `navigation`",
          "descriptionZh": "步骤条类型，有 `default` 和 `navigation` 两种"
        },
        {
          "name": "current",
          "type": "number",
          "default": "0",
          "description": "To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`",
          "descriptionZh": "指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态"
        },
        {
          "name": "direction",
          "type": "string",
          "default": "`horizontal`",
          "description": "To specify the direction of the step bar, `horizontal` or `vertical`",
          "descriptionZh": "指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向"
        },
        {
          "name": "labelPlacement",
          "type": "string",
          "default": "`horizontal`",
          "description": "Place title and description with `horizontal` or `vertical` direction",
          "descriptionZh": "指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方"
        },
        {
          "name": "progressDot",
          "type": "boolean | (iconDot, {index, status, title, description}) => ReactNode",
          "default": "false",
          "description": "Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical`",
          "since": "false",
          "descriptionZh": "点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical`"
        },
        {
          "name": "size",
          "type": "string",
          "default": "`default`",
          "description": "To specify the size of the step bar, `default` and `small` are currently supported",
          "descriptionZh": "指定大小，目前支持普通（`default`）和迷你（`small`）"
        },
        {
          "name": "status",
          "type": "string",
          "default": "`process`",
          "description": "To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`",
          "descriptionZh": "指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error`"
        },
        {
          "name": "initial",
          "type": "number",
          "default": "0",
          "description": "Set the initial step, counting from 0",
          "descriptionZh": "起始序号，从 0 开始记数"
        },
        {
          "name": "onChange",
          "type": "(current) => void",
          "default": "-",
          "description": "Trigger when Step is changed",
          "descriptionZh": "点击切换步骤时触发"
        },
        {
          "name": "percent",
          "type": "number",
          "default": "-",
          "description": "Progress circle percentage of current step in `process` status (only works on basic Steps)",
          "since": "4.5.0",
          "descriptionZh": "当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效）"
        },
        {
          "name": "description",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Description of the step, optional property",
          "since": "-",
          "descriptionZh": "步骤的详情描述，可选"
        },
        {
          "name": "icon",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Icon of the step, optional property",
          "since": "-",
          "descriptionZh": "步骤图标的类型，可选"
        },
        {
          "name": "status",
          "type": "string",
          "default": "`wait`",
          "description": "To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error`",
          "descriptionZh": "指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error`"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Title of the step",
          "since": "-",
          "descriptionZh": "标题"
        },
        {
          "name": "subTitle",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Subtitle of the step",
          "since": "-",
          "descriptionZh": "子标题"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disable click",
          "descriptionZh": "禁用点击"
        }
      ],
      "tokens": [
        {
          "name": "customIconFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of custom icon",
          "descriptionZh": "自定义图标大小"
        },
        {
          "name": "customIconSize",
          "type": "number",
          "default": "",
          "description": "Size of custom icon container",
          "descriptionZh": "自定义图标容器尺寸"
        },
        {
          "name": "customIconTop",
          "type": "number",
          "default": "",
          "description": "Top of custom icon",
          "descriptionZh": "自定义图标 top"
        },
        {
          "name": "dotCurrentSize",
          "type": "number",
          "default": "",
          "description": "Current size of dot",
          "descriptionZh": "点状步骤点当前大小"
        },
        {
          "name": "dotSize",
          "type": "number",
          "default": "",
          "description": "Size of dot",
          "descriptionZh": "点状步骤点大小"
        },
        {
          "name": "iconFontSize",
          "type": "number",
          "default": "",
          "description": "Size of icon",
          "descriptionZh": "图标大小"
        },
        {
          "name": "iconSize",
          "type": "number",
          "default": "",
          "description": "Size of icon container",
          "descriptionZh": "图标容器尺寸"
        },
        {
          "name": "iconSizeSM",
          "type": "number",
          "default": "",
          "description": "Size of small steps icon",
          "descriptionZh": "小号步骤条图标大小"
        },
        {
          "name": "iconTop",
          "type": "number",
          "default": "",
          "description": "Top of icon",
          "descriptionZh": "图标 top"
        },
        {
          "name": "navArrowColor",
          "type": "string",
          "default": "",
          "description": "Color of arrow in nav",
          "descriptionZh": "可跳转步骤条箭头颜色"
        },
        {
          "name": "navContentMaxWidth",
          "type": "MaxWidth<string | number> | undefined",
          "default": "",
          "description": "Max width of nav content",
          "descriptionZh": "可跳转步骤条内容最大宽度"
        }
      ],
      "subComponents": [
        "Steps.Step"
      ],
      "categoryZh": "导航",
      "nameZh": "步骤条",
      "since": "4.0.0",
      "doc": "\n`Steps` is a navigation bar that guides users through the steps of a task.\n\n## When To Use\n\nWhen a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.\n\n## API\n\n```jsx\n<Steps>\n <Step title=\"first step\" />\n <Step title=\"second step\" />\n <Step title=\"third step\" />\n</Steps>\n```\n\n### Steps\n\nThe whole of the step bar.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| className | Additional class to Steps | string | - | |\n| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | |\n| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | |\n| direction | To specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` | |\n| labelPlacement | Place title and description with `horizontal` or `vertical` direction | string | `horizontal` | |\n| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | boolean \\| (iconDot, {index, status, title, description}) => ReactNode | false | |\n| size | To specify the size of the step bar, `default` and `small` are currently supported | string | `default` | |\n| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | |\n| initial | Set the initial step, counting from 0 | number | 0 | |\n| onChange | Trigger when Step is changed | (current) => void | - | |\n| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 |\n\n### Steps.Step\n\nA single step in the step bar.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| description | Description of the step, optional property | string \\| ReactNode | - | |\n| icon | Icon of the step, optional property | string \\| ReactNode | - | |\n| status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | |\n| title | Title of the step | string \\| ReactNode | - | |\n| subTitle | Subtitle of the step | string \\| ReactNode | - | |\n| disabled | Disable click | boolean | false | |\n",
      "docZh": "\n引导用户按照流程完成任务的导航条。\n\n## 何时使用\n\n当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。\n\n## API\n\n```jsx\n<Steps>\n <Step title=\"第一步\" />\n <Step title=\"第二步\" />\n <Step title=\"第三步\" />\n</Steps>\n```\n\n### Steps\n\n整体步骤条。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| className | 步骤条类名 | string | - | |\n| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | |\n| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 | |\n| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | `horizontal` | |\n| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` | |\n| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | boolean \\| (iconDot, {index, status, title, description}) => ReactNode | false | |\n| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | `default` | |\n| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | |\n| initial | 起始序号，从 0 开始记数 | number | 0 | |\n| onChange | 点击切换步骤时触发 | (current) => void | - | |\n| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 |\n\n### Steps.Step\n\n步骤条内的每一个步骤。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| description | 步骤的详情描述，可选 | string \\| ReactNode | - | |\n| icon | 步骤图标的类型，可选 | ReactNode | - | |\n| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` | |\n| title | 标题 | string \\| ReactNode | - | |\n| subTitle | 子标题 | string \\| ReactNode | - | |\n| disabled | 禁用点击 | boolean | false | |\n"
    },
    {
      "name": "Switch",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "- If you need to represent the switching between two states or on-off state.\n- The difference between `Switch` and `Checkbox` is that `Switch` will trigger a state change directly when you toggle it, while `Checkbox` is generally used for state marking, which should work in conjunction with submit operation.",
      "whenToUseZh": "- 需要表示开关状态/两种状态之间的切换时；\n- 和 `checkbox`的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。",
      "props": [
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "Whether get focus when component mounted",
          "descriptionZh": "组件自动获取焦点"
        },
        {
          "name": "checked",
          "type": "boolean",
          "default": "false",
          "description": "Determine whether the Switch is checked",
          "descriptionZh": "指定当前是否选中"
        },
        {
          "name": "checkedChildren",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The content to be shown when the state is checked",
          "descriptionZh": "选中时的内容"
        },
        {
          "name": "defaultChecked",
          "type": "boolean",
          "default": "false",
          "description": "Whether to set the initial state",
          "descriptionZh": "初始是否选中"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disable switch",
          "descriptionZh": "是否禁用"
        },
        {
          "name": "loading",
          "type": "boolean",
          "default": "false",
          "description": "Loading state of switch",
          "descriptionZh": "加载中的开关"
        },
        {
          "name": "size",
          "type": "string",
          "default": "`default`",
          "description": "The size of the Switch, options: `default` `small`",
          "descriptionZh": "开关大小，可选值：`default` `small`"
        },
        {
          "name": "unCheckedChildren",
          "type": "string | ReactNode",
          "default": "-",
          "description": "The content to be shown when the state is unchecked",
          "descriptionZh": "非选中时的内容"
        },
        {
          "name": "onChange",
          "type": "function(checked: boolean, event: Event)",
          "default": "-",
          "description": "Trigger when the checked state is changing",
          "descriptionZh": "变化时回调函数"
        },
        {
          "name": "onClick",
          "type": "function(checked: boolean, event: Event)",
          "default": "-",
          "description": "Trigger when clicked",
          "descriptionZh": "点击时回调函数"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The additional class to Switch",
          "descriptionZh": "Switch 器类名"
        }
      ],
      "tokens": [
        {
          "name": "handleBg",
          "type": "string",
          "default": "",
          "description": "Background color of Switch handle",
          "descriptionZh": "开关把手背景色"
        },
        {
          "name": "handleShadow",
          "type": "string",
          "default": "",
          "description": "Shadow of Switch handle",
          "descriptionZh": "开关把手阴影"
        },
        {
          "name": "handleSize",
          "type": "number",
          "default": "",
          "description": "Size of Switch handle",
          "descriptionZh": "开关把手大小"
        },
        {
          "name": "handleSizeSM",
          "type": "number",
          "default": "",
          "description": "Size of small Switch handle",
          "descriptionZh": "小号开关把手大小"
        },
        {
          "name": "innerMaxMargin",
          "type": "number",
          "default": "",
          "description": "Maximum margin of content area",
          "descriptionZh": "内容区域最大边距"
        },
        {
          "name": "innerMaxMarginSM",
          "type": "number",
          "default": "",
          "description": "Maximum margin of content area of small Switch",
          "descriptionZh": "小号开关内容区域最大边距"
        },
        {
          "name": "innerMinMargin",
          "type": "number",
          "default": "",
          "description": "Minimum margin of content area",
          "descriptionZh": "内容区域最小边距"
        },
        {
          "name": "innerMinMarginSM",
          "type": "number",
          "default": "",
          "description": "Minimum margin of content area of small Switch",
          "descriptionZh": "小号开关内容区域最小边距"
        },
        {
          "name": "trackHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of Switch",
          "descriptionZh": "开关高度"
        },
        {
          "name": "trackHeightSM",
          "type": "string | number",
          "default": "",
          "description": "Height of small Switch",
          "descriptionZh": "小号开关高度"
        },
        {
          "name": "trackMinWidth",
          "type": "string | number",
          "default": "",
          "description": "Minimum width of Switch",
          "descriptionZh": "开关最小宽度"
        },
        {
          "name": "trackMinWidthSM",
          "type": "string | number",
          "default": "",
          "description": "Minimum width of small Switch",
          "descriptionZh": "小号开关最小宽度"
        },
        {
          "name": "trackPadding",
          "type": "number",
          "default": "",
          "description": "Padding of Switch",
          "descriptionZh": "开关内边距"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "开关",
      "since": "4.0.0",
      "doc": "\nSwitching Selector.\n\n## When To Use\n\n- If you need to represent the switching between two states or on-off state.\n- The difference between `Switch` and `Checkbox` is that `Switch` will trigger a state change directly when you toggle it, while `Checkbox` is generally used for state marking, which should work in conjunction with submit operation.\n\n## API\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| autoFocus | Whether get focus when component mounted | boolean | false |\n| checked | Determine whether the Switch is checked | boolean | false |\n| checkedChildren | The content to be shown when the state is checked | string \\| ReactNode | - |\n| defaultChecked | Whether to set the initial state | boolean | false |\n| disabled | Disable switch | boolean | false |\n| loading | Loading state of switch | boolean | false |\n| size | The size of the Switch, options: `default` `small` | string | `default` |\n| unCheckedChildren | The content to be shown when the state is unchecked | string \\| ReactNode | - |\n| onChange | Trigger when the checked state is changing | function(checked: boolean, event: Event) | - |\n| onClick | Trigger when clicked | function(checked: boolean, event: Event) | - |\n| className | The additional class to Switch | string | - |\n\n## Methods\n\n| Name | Description |\n| ------- | ------------ |\n| blur() | Remove focus |\n| focus() | Get focus |\n",
      "docZh": "\n开关选择器。\n\n## 何时使用\n\n- 需要表示开关状态/两种状态之间的切换时；\n- 和 `checkbox`的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| autoFocus | 组件自动获取焦点 | boolean | false |\n| checked | 指定当前是否选中 | boolean | false |\n| checkedChildren | 选中时的内容 | string \\| ReactNode | - |\n| defaultChecked | 初始是否选中 | boolean | false |\n| disabled | 是否禁用 | boolean | false |\n| loading | 加载中的开关 | boolean | false |\n| size | 开关大小，可选值：`default` `small` | string | `default` |\n| unCheckedChildren | 非选中时的内容 | string \\| ReactNode | - |\n| onChange | 变化时回调函数 | function(checked: boolean, event: Event) | - |\n| onClick | 点击时回调函数 | function(checked: boolean, event: Event) | - |\n| className | Switch 器类名 | string | - |\n\n## 方法\n\n| 名称 | 描述 |\n| ------- | -------- |\n| blur() | 移除焦点 |\n| focus() | 获取焦点 |\n"
    },
    {
      "name": "Table",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- To display a collection of structured data.\n- To sort, search, paginate, filter data.",
      "whenToUseZh": "- 当有大量结构化的数据需要展现时；\n- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。",
      "props": [
        {
          "name": "tableLayout",
          "type": "- | `auto` | `fixed`",
          "default": "-<hr />`fixed` when header/columns are fixed, or using `column.ellipsis`",
          "description": "The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element",
          "since": "`fixed`",
          "descriptionZh": "表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "false",
          "description": "Whether to show all table borders",
          "descriptionZh": "是否展示外边框和列边框"
        },
        {
          "name": "columns",
          "type": "[ColumnsType](#Column)[]",
          "default": "-",
          "description": "Columns of table",
          "descriptionZh": "表格列的配置描述，具体项见下表"
        },
        {
          "name": "components",
          "type": "[TableComponents](https://git.io/fANxz)",
          "default": "-",
          "description": "Override default table elements",
          "descriptionZh": "覆盖默认的 table 元素"
        },
        {
          "name": "dataSource",
          "type": "object[]",
          "default": "-",
          "description": "Data record array to be displayed",
          "descriptionZh": "数据数组"
        },
        {
          "name": "expandable",
          "type": "[expandable](#expandable)",
          "default": "-",
          "description": "Config expandable content",
          "descriptionZh": "配置展开属性"
        },
        {
          "name": "footer",
          "type": "function(currentPageData)",
          "default": "-",
          "description": "Table footer renderer",
          "descriptionZh": "表格尾部"
        },
        {
          "name": "loading",
          "type": "boolean | [object](/components/spin/#API) ()",
          "default": "false",
          "description": "Loading status of table",
          "since": "false",
          "descriptionZh": "页面是否加载中"
        },
        {
          "name": "locale",
          "type": "object",
          "default": "filterConfirm: `Ok` <br> filterReset: `Reset` <br> emptyText: `No Data` <br> ",
          "description": "The i18n text including filter, sort, empty text, etc",
          "descriptionZh": "默认文案设置，目前包括排序、过滤、空数据文案"
        },
        {
          "name": "pagination",
          "type": "object",
          "default": "-",
          "description": "Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false`",
          "descriptionZh": "分页器，参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档，设为 false 时不展示和进行分页"
        },
        {
          "name": "rowClassName",
          "type": "function(record, index): string",
          "default": "-",
          "description": "Row's className",
          "descriptionZh": "表格行的类名"
        },
        {
          "name": "rowKey",
          "type": "string | function(record): string",
          "default": "`key`",
          "description": "Row's unique key, could be a string or function that returns a string",
          "since": "`key`",
          "descriptionZh": "表格行 key 的取值，可以是字符串或一个函数"
        },
        {
          "name": "rowSelection",
          "type": "object",
          "default": "-",
          "description": "Row selection [config](#rowSelection)",
          "descriptionZh": "表格行是否可选择，[配置项](#rowSelection)"
        },
        {
          "name": "scroll",
          "type": "object",
          "default": "-",
          "description": "Whether the table can be scrollable, [config](#scroll)",
          "descriptionZh": "表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll)"
        },
        {
          "name": "showHeader",
          "type": "boolean",
          "default": "true",
          "description": "Whether to show table header",
          "descriptionZh": "是否显示表头"
        },
        {
          "name": "size",
          "type": "`default` | `middle` | `small`",
          "default": "`default`",
          "description": "Size of table",
          "since": "`small`",
          "descriptionZh": "表格大小"
        },
        {
          "name": "summary",
          "type": "(currentData) => ReactNode",
          "default": "-",
          "description": "Summary content",
          "descriptionZh": "总结栏"
        },
        {
          "name": "title",
          "type": "function(currentPageData)",
          "default": "-",
          "description": "Table title renderer",
          "descriptionZh": "列头显示文字"
        },
        {
          "name": "onChange",
          "type": "function(selectedRowKeys, selectedRows)",
          "default": "-",
          "description": "Callback executed when pagination, filters or sorter is changed",
          "since": "`filter` })",
          "descriptionZh": "选中项发生变化时的回调"
        },
        {
          "name": "onHeaderRow",
          "type": "function(column, index)",
          "default": "-",
          "description": "Set props on per header row",
          "descriptionZh": "设置头部行属性"
        },
        {
          "name": "onRow",
          "type": "function(record, index)",
          "default": "-",
          "description": "Set props on per row",
          "descriptionZh": "设置行属性"
        },
        {
          "name": "getPopupContainer",
          "type": "(triggerNode) => HTMLElement",
          "default": "() => TableHtmlElement",
          "description": "The render container of dropdowns in table",
          "descriptionZh": "设置表格内各类浮层的渲染节点，如筛选菜单"
        },
        {
          "name": "sortDirections",
          "type": "Array",
          "default": "[`ascend`, `descend`]",
          "description": "Supported sort way, could be `ascend`, `descend`",
          "descriptionZh": "支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend`"
        },
        {
          "name": "showSorterTooltip",
          "type": "boolean",
          "default": "true",
          "description": "The header show next sorter direction tooltip",
          "descriptionZh": "表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip`"
        },
        {
          "name": "sticky",
          "type": "boolean | `{offsetHeader?: number, offsetScroll?: number}`",
          "default": "-",
          "description": "Set sticky header and scroll bar",
          "since": "4.6.0",
          "descriptionZh": "设置粘性头部和滚动条"
        },
        {
          "name": "align",
          "type": "`left` | `right` | `center`",
          "default": "`left`",
          "description": "The specify which way that column is aligned",
          "since": "`center`",
          "descriptionZh": "设置列的对齐方式"
        },
        {
          "name": "ellipsis",
          "type": "boolean | {showTitle?: boolean }",
          "default": "false",
          "description": "The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }`",
          "since": "4.3.0",
          "descriptionZh": "超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout=\"fixed\"`。"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The className of this column",
          "descriptionZh": "列样式类名"
        },
        {
          "name": "colSpan",
          "type": "number",
          "default": "-",
          "description": "Span of this column's title",
          "descriptionZh": "表头列合并,设置为 0 时，不渲染"
        },
        {
          "name": "dataIndex",
          "type": "string | string[]",
          "default": "-",
          "description": "Display field of the data record, support nest path by string array",
          "since": "-",
          "descriptionZh": "列数据在数据项中对应的路径，支持通过数组查询嵌套路径"
        },
        {
          "name": "defaultFilteredValue",
          "type": "string[]",
          "default": "-",
          "description": "Default filtered values",
          "descriptionZh": "默认筛选值"
        },
        {
          "name": "defaultSortOrder",
          "type": "`ascend` | `descend`",
          "default": "-",
          "description": "Default order of sorted values",
          "since": "-",
          "descriptionZh": "默认排序顺序"
        },
        {
          "name": "filterDropdown",
          "type": "ReactNode | (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode",
          "default": "-",
          "description": "Customized filter overlay",
          "since": "-",
          "descriptionZh": "可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互"
        },
        {
          "name": "filterDropdownVisible",
          "type": "boolean",
          "default": "-",
          "description": "Whether `filterDropdown` is visible",
          "descriptionZh": "用于控制自定义筛选菜单是否可见"
        },
        {
          "name": "filtered",
          "type": "boolean",
          "default": "false",
          "description": "Whether the `dataSource` is filtered",
          "descriptionZh": "标识数据是否经过过滤，筛选图标会高亮"
        },
        {
          "name": "filteredValue",
          "type": "string[]",
          "default": "-",
          "description": "Controlled filtered value, filter icon will highlight",
          "descriptionZh": "筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组"
        },
        {
          "name": "filterIcon",
          "type": "ReactNode | (filtered: boolean) => ReactNode",
          "default": "-",
          "description": "Customized filter icon",
          "since": "-",
          "descriptionZh": "自定义 filter 图标。"
        },
        {
          "name": "filterMultiple",
          "type": "boolean",
          "default": "true",
          "description": "Whether multiple filters can be selected",
          "descriptionZh": "是否多选"
        },
        {
          "name": "filters",
          "type": "object[]",
          "default": "-",
          "description": "Filter menu config",
          "descriptionZh": "表头的筛选菜单项"
        },
        {
          "name": "fixed",
          "type": "boolean",
          "default": "-",
          "description": "(IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'`",
          "since": "false",
          "descriptionZh": "把选择框列固定在左边"
        },
        {
          "name": "key",
          "type": "string",
          "default": "-",
          "description": "Unique key of this column, you can ignore this prop if you've set a unique `dataIndex`",
          "descriptionZh": "React 需要的 key，建议设置"
        },
        {
          "name": "render",
          "type": "function(text, record, index) {}",
          "default": "-",
          "description": "Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan)",
          "descriptionZh": "生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan)"
        },
        {
          "name": "responsive",
          "type": "[]",
          "default": "-",
          "description": "The list of breakpoints at which to display this column. Always visible if not set.",
          "since": "4.2.0",
          "descriptionZh": "响应式 breakpoint 配置列表。未设置则始终可见。"
        },
        {
          "name": "shouldCellUpdate",
          "type": "(record, prevRecord) => boolean",
          "default": "-",
          "description": "Control cell render logic",
          "since": "4.3.0",
          "descriptionZh": "自定义单元格渲染时机"
        },
        {
          "name": "sorter",
          "type": "function | boolean",
          "default": "-",
          "description": "Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true`",
          "since": "-",
          "descriptionZh": "排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true"
        },
        {
          "name": "sortOrder",
          "type": "boolean | string",
          "default": "-",
          "description": "Order of sorted values: `'ascend'` `'descend'` `false`",
          "since": "-",
          "descriptionZh": "排序的受控属性，外界可用此控制列的排序，可设置为 `ascend` `descend` false"
        },
        {
          "name": "sortDirections",
          "type": "Array",
          "default": "[`ascend`, `descend`]",
          "description": "Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend`",
          "descriptionZh": "支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend`"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Title of this column",
          "since": "-",
          "descriptionZh": "列头显示文字"
        },
        {
          "name": "width",
          "type": "string | number",
          "default": "-",
          "description": "Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241))",
          "since": "-",
          "descriptionZh": "列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)）"
        },
        {
          "name": "onCell",
          "type": "function(record, rowIndex)",
          "default": "-",
          "description": "Set props on per cell",
          "descriptionZh": "设置单元格属性"
        },
        {
          "name": "onFilter",
          "type": "function",
          "default": "-",
          "description": "Callback executed when the confirm filter button is clicked",
          "descriptionZh": "本地模式下，确定筛选的运行函数"
        },
        {
          "name": "onFilterDropdownVisibleChange",
          "type": "function(visible) {}",
          "default": "-",
          "description": "Callback executed when `filterDropdownVisible` is changed",
          "descriptionZh": "自定义筛选菜单可见变化时调用"
        },
        {
          "name": "onHeaderCell",
          "type": "function(column)",
          "default": "-",
          "description": "Set props on per header cell",
          "descriptionZh": "设置头部单元格属性"
        },
        {
          "name": "showSorterTooltip",
          "type": "boolean",
          "default": "true",
          "description": "If header show next sorter direction tooltip, override `showSorterTooltip` in table",
          "descriptionZh": "表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip`"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Title of the column group",
          "descriptionZh": "列头显示文字"
        },
        {
          "name": "position",
          "type": "Array",
          "default": "[`bottomRight`]",
          "description": "Specify the position of `Pagination`, could be `topLeft` \\",
          "descriptionZh": "指定分页显示的位置， 取值为`topLeft` \\"
        },
        {
          "name": "childrenColumnName",
          "type": "string[]",
          "default": "children",
          "description": "The column contains children to display",
          "descriptionZh": "指定树形结构的列名"
        },
        {
          "name": "defaultExpandAllRows",
          "type": "boolean",
          "default": "false",
          "description": "Expand all rows initially",
          "descriptionZh": "初始时，是否展开所有行"
        },
        {
          "name": "defaultExpandedRowKeys",
          "type": "string[]",
          "default": "-",
          "description": "Initial expanded row keys",
          "descriptionZh": "默认展开的行"
        },
        {
          "name": "expandIcon",
          "type": "function(props): ReactNode",
          "default": "-",
          "description": "Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr)",
          "descriptionZh": "自定义展开图标，参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr)"
        },
        {
          "name": "expandIconColumnIndex",
          "type": "number",
          "default": "-",
          "description": "Customize expand icon column index. Not render when `-1`",
          "descriptionZh": "自定义展开按钮的列顺序，`-1` 时不展示"
        },
        {
          "name": "expandedRowClassName",
          "type": "function(record, index, indent): string",
          "default": "-",
          "description": "Expanded row's className",
          "descriptionZh": "展开行的 className"
        },
        {
          "name": "expandedRowKeys",
          "type": "string[]",
          "default": "-",
          "description": "Current expanded row keys",
          "descriptionZh": "展开的行，控制属性"
        },
        {
          "name": "expandedRowRender",
          "type": "function(record, index, indent, expanded): ReactNode",
          "default": "-",
          "description": "Expanded container render for each row",
          "descriptionZh": "额外的展开行"
        },
        {
          "name": "expandRowByClick",
          "type": "boolean",
          "default": "false",
          "description": "Whether to expand row by clicking anywhere in the whole row",
          "descriptionZh": "通过点击行来展开子行"
        },
        {
          "name": "indentSize",
          "type": "number",
          "default": "15",
          "description": "Indent size in pixels of tree data",
          "descriptionZh": "展示树形数据时，每层缩进的宽度，以 px 为单位"
        },
        {
          "name": "rowExpandable",
          "type": "(record) => boolean",
          "default": "-",
          "description": "Enable row can be expandable",
          "descriptionZh": "设置是否允许行展开"
        },
        {
          "name": "onExpand",
          "type": "function(expanded, record)",
          "default": "-",
          "description": "Callback executed when the row expand icon is clicked",
          "descriptionZh": "点击展开图标时触发"
        },
        {
          "name": "onExpandedRowsChange",
          "type": "function(expandedRows)",
          "default": "-",
          "description": "Callback executed when the expanded rows change",
          "descriptionZh": "展开的行变化时触发"
        },
        {
          "name": "checkStrictly",
          "type": "boolean",
          "default": "true",
          "description": "Check table row precisely; parent row and children rows are not associated",
          "since": "4.4.0",
          "descriptionZh": "checkable 状态下节点选择完全受控（父子数据选中状态不再关联）"
        },
        {
          "name": "columnWidth",
          "type": "string | number",
          "default": "`60px`",
          "description": "Set the width of the selection column",
          "since": "`60px`",
          "descriptionZh": "自定义列表选择框宽度"
        },
        {
          "name": "columnTitle",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Set the title of the selection column",
          "since": "-",
          "descriptionZh": "自定义列表选择框标题"
        },
        {
          "name": "fixed",
          "type": "boolean",
          "default": "-",
          "description": "Fixed selection column on the left",
          "descriptionZh": "把选择框列固定在左边"
        },
        {
          "name": "getCheckboxProps",
          "type": "function(record)",
          "default": "-",
          "description": "Get Checkbox or Radio props",
          "descriptionZh": "选择框的默认属性配置"
        },
        {
          "name": "hideSelectAll",
          "type": "boolean",
          "default": "false",
          "description": "Hide the selectAll checkbox and custom selection",
          "since": "4.3.0",
          "descriptionZh": "隐藏全选勾选框与自定义选择项"
        },
        {
          "name": "preserveSelectedRowKeys",
          "type": "boolean",
          "default": "-",
          "description": "Keep selection `key` even when it removed from `dataSource`",
          "since": "4.4.0",
          "descriptionZh": "当数据被删除时仍然保留选项的 `key`"
        },
        {
          "name": "renderCell",
          "type": "function(checked, record, index, originNode) {}",
          "default": "-",
          "description": "Renderer of the table cell. Same as `render` in column",
          "since": "4.1.0",
          "descriptionZh": "渲染勾选框，用法与 Column 的 `render` 相同"
        },
        {
          "name": "selectedRowKeys",
          "type": "string[] | number[]",
          "default": "[]",
          "description": "Controlled selected row keys",
          "since": "[]",
          "descriptionZh": "指定选中项的 key 数组，需要和 onChange 进行配合"
        },
        {
          "name": "selections",
          "type": "object[] | boolean",
          "default": "-",
          "description": "Custom selection [config](#rowSelection), only displays default selections when set to `true`",
          "since": "-",
          "descriptionZh": "自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项"
        },
        {
          "name": "type",
          "type": "`checkbox` | `radio`",
          "default": "`checkbox`",
          "description": "`checkbox` or `radio`",
          "since": "`checkbox`",
          "descriptionZh": "多选/单选，`checkbox` or `radio`"
        },
        {
          "name": "onChange",
          "type": "function(selectedRowKeys, selectedRows)",
          "default": "-",
          "description": "Callback executed when selected rows change",
          "descriptionZh": "选中项发生变化时的回调"
        },
        {
          "name": "onSelect",
          "type": "function(record, selected, selectedRows, nativeEvent)",
          "default": "-",
          "description": "Callback executed when select/deselect one row",
          "descriptionZh": "选择项点击回调"
        },
        {
          "name": "onSelectAll",
          "type": "function(selected, selectedRows, changeRows)",
          "default": "-",
          "description": "Callback executed when select/deselect all rows",
          "descriptionZh": "用户手动选择/取消选择所有行的回调"
        },
        {
          "name": "onSelectInvert",
          "type": "function(selectedRowKeys)",
          "default": "-",
          "description": "Callback executed when row selection is inverted",
          "descriptionZh": "用户手动选择反选的回调"
        },
        {
          "name": "x",
          "type": "number | true",
          "default": "-",
          "description": "Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content)",
          "descriptionZh": "设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content)"
        },
        {
          "name": "y",
          "type": "number",
          "default": "-",
          "description": "Set vertical scrolling, can also be used to specify the height of the scroll area, could be number",
          "descriptionZh": "设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值"
        },
        {
          "name": "scrollToFirstRowOnChange",
          "type": "boolean",
          "default": "-",
          "description": "Whether to scroll to the top of the table when paging, sorting, filtering changes",
          "descriptionZh": "当分页、排序、筛选变化后是否滚动到表格顶部"
        },
        {
          "name": "key",
          "type": "string",
          "default": "-",
          "description": "Unique key of this selection",
          "descriptionZh": "React 需要的 key，建议设置"
        },
        {
          "name": "text",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Display text of this selection",
          "descriptionZh": "选择项显示的文字"
        },
        {
          "name": "onSelect",
          "type": "function(changeableRowKeys)",
          "default": "-",
          "description": "Callback executed when this selection is clicked",
          "descriptionZh": "选择项点击回调"
        }
      ],
      "tokens": [
        {
          "name": "bodySortBg",
          "type": "string",
          "default": "",
          "description": "Background color of table sorted column",
          "descriptionZh": "表格排序列背景色"
        },
        {
          "name": "borderColor",
          "type": "string",
          "default": "",
          "description": "Border color of table",
          "descriptionZh": "表格边框/分割线颜色"
        },
        {
          "name": "cellFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of table cell (large size by default)",
          "descriptionZh": "单元格文字大小（默认大尺寸）"
        },
        {
          "name": "cellFontSizeMD",
          "type": "number",
          "default": "",
          "description": "Font size of table cell (middle size)",
          "descriptionZh": "单元格文字大小（中等尺寸）"
        },
        {
          "name": "cellFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of table cell (small size)",
          "descriptionZh": "单元格文字大小（小尺寸）"
        },
        {
          "name": "cellPaddingBlock",
          "type": "number",
          "default": "",
          "description": "Vertical padding of table cell",
          "descriptionZh": "单元格纵向内间距"
        },
        {
          "name": "cellPaddingBlockMD",
          "type": "number",
          "default": "",
          "description": "Vertical padding of table cell (middle size)",
          "descriptionZh": "单元格纵向内间距（中等尺寸）"
        },
        {
          "name": "cellPaddingBlockSM",
          "type": "number",
          "default": "",
          "description": "Vertical padding of table cell (small size)",
          "descriptionZh": "单元格纵向内间距（小尺寸）"
        },
        {
          "name": "cellPaddingInline",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of table cell (large size by default)",
          "descriptionZh": "单元格横向内间距（默认大尺寸）"
        },
        {
          "name": "cellPaddingInlineMD",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of table cell (middle size)",
          "descriptionZh": "单元格横向内间距（中等尺寸）"
        },
        {
          "name": "cellPaddingInlineSM",
          "type": "number",
          "default": "",
          "description": "Horizontal padding of table cell (small size)",
          "descriptionZh": "单元格横向内间距（小尺寸）"
        },
        {
          "name": "expandIconBg",
          "type": "string",
          "default": "",
          "description": "Background of expand button",
          "descriptionZh": "展开按钮背景色"
        },
        {
          "name": "filterDropdownBg",
          "type": "string",
          "default": "",
          "description": "Color of filter dropdown",
          "descriptionZh": "过滤下拉菜单颜色"
        },
        {
          "name": "filterDropdownMenuBg",
          "type": "string",
          "default": "",
          "description": "Background of filter dropdown menu item",
          "descriptionZh": "过滤下拉菜单选项背景"
        },
        {
          "name": "fixedHeaderSortActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color of fixed table header when sorted",
          "descriptionZh": "固定表头排序激活态背景色"
        },
        {
          "name": "footerBg",
          "type": "string",
          "default": "",
          "description": "Background of footer",
          "descriptionZh": "表格底部背景色"
        },
        {
          "name": "footerColor",
          "type": "string",
          "default": "",
          "description": "Color of footer text",
          "descriptionZh": "表格底部文字颜色"
        },
        {
          "name": "headerBg",
          "type": "string",
          "default": "",
          "description": "Background of table header",
          "descriptionZh": "表头背景"
        },
        {
          "name": "headerBorderRadius",
          "type": "number",
          "default": "",
          "description": "Border radius of table header",
          "descriptionZh": "表头圆角"
        },
        {
          "name": "headerColor",
          "type": "string",
          "default": "",
          "description": "Color of table header text",
          "descriptionZh": "表头文字颜色"
        },
        {
          "name": "headerFilterHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of table header filter button when hovered",
          "descriptionZh": "表头过滤按钮悬浮背景色"
        },
        {
          "name": "headerSortActiveBg",
          "type": "string",
          "default": "",
          "description": "Background color of table header when sorted",
          "descriptionZh": "表头排序激活态背景色"
        },
        {
          "name": "headerSortHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of table header when sorted and hovered",
          "descriptionZh": "表头排序激活态悬浮背景色"
        },
        {
          "name": "headerSplitColor",
          "type": "string",
          "default": "",
          "description": "Split border color of table header",
          "descriptionZh": "表头分割线颜色"
        },
        {
          "name": "rowExpandedBg",
          "type": "string",
          "default": "",
          "description": "Background color of table expanded row",
          "descriptionZh": "表格行展开背景色"
        },
        {
          "name": "rowHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of table hovered row",
          "descriptionZh": "表格行悬浮背景色"
        },
        {
          "name": "rowSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color of table selected row",
          "descriptionZh": "表格行选中背景色"
        },
        {
          "name": "rowSelectedHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of table selected row when hovered",
          "descriptionZh": "表格行选中悬浮背景色"
        },
        {
          "name": "selectionColumnWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of selection column",
          "descriptionZh": "选择列宽度"
        },
        {
          "name": "stickyScrollBarBg",
          "type": "string",
          "default": "",
          "description": "Background of sticky scrollbar",
          "descriptionZh": "Sticky 模式下滚动条背景色"
        },
        {
          "name": "stickyScrollBarBorderRadius",
          "type": "number",
          "default": "",
          "description": "Border radius of sticky scrollbar",
          "descriptionZh": "Sticky 模式下滚动条圆角"
        }
      ],
      "faq": [
        {
          "question": "How to hide pagination when single page or not data?",
          "answer": "You can set `hideOnSinglePage` with `pagination` prop."
        },
        {
          "question": "Table will return to first page when filter data.",
          "answer": "Table total page count usually reduce after filter data, we defaultly return to first page in case of current page is out of filtered results.\n\nYou may need to keep current page after filtering when fetch data from remote service, please check [this demo](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) as workaround.\n\nAlso you can use the action from extra param to determine when return to first page."
        },
        {
          "question": "Why Table pagination show size changer?",
          "answer": "In order to improve user experience, Pagination show size changer by default when `total > 50` since `4.1.0`. You can set `showSizeChanger=false` to disable this feature."
        },
        {
          "question": "Why Table fully render when state change?",
          "answer": "Table can not tell what state used in `columns.render`, so it always need fully render to avoid sync issue. You can use `column.shouldCellUpdate` to control render."
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "表格",
      "since": "4.0.0",
      "doc": "\nA table displays rows of data.\n\n## When To Use\n\n- To display a collection of structured data.\n- To sort, search, paginate, filter data.\n\n## How To Use\n\nSpecify `dataSource` of Table as an array of data.\n\n```jsx\nconst dataSource = [\n {\n key: '1',\n name: 'Mike',\n age: 32,\n address: '10 Downing Street',\n },\n {\n key: '2',\n name: 'John',\n age: 42,\n address: '10 Downing Street',\n },\n];\n\nconst columns = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n },\n];\n\n<Table dataSource={dataSource} columns={columns} />;\n```\n\n## API\n\n### Table\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \\| `auto` \\| `fixed` | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` | |\n| bordered | Whether to show all table borders | boolean | false | |\n| columns | Columns of table | [ColumnsType](#Column)\\[] | - | |\n| components | Override default table elements | [TableComponents](https://git.io/fANxz) | - | |\n| dataSource | Data record array to be displayed | object\\[] | - | |\n| expandable | Config expandable content | [expandable](#expandable) | - | |\n| footer | Table footer renderer | function(currentPageData) | - | |\n| loading | Loading status of table | boolean \\| [object](/components/spin/#API) () | false | |\n| locale | The i18n text including filter, sort, empty text, etc | object | filterConfirm: `Ok` <br> filterReset: `Reset` <br> emptyText: `No Data` <br> | |\n| pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object | - | |\n| rowClassName | Row's className | function(record, index): string | - | |\n| rowKey | Row's unique key, could be a string or function that returns a string | string \\| function(record): string | `key` | |\n| rowSelection | Row selection [config](#rowSelection) | object | - | |\n| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | |\n| showHeader | Whether to show table header | boolean | true | |\n| size | Size of table | `default` \\| `middle` \\| `small` | `default` | |\n| summary | Summary content | (currentData) => ReactNode | - | |\n| title | Table title renderer | function(currentPageData) | - | |\n| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \\| `sort` \\| `filter` }) | - | |\n| onHeaderRow | Set props on per header row | function(column, index) | - | |\n| onRow | Set props on per row | function(record, index) | - | |\n| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | |\n| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \\[`ascend`, `descend`] | |\n| showSorterTooltip | The header show next sorter direction tooltip | boolean | true | |\n| sticky | Set sticky header and scroll bar | boolean \\| `{offsetHeader?: number, offsetScroll?: number}` | - | 4.6.0 |\n\n#### onRow usage\n\nSame as `onRow` `onHeaderRow` `onCell` `onHeaderCell`\n\n```jsx\n<Table\n onRow={(record, rowIndex) => {\n return {\n onClick: event => {}, // click row\n onDoubleClick: event => {}, // double click row\n onContextMenu: event => {}, // right button click row\n onMouseEnter: event => {}, // mouse enter row\n onMouseLeave: event => {}, // mouse leave row\n };\n }}\n onHeaderRow={column => {\n return {\n onClick: () => {}, // click header row\n };\n }}\n/>\n```\n\n### Column\n\nOne of the Table `columns` prop for describing the table's columns, Column has the same API.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| align | The specify which way that column is aligned | `left` \\| `right` \\| `center` | `left` | |\n| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \\| {showTitle?: boolean } | false | showTitle: 4.3.0 |\n| className | The className of this column | string | - | |\n| colSpan | Span of this column's title | number | - | |\n| dataIndex | Display field of the data record, support nest path by string array | string \\| string\\[] | - | |\n| defaultFilteredValue | Default filtered values | string\\[] | - | | |\n| defaultSortOrder | Default order of sorted values | `ascend` \\| `descend` | - | |\n| filterDropdown | Customized filter overlay | ReactNode \\| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | |\n| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |\n| filtered | Whether the `dataSource` is filtered | boolean | false | |\n| filteredValue | Controlled filtered value, filter icon will highlight | string\\[] | - | |\n| filterIcon | Customized filter icon | ReactNode \\| (filtered: boolean) => ReactNode | - | |\n| filterMultiple | Whether multiple filters can be selected | boolean | true | |\n| filters | Filter menu config | object\\[] | - | |\n| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \\| string | false | |\n| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | |\n| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | |\n| responsive | The list of breakpoints at which to display this column. Always visible if not set. | \\[] | - | 4.2.0 |\n| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |\n| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \\| boolean | - | |\n| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \\| string | - | |\n| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \\[`ascend`, `descend`] | |\n| title | Title of this column | ReactNode \\| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |\n| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \\| number | - | |\n| onCell | Set props on per cell | function(record, rowIndex) | - | |\n| onFilter | Callback executed when the confirm filter button is clicked | function | - | |\n| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | |\n| onHeaderCell | Set props on per header cell | function(column) | - | |\n| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | true | |\n\n### ColumnGroup\n\n| Property | Description | Type | Default |\n| -------- | ------------------------- | ------------------- | ------- |\n| title | Title of the column group | string \\| ReactNode | - |\n\n### pagination\n\nProperties for pagination.\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| position | Specify the position of `Pagination`, could be `topLeft` \\| `topCenter` \\| `topRight` \\|`bottomLeft` \\| `bottomCenter` \\| `bottomRight` | Array | \\[`bottomRight`] |\n\nMore about pagination, please check [`Pagination`](/components/pagination/).\n\n### expandable\n\nProperties for expandable.\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| childrenColumnName | The column contains children to display | string\\[] | children |\n| defaultExpandAllRows | Expand all rows initially | boolean | false |\n| defaultExpandedRowKeys | Initial expanded row keys | string\\[] | - |\n| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |\n| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | number | - |\n| expandedRowClassName | Expanded row's className | function(record, index, indent): string | - |\n| expandedRowKeys | Current expanded row keys | string\\[] | - |\n| expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - |\n| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false |\n| indentSize | Indent size in pixels of tree data | number | 15 |\n| rowExpandable | Enable row can be expandable | (record) => boolean | - |\n| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - |\n| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - |\n\n### rowSelection\n\nProperties for row selection.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 |\n| columnWidth | Set the width of the selection column | string \\| number | `60px` | |\n| columnTitle | Set the title of the selection column | string \\| ReactNode | - | |\n| fixed | Fixed selection column on the left | boolean | - | |\n| getCheckboxProps | Get Checkbox or Radio props | function(record) | - | |\n| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 4.3.0 |\n| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 4.4.0 |\n| renderCell | Renderer of the table cell. Same as `render` in column | function(checked, record, index, originNode) {} | - | 4.1.0 |\n| selectedRowKeys | Controlled selected row keys | string\\[] \\| number[] | \\[] | |\n| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\\[] \\| boolean | - | |\n| type | `checkbox` or `radio` | `checkbox` \\| `radio` | `checkbox` | |\n| onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows) | - | |\n| onSelect | Callback executed when select/deselect one row | function(record, selected, selectedRows, nativeEvent) | - | |\n| onSelectAll | Callback executed when select/deselect all rows | function(selected, selectedRows, changeRows) | - | |\n| onSelectInvert | Callback executed when row selection is inverted | function(selectedRowKeys) | - | |\n\n### scroll\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| x | Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \\| true | - |\n| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be number | number | - |\n| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |\n\n### selection\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| key | Unique key of this selection | string | - |\n| text | Display text of this selection | string \\| ReactNode | - |\n| onSelect | Callback executed when this selection is clicked | function(changeableRowKeys) | - |\n\n## Using in TypeScript\n\n```tsx\nimport { Table } from 'antd';\nimport { ColumnsType } from 'antd/es/table';\n\ninterface User {\n key: number;\n name: string;\n}\n\nconst columns: ColumnsType<User> = [\n {\n key: 'name',\n title: 'Name',\n dataIndex: 'name',\n },\n];\n\nconst data: User[] = [\n {\n key: 0,\n name: 'Jack',\n },\n];\n\nexport default () => (\n <>\n <Table<User> columns={columns} dataSource={data} />\n /* JSX style usage */\n <Table<User> dataSource={data}>\n <Table.Column<User> key=\"name\" title=\"Name\" dataIndex=\"name\" />\n </Table>\n </>\n);\n```\n\nHere is the [CodeSandbox for TypeScript](https://codesandbox.io/s/serene-platform-0jo5t).\n\n## Note\n\nAccording to the [React documentation](https://facebook.github.io/react/docs/lists-and-keys.html#keys), every child in an array should be assigned a unique key. The values inside the Table's `dataSource` and `columns` should follow this rule. By default, `dataSource[i].key` will be treated as the key value for `dataSource`.\n\n![console warning](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)\n\nIf `dataSource[i].key` is not provided, then you should specify the primary key of dataSource value via `rowKey`, as shown below. If not, warnings like the one above will show in browser console.\n\n```jsx\n// primary key is uid\nreturn <Table rowKey=\"uid\" />;\n// or\nreturn <Table rowKey={record => record.uid} />;\n```\n\n## Migrate to v4\n\nTable removes `onRowClick`, `onRowDoubleClick`, `onRowMouseEnter`, `onRowMouseLeave` and some other api which is already deprecated in v3. If you only use api listing in official document, that's OK.\n\nBesides, the breaking change is changing `dataIndex` from nest string path like `user.age` to string array path like `['user', 'age']`. This help to resolve developer should additional work on the field which contains `.`.\n\n## FAQ\n\n### How to hide pagination when single page or not data?\n\nYou can set `hideOnSinglePage` with `pagination` prop.\n\n### Table will return to first page when filter data.\n\nTable total page count usually reduce after filter data, we defaultly return to first page in case of current page is out of filtered results.\n\nYou may need to keep current page after filtering when fetch data from remote service, please check [this demo](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) as workaround.\n\nAlso you can use the action from extra param to determine when return to first page.\n\n### Why Table pagination show size changer?\n\nIn order to improve user experience, Pagination show size changer by default when `total > 50` since `4.1.0`. You can set `showSizeChanger=false` to disable this feature.\n\n### Why Table fully render when state change?\n\nTable can not tell what state used in `columns.render`, so it always need fully render to avoid sync issue. You can use `column.shouldCellUpdate` to control render.\n",
      "docZh": "\n展示行列数据。\n\n## 设计师专属\n\n安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com/)，两步就可以自动生成 Ant Design 表格组件。\n\n## 何时使用\n\n- 当有大量结构化的数据需要展现时；\n- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。\n\n## 如何使用\n\n指定表格的数据源 `dataSource` 为一个数组。\n\n```jsx\nconst dataSource = [\n {\n key: '1',\n name: '胡彦斌',\n age: 32,\n address: '西湖区湖底公园1号',\n },\n {\n key: '2',\n name: '胡彦祖',\n age: 42,\n address: '西湖区湖底公园1号',\n },\n];\n\nconst columns = [\n {\n title: '姓名',\n dataIndex: 'name',\n key: 'name',\n },\n {\n title: '年龄',\n dataIndex: 'age',\n key: 'age',\n },\n {\n title: '住址',\n dataIndex: 'address',\n key: 'address',\n },\n];\n\n<Table dataSource={dataSource} columns={columns} />;\n```\n\n## API\n\n另外我们封装了 [ProTable](https://procomponents.ant.design/components/table)，在 `antd` Table 之上扩展了更多便捷易用的功能，内置搜索、筛选、刷新等常用表格行为，并为多种类型数据展示提供了内置格式化，欢迎尝试使用。\n\n### Table\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \\| `auto` \\| `fixed` | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | |\n| bordered | 是否展示外边框和列边框 | boolean | false | |\n| columns | 表格列的配置描述，具体项见下表 | [ColumnsType](#Column)\\[] | - | |\n| components | 覆盖默认的 table 元素 | [TableComponents](https://git.io/fANxz) | - | |\n| dataSource | 数据数组 | object\\[] | - | |\n| expandable | 配置展开属性 | [expandable](#expandable) | - | |\n| footer | 表格尾部 | function(currentPageData) | - | |\n| loading | 页面是否加载中 | boolean \\| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | |\n| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: `确定` <br> filterReset: `重置` <br> emptyText: `暂无数据` <br> [默认值](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) | |\n| pagination | 分页器，参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档，设为 false 时不展示和进行分页 | object | - | |\n| rowClassName | 表格行的类名 | function(record, index): string | - | |\n| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \\| function(record): string | `key` | |\n| rowSelection | 表格行是否可选择，[配置项](#rowSelection) | object | - | |\n| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll) | object | - | |\n| showHeader | 是否显示表头 | boolean | true | |\n| size | 表格大小 | `default` \\| `middle` \\| `small` | default | |\n| summary | 总结栏 | (currentData) => ReactNode | - | |\n| title | 表格标题 | function(currentPageData) | - | |\n| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \\| `sort` \\| `filter` }) | - | |\n| onHeaderRow | 设置头部行属性 | function(column, index) | - | |\n| onRow | 设置行属性 | function(record, index) | - | |\n| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |\n| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \\[`ascend`, `descend`] | |\n| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true | |\n| sticky | 设置粘性头部和滚动条 | boolean \\| `{offsetHeader?: number, offsetScroll?: number}` | - | 4.6.0 |\n\n#### onRow 用法\n\n适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。\n\n```jsx\n<Table\n onRow={record => {\n return {\n onClick: event => {}, // 点击行\n onDoubleClick: event => {},\n onContextMenu: event => {},\n onMouseEnter: event => {}, // 鼠标移入行\n onMouseLeave: event => {},\n };\n }}\n onHeaderRow={column => {\n return {\n onClick: () => {}, // 点击表头行\n };\n }}\n/>\n```\n\n### Column\n\n列描述数据对象，是 columns 中的一项，Column 使用相同的 API。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| align | 设置列的对齐方式 | `left` \\| `right` \\| `center` | `left` | |\n| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout=\"fixed\"`。 | boolean \\| { showTitle?: boolean } | false | showTitle: 4.3.0 |\n| className | 列样式类名 | string | - | |\n| colSpan | 表头列合并,设置为 0 时，不渲染 | number | - | |\n| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \\| string\\[] | - | |\n| defaultFilteredValue | 默认筛选值 | string\\[] | - | |\n| defaultSortOrder | 默认排序顺序 | `ascend` \\| `descend` | - | |\n| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \\| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | |\n| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | |\n| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |\n| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\\[] | - | |\n| filterIcon | 自定义 filter 图标。 | ReactNode \\| (filtered: boolean) => ReactNode | false | |\n| filterMultiple | 是否多选 | boolean | true | |\n| filters | 表头的筛选菜单项 | object\\[] | - | |\n| fixed | （IE 下无效）列是否固定，可选 true (等效于 left) `left` `right` | boolean \\| string | false | |\n| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - | |\n| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | |\n| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | \\[] | - | 4.2.0 |\n| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |\n| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | function \\| boolean | - | |\n| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `ascend` `descend` false | boolean \\| string | - | |\n| sortDirections | 支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend` | Array | \\[`ascend`, `descend`] | |\n| title | 列头显示文字（函数用法 `3.10.0` 后支持） | ReactNode \\| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |\n| width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \\| number | - | |\n| onCell | 设置单元格属性 | function(record, rowIndex) | - | |\n| onFilter | 本地模式下，确定筛选的运行函数 | function | - | |\n| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - | |\n| onHeaderCell | 设置头部单元格属性 | function(column) | - | |\n| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip` | boolean | true | |\n\n### ColumnGroup\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | ------------ | ------------------- | ------ |\n| title | 列头显示文字 | string \\| ReactNode | - |\n\n### pagination\n\n分页的配置项。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| position | 指定分页显示的位置， 取值为`topLeft` \\| `topCenter` \\| `topRight` \\|`bottomLeft` \\| `bottomCenter` \\| `bottomRight` | Array | \\[`bottomRight`] |\n\n更多配置项，请查看 [`Pagination`](/components/pagination/)。\n\n### expandable\n\n展开功能的配置。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| childrenColumnName | 指定树形结构的列名 | string\\[] | children |\n| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false |\n| defaultExpandedRowKeys | 默认展开的行 | string\\[] | - |\n| expandIcon | 自定义展开图标，参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |\n| expandIconColumnIndex | 自定义展开按钮的列顺序，`-1` 时不展示 | number | - |\n| expandedRowClassName | 展开行的 className | function(record, index, indent): string | - |\n| expandedRowKeys | 展开的行，控制属性 | string\\[] | - |\n| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - |\n| expandRowByClick | 通过点击行来展开子行 | boolean | false |\n| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |\n| rowExpandable | 设置是否允许行展开 | (record) => boolean | - |\n| onExpand | 点击展开图标时触发 | function(expanded, record) | - |\n| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - |\n\n### rowSelection\n\n选择功能的配置。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |\n| columnWidth | 自定义列表选择框宽度 | string \\| number | `60px` | |\n| columnTitle | 自定义列表选择框标题 | string \\| ReactNode | - | |\n| fixed | 把选择框列固定在左边 | boolean | - | |\n| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |\n| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |\n| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 `key` | boolean | - | 4.4.0 |\n| renderCell | 渲染勾选框，用法与 Column 的 `render` 相同 | function(checked, record, index, originNode) {} | - | 4.1.0 |\n| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\\[] \\| number[] | \\[] | |\n| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\\[] \\| boolean | true | |\n| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` | |\n| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows) | - | |\n| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |\n| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |\n| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |\n\n### scroll\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \\| true | - |\n| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | number | - |\n| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |\n\n### selection\n\n| 参数 | 说明 | 类型 | 默认值 |\n| -------- | -------------------------- | --------------------------- | ------ |\n| key | React 需要的 key，建议设置 | string | - |\n| text | 选择项显示的文字 | string \\| ReactNode | - |\n| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |\n\n## 在 TypeScript 中使用\n\n```tsx\nimport { Table } from 'antd';\nimport { ColumnsType } from 'antd/es/table';\n\ninterface User {\n key: number;\n name: string;\n}\n\nconst columns: ColumnsType<User> = [\n {\n key: 'name',\n title: 'Name',\n dataIndex: 'name',\n },\n];\n\nconst data: User[] = [\n {\n key: 0,\n name: 'Jack',\n },\n];\n\nexport default () => (\n <>\n <Table<User> columns={columns} dataSource={data} />\n /* 使用 JSX 风格的 API */\n <Table<User> dataSource={data}>\n <Table.Column<User> key=\"name\" title=\"Name\" dataIndex=\"name\" />\n </Table>\n </>\n);\n```\n\nTypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。\n\n## 注意\n\n按照 [React 的规范](https://zh-hans.reactjs.org/docs/lists-and-keys.html#keys)，所有的数组组件必须绑定 `key`。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。\n\n![控制台警告](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)\n\n如果 `dataSource[i].key` 没有提供，你应该使用 `rowKey` 来指定 `dataSource` 的主键，如下所示。若没有指定，控制台会出现以上的提示，表格组件也会出现各类奇怪的错误。\n\n```jsx\n// 比如你的数据主键是 uid\nreturn <Table rowKey=\"uid\" />;\n// 或\nreturn <Table rowKey={record => record.uid} />;\n```\n\n## 从 v3 升级到 v4\n\nTable 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMouseEnter`、`onRowMouseLeave` 等方法。如果你使用的 api 为文档中列举的 api，那你不用担心会丢失功能。\n\n此外，比较重大的改动为 `dataIndex` 从支持路径嵌套如 `user.age` 改成了数组路径如 `['user', 'age']`。以解决过去属性名带 `.` 需要额外的数据转化问题。\n\n## FAQ\n\n### 如何在没有数据或只有一页数据时隐藏分页栏\n\n你可以设置 `pagination` 的 `hideOnSinglePage` 属性为 `true`。\n\n### 表格过滤时会回到第一页？\n\n前端过滤时通常条目总数会减少，从而导致总页数小于筛选前的当前页数，为了防止当前页面没有数据，我们默认会返回第一页。\n\n如果你在使用远程分页，很可能需要保持当前页面，你可以参照这个 [受控例子](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) 控制当前页面不变。\n\n### 表格分页为何会出现 size 切换器？\n\n自 `4.1.0` 起，Pagination 在 `total` 大于 50 条时会默认显示 size 切换器以提升用户交互体验。如果你不需要该功能，可以通过设置 `showSizeChanger` 为 `false` 来关闭。\n\n### 为什么 更新 state 会导致全表渲染？\n\n由于 `columns` 支持 `render` 方法，因而 Table 无法知道哪些单元会受到影响。你可以通过 `column.shouldCellUpdate` 来控制单元格的渲染。\n"
    },
    {
      "name": "Tabs",
      "category": "Data Display",
      "description": "",
      "whenToUseZh": "提供平级的区域将大块内容进行收纳和展现，保持界面整洁。\n\nAnt Design 依次提供了三级选项卡，分别用于不同的场景。\n\n- 卡片式的页签，提供可关闭的样式，常用于容器顶部。\n- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。\n- [Radio.Button](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。",
      "props": [
        {
          "name": "addIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "Customize add icon",
          "since": "4.4.0",
          "descriptionZh": "自定义添加按钮"
        },
        {
          "name": "activeKey",
          "type": "string",
          "default": "-",
          "description": "Current TabPane's key",
          "descriptionZh": "当前激活 tab 面板的 key"
        },
        {
          "name": "animated",
          "type": "\"bottom\"`",
          "default": "boolean | {inkBar: boolean, tabPane: boolean}",
          "description": "Whether to change tabs with animation. Only works while `tabPosition=\"top\"",
          "since": "false",
          "descriptionZh": "是否使用动画切换 Tabs，在 `tabPosition=\"top\""
        },
        {
          "name": "renderTabBar",
          "type": "(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement",
          "default": "-",
          "description": "Replace the TabBar",
          "descriptionZh": "替换 TabBar，用于二次封装标签头"
        },
        {
          "name": "defaultActiveKey",
          "type": "string",
          "default": "-",
          "description": "Initial active TabPane's key, if `activeKey` is not set",
          "descriptionZh": "初始化选中面板的 key，如果没有设置 activeKey"
        },
        {
          "name": "hideAdd",
          "type": "boolean",
          "default": "false",
          "description": "Hide plus icon or not. Only works while `type=\"editable-card\"`",
          "descriptionZh": "是否隐藏加号图标，在 `type=\"editable-card\"` 时有效"
        },
        {
          "name": "size",
          "type": "`large` | `default` | `small`",
          "default": "`default`",
          "description": "Preset tab bar size",
          "since": "`small`",
          "descriptionZh": "大小，提供 `large` `default` 和 `small` 三种大小"
        },
        {
          "name": "centered",
          "type": "boolean",
          "default": "false",
          "description": "Centers tabs",
          "since": "4.4.0",
          "descriptionZh": "标签居中展示"
        },
        {
          "name": "tabBarExtraContent",
          "type": "ReactNode | {left?: ReactNode, right?: ReactNode}",
          "default": "-",
          "description": "Extra content in tab bar",
          "since": "-",
          "descriptionZh": "tab bar 上额外的元素"
        },
        {
          "name": "tabBarGutter",
          "type": "number",
          "default": "-",
          "description": "The gap between tabs",
          "descriptionZh": "tabs 之间的间隙"
        },
        {
          "name": "tabBarStyle",
          "type": "object",
          "default": "-",
          "description": "Tab bar style object",
          "descriptionZh": "tab bar 的样式对象"
        },
        {
          "name": "tabPosition",
          "type": "`top` | `right` | `bottom` | `left`",
          "default": "`top`",
          "description": "Position of tabs",
          "since": "`bottom` \\",
          "descriptionZh": "页签位置，可选值有 `top` `right` `bottom` `left`"
        },
        {
          "name": "type",
          "type": "`line` | `card` | `editable-card`",
          "default": "`line`",
          "description": "Basic style of tabs",
          "since": "`editable-card`",
          "descriptionZh": "页签的基本样式，可选 `line`、`card` `editable-card` 类型"
        },
        {
          "name": "onChange",
          "type": "function(activeKey) {}",
          "default": "-",
          "description": "Callback executed when active tab is changed",
          "descriptionZh": "切换面板的回调"
        },
        {
          "name": "onEdit",
          "type": "(targetKey, action) => void",
          "default": "-",
          "description": "Callback executed when tab is added or removed. Only works while `type=\"editable-card\"`",
          "descriptionZh": "新增和删除页签的回调，在 `type=\"editable-card\"` 时有效"
        },
        {
          "name": "onTabClick",
          "type": "function(key: string, event: MouseEvent)",
          "default": "-",
          "description": "Callback executed when tab is clicked",
          "descriptionZh": "tab 被点击的回调"
        },
        {
          "name": "onTabScroll",
          "type": "function({ direction: `left` | `right` | `top` | `bottom` })",
          "default": "-",
          "description": "Trigger when tab scroll",
          "since": "4.3.0",
          "descriptionZh": "tab 滚动时触发"
        },
        {
          "name": "keyboard",
          "type": "boolean",
          "default": "true",
          "description": "Whether to turn on keyboard navigation",
          "descriptionZh": "开启键盘切换功能"
        },
        {
          "name": "forceRender",
          "type": "boolean",
          "default": "false",
          "description": "Forced render of content in tabs, not lazy render after clicking on tabs",
          "descriptionZh": "被隐藏时是否渲染 DOM 结构"
        },
        {
          "name": "key",
          "type": "string",
          "default": "-",
          "description": "TabPane's key",
          "descriptionZh": "对应 activeKey"
        },
        {
          "name": "tab",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Show text in TabPane's head",
          "descriptionZh": "选项卡头显示文字"
        },
        {
          "name": "closeIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "Customize close icon in TabPane's head. Only works while `type=\"editable-card\"`",
          "descriptionZh": "自定义关闭图标，`在 type=\"editable-card\"`时有效"
        }
      ],
      "tokens": [
        {
          "name": "cardBg",
          "type": "string",
          "default": "",
          "description": "Background color of card tab",
          "descriptionZh": "卡片标签页背景色"
        },
        {
          "name": "cardGutter",
          "type": "number",
          "default": "",
          "description": "Gutter of card tab",
          "descriptionZh": "卡片标签间距"
        },
        {
          "name": "cardHeight",
          "type": "number",
          "default": "",
          "description": "Height of card tab",
          "descriptionZh": "卡片标签页高度"
        },
        {
          "name": "cardHeightLG",
          "type": "number",
          "default": "",
          "description": "Height of large card tab",
          "descriptionZh": "大尺寸卡片标签页高度"
        },
        {
          "name": "cardHeightSM",
          "type": "number",
          "default": "",
          "description": "Height of small card tab",
          "descriptionZh": "小尺寸卡片标签页高度"
        },
        {
          "name": "cardPadding",
          "type": "string",
          "default": "",
          "description": "Padding of card tab",
          "descriptionZh": "卡片标签页内间距"
        },
        {
          "name": "cardPaddingLG",
          "type": "string",
          "default": "",
          "description": "Padding of large card tab",
          "descriptionZh": "大号卡片标签页内间距"
        },
        {
          "name": "cardPaddingSM",
          "type": "string",
          "default": "",
          "description": "Padding of small card tab",
          "descriptionZh": "小号卡片标签页内间距"
        },
        {
          "name": "horizontalItemGutter",
          "type": "number",
          "default": "",
          "description": "Horizontal gutter of horizontal tab",
          "descriptionZh": "横向标签页标签间距"
        },
        {
          "name": "horizontalItemMargin",
          "type": "string",
          "default": "",
          "description": "Horizontal margin of horizontal tab item",
          "descriptionZh": "横向标签页标签外间距"
        },
        {
          "name": "horizontalItemMarginRTL",
          "type": "string",
          "default": "",
          "description": "Horizontal margin of horizontal tab item (RTL)",
          "descriptionZh": "横向标签页标签外间距（RTL）"
        },
        {
          "name": "horizontalItemPadding",
          "type": "string",
          "default": "",
          "description": "Horizontal padding of horizontal tab item",
          "descriptionZh": "横向标签页标签内间距"
        },
        {
          "name": "horizontalItemPaddingLG",
          "type": "string",
          "default": "",
          "description": "Horizontal padding of large horizontal tab item",
          "descriptionZh": "大号横向标签页标签内间距"
        },
        {
          "name": "horizontalItemPaddingSM",
          "type": "string",
          "default": "",
          "description": "Horizontal padding of small horizontal tab item",
          "descriptionZh": "小号横向标签页标签内间距"
        },
        {
          "name": "horizontalMargin",
          "type": "string",
          "default": "",
          "description": "Horizontal margin of horizontal tab",
          "descriptionZh": "横向标签页外间距"
        },
        {
          "name": "inkBarColor",
          "type": "string",
          "default": "",
          "description": "Color of indicator",
          "descriptionZh": "指示条颜色"
        },
        {
          "name": "itemActiveColor",
          "type": "string",
          "default": "",
          "description": "Text color of active tab",
          "descriptionZh": "标签激活态文本颜色"
        },
        {
          "name": "itemColor",
          "type": "string",
          "default": "",
          "description": "Text color of tab",
          "descriptionZh": "标签文本颜色"
        },
        {
          "name": "itemHoverColor",
          "type": "string",
          "default": "",
          "description": "Text color of hover tab",
          "descriptionZh": "标签悬浮态文本颜色"
        },
        {
          "name": "itemSelectedColor",
          "type": "string",
          "default": "",
          "description": "Text color of selected tab",
          "descriptionZh": "标签选中态文本颜色"
        },
        {
          "name": "titleFontSize",
          "type": "number",
          "default": "",
          "description": "Font size of title",
          "descriptionZh": "标签页标题文本大小"
        },
        {
          "name": "titleFontSizeLG",
          "type": "number",
          "default": "",
          "description": "Font size of large title",
          "descriptionZh": "大号标签页标题文本大小"
        },
        {
          "name": "titleFontSizeSM",
          "type": "number",
          "default": "",
          "description": "Font size of small title",
          "descriptionZh": "小号标签页标题文本大小"
        },
        {
          "name": "verticalItemMargin",
          "type": "string",
          "default": "",
          "description": "Vertical margin of vertical tab item",
          "descriptionZh": "纵向标签页标签外间距"
        },
        {
          "name": "verticalItemPadding",
          "type": "string",
          "default": "",
          "description": "Vertical padding of vertical tab item",
          "descriptionZh": "纵向标签页标签内间距"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of dropdown menu",
          "descriptionZh": "下拉菜单 z-index"
        }
      ],
      "subComponents": [
        "Tabs.TabPane"
      ],
      "categoryZh": "数据展示",
      "nameZh": "标签页",
      "since": "4.0.0",
      "doc": "\nTabs make it easy to switch between different views.\n\n### When To Use\n\nAnt Design has 3 types of Tabs for different situations.\n\n- Card Tabs: for managing too many closeable views.\n- Normal Tabs: for functional aspects of a page.\n- [Radio.Button](/components/radio/#components-radio-demo-radiobutton): for secondary tabs.\n\n## API\n\n### Tabs\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| addIcon | Customize add icon | ReactNode | - | 4.4.0 |\n| activeKey | Current TabPane's key | string | - | |\n| animated | Whether to change tabs with animation. Only works while `tabPosition=\"top\" | \"bottom\"` | boolean \\| {inkBar: boolean, tabPane: boolean} | false | |\n| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |\n| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | |\n| hideAdd | Hide plus icon or not. Only works while `type=\"editable-card\"` | boolean | false | |\n| size | Preset tab bar size | `large` \\| `default` \\| `small` | `default` | |\n| centered | Centers tabs | boolean | false | 4.4.0 |\n| tabBarExtraContent | Extra content in tab bar | ReactNode \\| {left?: ReactNode, right?: ReactNode} | - | |\n| tabBarGutter | The gap between tabs | number | - | |\n| tabBarStyle | Tab bar style object | object | - | |\n| tabPosition | Position of tabs | `top` \\| `right` \\| `bottom` \\| `left` | `top` | |\n| type | Basic style of tabs | `line` \\| `card` \\| `editable-card` | `line` | |\n| onChange | Callback executed when active tab is changed | function(activeKey) {} | - | |\n| onEdit | Callback executed when tab is added or removed. Only works while `type=\"editable-card\"` | (targetKey, action) => void | - | |\n| onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - | |\n| onTabScroll | Trigger when tab scroll | function({ direction: `left` \\| `right` \\| `top` \\| `bottom` }) | - | 4.3.0 |\n| keyboard | Whether to turn on keyboard navigation | boolean | true | |\n\nMore option at [rc-tabs option](https://github.com/react-component/tabs#tabs)\n\n### Tabs.TabPane\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |\n| key | TabPane's key | string | - |\n| tab | Show text in TabPane's head | string \\| ReactNode | - |\n| closeIcon | Customize close icon in TabPane's head. Only works while `type=\"editable-card\"` | ReactNode | - |\n\nMore option at [rc-tabs option](https://github.com/react-component/tabs#tabpane)\n",
      "docZh": "\n选项卡切换组件。\n\n## 何时使用\n\n提供平级的区域将大块内容进行收纳和展现，保持界面整洁。\n\nAnt Design 依次提供了三级选项卡，分别用于不同的场景。\n\n- 卡片式的页签，提供可关闭的样式，常用于容器顶部。\n- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。\n- [Radio.Button](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。\n\n## API\n\n### Tabs\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |\n| activeKey | 当前激活 tab 面板的 key | string | - | |\n| animated | 是否使用动画切换 Tabs，在 `tabPosition=\"top\" | \"bottom\"` 时有效 | boolean \\| {inkBar: boolean, tabPane: boolean} | false | |\n| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |\n| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | |\n| hideAdd | 是否隐藏加号图标，在 `type=\"editable-card\"` 时有效 | boolean | false | |\n| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | |\n| centered | 标签居中展示 | boolean | false | 4.4.0 |\n| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \\| {left?: ReactNode, right?: ReactNode} | - | |\n| tabBarGutter | tabs 之间的间隙 | number | - | |\n| tabBarStyle | tab bar 的样式对象 | object | - | |\n| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | |\n| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | |\n| onChange | 切换面板的回调 | function(activeKey) {} | - | |\n| onEdit | 新增和删除页签的回调，在 `type=\"editable-card\"` 时有效 | (targetKey, action): void | - | |\n| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - | |\n| onTabScroll | tab 滚动时触发 | function({ direction: `left` \\| `right` \\| `top` \\| `bottom` }) | - | 4.3.0 |\n| keyboard | 开启键盘切换功能 | boolean | true | |\n\n### Tabs.TabPane\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----------- | ----------------------------------------------- | ------------------- | ------ |\n| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |\n| key | 对应 activeKey | string | - |\n| tab | 选项卡头显示文字 | string \\| ReactNode | - |\n| closeIcon | 自定义关闭图标，`在 type=\"editable-card\"`时有效 | ReactNode | - |\n"
    },
    {
      "name": "Tag",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- It can be used to tag by dimension or property.\n\n- When categorizing.",
      "whenToUseZh": "- 用于标记事物的属性和维度。\n- 进行分类。",
      "props": [
        {
          "name": "closable",
          "type": "boolean",
          "default": "false",
          "description": "Whether the Tag can be closed",
          "descriptionZh": "标签是否可以关闭"
        },
        {
          "name": "color",
          "type": "string",
          "default": "-",
          "description": "Color of the Tag",
          "descriptionZh": "标签色"
        },
        {
          "name": "closeIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "Custom close icon",
          "since": "4.4.0",
          "descriptionZh": "自定义关闭按钮"
        },
        {
          "name": "onClose",
          "type": "(e) => void",
          "default": "-",
          "description": "Callback executed when tag is closed",
          "descriptionZh": "关闭时的回调"
        },
        {
          "name": "visible",
          "type": "boolean",
          "default": "true",
          "description": "Whether the Tag is closed or not",
          "descriptionZh": "是否显示标签"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "-",
          "description": "Set the icon of tag",
          "descriptionZh": "设置图标"
        },
        {
          "name": "checked",
          "type": "boolean",
          "default": "false",
          "description": "Checked status of Tag",
          "descriptionZh": "设置标签的选中状态"
        },
        {
          "name": "onChange",
          "type": "(checked) => void",
          "default": "-",
          "description": "Callback executed when Tag is checked/unchecked",
          "descriptionZh": "点击标签时触发的回调"
        }
      ],
      "tokens": [
        {
          "name": "defaultBg",
          "type": "string",
          "default": "",
          "description": "Default background color",
          "descriptionZh": "默认背景色"
        },
        {
          "name": "defaultColor",
          "type": "string",
          "default": "",
          "description": "Default text color",
          "descriptionZh": "默认文字颜色"
        },
        {
          "name": "solidTextColor",
          "type": "string",
          "default": "",
          "description": "Default text color for solid tag.",
          "descriptionZh": "默认实心标签的文本色"
        }
      ],
      "subComponents": [
        "Tag.CheckableTag"
      ],
      "categoryZh": "数据展示",
      "nameZh": "标签",
      "since": "4.0.0",
      "doc": "\nTag for categorizing or markup.\n\n## When To Use\n\n- It can be used to tag by dimension or property.\n\n- When categorizing.\n\n## API\n\n### Tag\n\n| Property | Description | Type | Default | Version |\n| --------- | ------------------------------------ | ----------- | ------- | ------- |\n| closable | Whether the Tag can be closed | boolean | false | |\n| color | Color of the Tag | string | - | |\n| closeIcon | Custom close icon | ReactNode | - | 4.4.0 |\n| onClose | Callback executed when tag is closed | (e) => void | - | |\n| visible | Whether the Tag is closed or not | boolean | true | |\n| icon | Set the icon of tag | ReactNode | - | |\n\n### Tag.CheckableTag\n\n| Property | Description | Type | Default |\n| -------- | ----------------------------------------------- | ----------------- | ------- |\n| checked | Checked status of Tag | boolean | false |\n| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |\n",
      "docZh": "\n进行标记和分类的小标签。\n\n## 何时使用\n\n- 用于标记事物的属性和维度。\n- 进行分类。\n\n## API\n\n### Tag\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --------- | ---------------- | ----------- | ------ | ----- |\n| closable | 标签是否可以关闭 | boolean | false | |\n| color | 标签色 | string | - | |\n| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |\n| onClose | 关闭时的回调 | (e) => void | - | |\n| visible | 是否显示标签 | boolean | true | |\n| icon | 设置图标 | ReactNode | - | |\n\n### Tag.CheckableTag\n\n| 参数 | 说明 | 类型 | 默认值 |\n| -------- | -------------------- | ----------------- | ------ |\n| checked | 设置标签的选中状态 | boolean | false |\n| onChange | 点击标签时触发的回调 | (checked) => void | - |\n"
    },
    {
      "name": "Timeline",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- When a series of information needs to be ordered by time (ascending or descending).\n- When you need a timeline to make a visual connection.",
      "whenToUseZh": "- 当有一系列信息需按时间排列时，可正序和倒序。\n- 需要有一条时间轴进行视觉上的串联时。",
      "props": [
        {
          "name": "pending",
          "type": "boolean | string | ReactNode",
          "default": "false",
          "description": "Set the last ghost node's existence or its content",
          "descriptionZh": "指定最后一个幽灵节点是否存在或内容"
        },
        {
          "name": "pendingDot",
          "type": "string | ReactNode",
          "default": "<LoadingOutlined />",
          "description": "Set the dot of the last ghost node when pending is true",
          "descriptionZh": "当最后一个幽灵节点存在時，指定其时间图点"
        },
        {
          "name": "reverse",
          "type": "boolean",
          "default": "false",
          "description": "Whether reverse nodes or not",
          "descriptionZh": "节点排序"
        },
        {
          "name": "mode",
          "type": "`left` | `alternate` | `right`",
          "default": "-",
          "description": "By sending `alternate` the timeline will distribute the nodes to the left and right",
          "descriptionZh": "通过设置 `mode` 可以改变时间轴和内容的相对位置"
        },
        {
          "name": "color",
          "type": "string",
          "default": "`blue`",
          "description": "Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors",
          "descriptionZh": "指定圆圈颜色 `blue`, `red`, `green`, `gray`，或自定义的色值"
        },
        {
          "name": "dot",
          "type": "string | ReactNode",
          "default": "-",
          "description": "Customize timeline dot",
          "descriptionZh": "自定义时间轴点"
        },
        {
          "name": "position",
          "type": "`left` | `right`",
          "default": "-",
          "description": "Customize node position",
          "descriptionZh": "自定义节点位置"
        },
        {
          "name": "label",
          "type": "ReactNode",
          "default": "-",
          "description": "Set the label",
          "descriptionZh": "设置标签"
        }
      ],
      "tokens": [
        {
          "name": "dotBg",
          "type": "string",
          "default": "",
          "description": "Background color of node",
          "descriptionZh": "节点背景色"
        },
        {
          "name": "dotBorderWidth",
          "type": "string | number",
          "default": "",
          "description": "Border width of node",
          "descriptionZh": "节点边框宽度"
        },
        {
          "name": "dotSize",
          "type": "string | number",
          "default": "",
          "description": "Node size",
          "descriptionZh": "节点大小"
        },
        {
          "name": "itemPaddingBottom",
          "type": "number",
          "default": "",
          "description": "Bottom padding of item",
          "descriptionZh": "时间项下间距"
        },
        {
          "name": "tailColor",
          "type": "string",
          "default": "",
          "description": "Line color",
          "descriptionZh": "轨迹颜色"
        },
        {
          "name": "tailWidth",
          "type": "string | number",
          "default": "",
          "description": "Line width",
          "descriptionZh": "轨迹宽度"
        }
      ],
      "subComponents": [
        "Timeline.Item"
      ],
      "categoryZh": "数据展示",
      "nameZh": "时间轴",
      "since": "4.0.0",
      "doc": "\nVertical display timeline.\n\n## When To Use\n\n- When a series of information needs to be ordered by time (ascending or descending).\n- When you need a timeline to make a visual connection.\n\n## API\n\n```jsx\n<Timeline>\n <Timeline.Item>step1 2015-09-01</Timeline.Item>\n <Timeline.Item>step2 2015-09-01</Timeline.Item>\n <Timeline.Item>step3 2015-09-01</Timeline.Item>\n <Timeline.Item>step4 2015-09-01</Timeline.Item>\n</Timeline>\n```\n\n### Timeline\n\nTimeline\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| pending | Set the last ghost node's existence or its content | boolean \\| string \\| ReactNode | false |\n| pendingDot | Set the dot of the last ghost node when pending is true | string \\| ReactNode | &lt;LoadingOutlined /> |\n| reverse | Whether reverse nodes or not | boolean | false |\n| mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \\| `alternate` \\| `right` | - |\n\n### Timeline.Item\n\nNode of timeline\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` |\n| dot | Customize timeline dot | string \\| ReactNode | - |\n| position | Customize node position | `left` \\| `right` | - |\n| label | Set the label | ReactNode | - |\n",
      "docZh": "\n垂直展示的时间流信息。\n\n## 何时使用\n\n- 当有一系列信息需按时间排列时，可正序和倒序。\n- 需要有一条时间轴进行视觉上的串联时。\n\n## API\n\n```jsx\n<Timeline>\n <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>\n <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>\n <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>\n <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>\n</Timeline>\n```\n\n### Timeline\n\n时间轴。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| pending | 指定最后一个幽灵节点是否存在或内容 | boolean \\| string \\| ReactNode | false |\n| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | string \\| ReactNode | &lt;LoadingOutlined /> |\n| reverse | 节点排序 | boolean | false |\n| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \\| `alternate` \\| `right` | - |\n\n### Timeline.Item\n\n时间轴的每一个节点。\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| color | 指定圆圈颜色 `blue`, `red`, `green`, `gray`，或自定义的色值 | string | `blue` |\n| dot | 自定义时间轴点 | string \\| ReactNode | - |\n| position | 自定义节点位置 | `left` \\| `right` | - |\n| label | 设置标签 | ReactNode | - |\n"
    },
    {
      "name": "TimePicker",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "---\n\nBy clicking the input box, you can select a time from a popup panel.",
      "whenToUseZh": "---\n\n当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。",
      "props": [
        {
          "name": "allowClear",
          "type": "boolean",
          "default": "true",
          "description": "Whether allow clearing text",
          "descriptionZh": "是否展示清除按钮"
        },
        {
          "name": "autoFocus",
          "type": "boolean",
          "default": "false",
          "description": "If get focus when component mounted",
          "descriptionZh": "自动获取焦点"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Whether has border style",
          "descriptionZh": "是否有边框"
        },
        {
          "name": "className",
          "type": "string",
          "default": "-",
          "description": "The className of picker",
          "descriptionZh": "选择器类名"
        },
        {
          "name": "clearText",
          "type": "string",
          "default": "clear",
          "description": "The clear tooltip of icon",
          "descriptionZh": "清除按钮的提示文案"
        },
        {
          "name": "defaultValue",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set default time",
          "descriptionZh": "默认时间"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Determine whether the TimePicker is disabled",
          "descriptionZh": "禁用全部操作"
        },
        {
          "name": "disabledHours",
          "type": "function()",
          "default": "-",
          "description": "To specify the hours that cannot be selected",
          "descriptionZh": "禁止选择部分小时选项"
        },
        {
          "name": "disabledMinutes",
          "type": "function(selectedHour)",
          "default": "-",
          "description": "To specify the minutes that cannot be selected",
          "descriptionZh": "禁止选择部分分钟选项"
        },
        {
          "name": "disabledSeconds",
          "type": "function(selectedHour, selectedMinute)",
          "default": "-",
          "description": "To specify the seconds that cannot be selected",
          "descriptionZh": "禁止选择部分秒选项"
        },
        {
          "name": "format",
          "type": "string",
          "default": "`HH:mm:ss`",
          "description": "To set the time format",
          "descriptionZh": "展示的时间格式"
        },
        {
          "name": "getPopupContainer",
          "type": "function(trigger)",
          "default": "-",
          "description": "To set the container of the floating layer, while the default is to create a div element in body",
          "descriptionZh": "定义浮层的容器，默认为 body 上新建 div"
        },
        {
          "name": "hideDisabledOptions",
          "type": "boolean",
          "default": "false",
          "description": "Whether hide the options that can not be selected",
          "descriptionZh": "隐藏禁止选择的选项"
        },
        {
          "name": "hourStep",
          "type": "number",
          "default": "1",
          "description": "Interval between hours in picker",
          "descriptionZh": "小时选项间隔"
        },
        {
          "name": "inputReadOnly",
          "type": "boolean",
          "default": "false",
          "description": "Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices)",
          "descriptionZh": "设置输入框为只读（避免在移动设备上打开虚拟键盘）"
        },
        {
          "name": "minuteStep",
          "type": "number",
          "default": "1",
          "description": "Interval between minutes in picker",
          "descriptionZh": "分钟选项间隔"
        },
        {
          "name": "open",
          "type": "boolean",
          "default": "false",
          "description": "Whether to popup panel",
          "descriptionZh": "面板是否打开"
        },
        {
          "name": "placeholder",
          "type": "string | [string, string]",
          "default": "`Select a time`",
          "description": "Display when there's no value",
          "since": "`Select a time`",
          "descriptionZh": "没有值的时候显示的内容"
        },
        {
          "name": "popupClassName",
          "type": "string",
          "default": "-",
          "description": "The className of panel",
          "descriptionZh": "弹出层类名"
        },
        {
          "name": "popupStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "The style of panel",
          "descriptionZh": "弹出层样式对象"
        },
        {
          "name": "secondStep",
          "type": "number",
          "default": "1",
          "description": "Interval between seconds in picker",
          "descriptionZh": "秒选项间隔"
        },
        {
          "name": "suffixIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom suffix icon",
          "descriptionZh": "自定义的选择框后缀图标"
        },
        {
          "name": "clearIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom clear icon",
          "descriptionZh": "自定义的清除图标"
        },
        {
          "name": "use12Hours",
          "type": "boolean",
          "default": "false",
          "description": "Display as 12 hours format, with default format `h:mm:ss a`",
          "descriptionZh": "使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a`"
        },
        {
          "name": "renderExtraFooter",
          "type": "() => ReactNode",
          "default": "-",
          "description": "Called from time picker panel to render some addon to its bottom",
          "descriptionZh": "选择框底部显示自定义的内容"
        },
        {
          "name": "value",
          "type": "[moment](http://momentjs.com/)",
          "default": "-",
          "description": "To set time",
          "descriptionZh": "当前时间"
        },
        {
          "name": "onChange",
          "type": "function(time: moment, timeString: string): void",
          "default": "-",
          "description": "A callback function, can be executed when the selected time is changing",
          "descriptionZh": "时间发生变化的回调"
        },
        {
          "name": "onOpenChange",
          "type": "(open: boolean) => void",
          "default": "-",
          "description": "A callback function which will be called while panel opening/closing",
          "descriptionZh": "面板打开/关闭时的回调"
        },
        {
          "name": "onSelect",
          "type": "function(time: moment): void",
          "default": "-",
          "description": "A callback function, executes when a value is selected",
          "descriptionZh": ""
        },
        {
          "name": "showNow",
          "type": "boolean",
          "default": "-",
          "description": "Whether to show `Now` button on panel",
          "since": "4.4.0",
          "descriptionZh": "面板是否显示“此刻”按钮"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "时间选择框",
      "since": "4.0.0",
      "doc": "\nTo select/input a time.\n\n## When To Use\n\n---\n\nBy clicking the input box, you can select a time from a popup panel.\n\n## API\n\n---\n\n```jsx\nimport moment from 'moment';\n\n<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;\n```\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| allowClear | Whether allow clearing text | boolean | true | |\n| autoFocus | If get focus when component mounted | boolean | false | |\n| bordered | Whether has border style | boolean | true | |\n| className | The className of picker | string | - | |\n| clearText | The clear tooltip of icon | string | clear | |\n| defaultValue | To set default time | [moment](http://momentjs.com/) | - | |\n| disabled | Determine whether the TimePicker is disabled | boolean | false | |\n| disabledHours | To specify the hours that cannot be selected | function() | - | |\n| disabledMinutes | To specify the minutes that cannot be selected | function(selectedHour) | - | |\n| disabledSeconds | To specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - | |\n| format | To set the time format | string | `HH:mm:ss` | |\n| getPopupContainer | To set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | |\n| hideDisabledOptions | Whether hide the options that can not be selected | boolean | false | |\n| hourStep | Interval between hours in picker | number | 1 | |\n| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |\n| minuteStep | Interval between minutes in picker | number | 1 | |\n| open | Whether to popup panel | boolean | false | |\n| placeholder | Display when there's no value | string \\| \\[string, string] | `Select a time` | |\n| popupClassName | The className of panel | string | - | |\n| popupStyle | The style of panel | CSSProperties | - | |\n| secondStep | Interval between seconds in picker | number | 1 | |\n| suffixIcon | The custom suffix icon | ReactNode | - | |\n| clearIcon | The custom clear icon | ReactNode | - | |\n| use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false | |\n| renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => ReactNode | - | |\n| value | To set time | [moment](http://momentjs.com/) | - | |\n| onChange | A callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - | |\n| onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - | |\n| onSelect | A callback function, executes when a value is selected | function(time: moment): void | - | |\n| showNow | Whether to show `Now` button on panel | boolean | - | 4.4.0 |\n\n## Methods\n\n| Name | Description | Version |\n| ------- | ------------ | ------- |\n| blur() | Remove focus | |\n| focus() | Get focus | |\n\n### RangePicker\n\nSame props from [RangePicker](/components/date-picker/#RangePicker) of DatePicker. And includes additional props:\n\n| Property | Description | Type | Default | Version |\n| -------- | ------------------------ | ------- | ------- | ------- |\n| order | Order start and end time | boolean | true | 4.1.0 |\n\n<style>\n.code-box-demo.ant-picker { margin: 0 8px 12px 0; }\n.ant-row-rtl.code-box-demo.ant-picker { margin: 0 0 12px 8px; }\n</style>\n\n## FAQ\n\n- [How to use TimePicker with customize date library like dayjs](/docs/react/replace-moment#TimePicker)\n",
      "docZh": "\n输入或选择时间的控件。\n\n## 何时使用\n\n---\n\n当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。\n\n## API\n\n---\n\n```jsx\nimport moment from 'moment';\n<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowClear | 是否展示清除按钮 | boolean | true | |\n| autoFocus | 自动获取焦点 | boolean | false | |\n| bordered | 是否有边框 | boolean | true | |\n| className | 选择器类名 | string | - | |\n| clearText | 清除按钮的提示文案 | string | clear | |\n| defaultValue | 默认时间 | [moment](http://momentjs.com/) | - | |\n| disabled | 禁用全部操作 | boolean | false | |\n| disabledHours | 禁止选择部分小时选项 | function() | - | |\n| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - | |\n| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | - | |\n| format | 展示的时间格式 | string | `HH:mm:ss` | |\n| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |\n| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |\n| hourStep | 小时选项间隔 | number | 1 | |\n| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |\n| minuteStep | 分钟选项间隔 | number | 1 | |\n| open | 面板是否打开 | boolean | false | |\n| placeholder | 没有值的时候显示的内容 | string \\| \\[string, string] | `请选择时间` | |\n| popupClassName | 弹出层类名 | string | - | |\n| popupStyle | 弹出层样式对象 | object | - | |\n| secondStep | 秒选项间隔 | number | 1 | |\n| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |\n| clearIcon | 自定义的清除图标 | ReactNode | - | |\n| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |\n| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | |\n| value | 当前时间 | [moment](http://momentjs.com/) | - | |\n| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - | |\n| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |\n| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |\n\n## 方法\n\n| 名称 | 描述 | 版本 |\n| ------- | -------- | ---- |\n| blur() | 移除焦点 | |\n| focus() | 获取焦点 | |\n\n### RangePicker\n\n属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ----- | -------------------- | ------- | ------ | ----- |\n| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |\n\n<style>\n.code-box-demo.ant-picker { margin: 0 8px 12px 0; }\n.ant-row-rtl.code-box-demo.ant-picker { margin: 0 0 12px 8px; }\n</style>\n\n## FAQ\n\n- [如何在 TimePicker 中使用自定义日期库（如 dayjs ）](/docs/react/replace-moment#TimePicker)\n"
    },
    {
      "name": "Tooltip",
      "category": "Data Display",
      "description": "",
      "whenToUse": "- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.\n- To provide an explanation of a `button/text/operation`. It's often used instead of the html `title` attribute.",
      "whenToUseZh": "鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。\n\n可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。",
      "props": [
        {
          "name": "title",
          "type": "string | ReactNode | () => ReactNode",
          "default": "-",
          "description": "The text shown in the tooltip",
          "descriptionZh": "提示文字"
        },
        {
          "name": "arrowPointAtCenter",
          "type": "boolean",
          "default": "false",
          "description": "Whether the arrow is pointed at the center of target",
          "descriptionZh": "箭头是否指向目标元素中心"
        },
        {
          "name": "autoAdjustOverflow",
          "type": "boolean",
          "default": "true",
          "description": "Whether to adjust popup placement automatically when popup is off screen",
          "descriptionZh": "气泡被遮挡时自动调整位置"
        },
        {
          "name": "defaultVisible",
          "type": "boolean",
          "default": "false",
          "description": "Whether the floating tooltip card is visible by default",
          "descriptionZh": "默认是否显隐"
        },
        {
          "name": "color",
          "type": "string",
          "default": "-",
          "description": "The background color",
          "since": "4.3.0",
          "descriptionZh": "背景颜色"
        },
        {
          "name": "getPopupContainer",
          "type": "function(triggerNode)",
          "default": "() => document.body",
          "description": "The DOM container of the tip, the default behavior is to create a `div` element in `body`",
          "descriptionZh": "浮层渲染父节点，默认渲染到 body 上"
        },
        {
          "name": "mouseEnterDelay",
          "type": "number",
          "default": "0.1",
          "description": "Delay in seconds, before tooltip is shown on mouse enter",
          "descriptionZh": "鼠标移入后延时多少才显示 Tooltip，单位：秒"
        },
        {
          "name": "mouseLeaveDelay",
          "type": "number",
          "default": "0.1",
          "description": "Delay in seconds, before tooltip is hidden on mouse leave",
          "descriptionZh": "鼠标移出后延时多少才隐藏 Tooltip，单位：秒"
        },
        {
          "name": "overlayClassName",
          "type": "string",
          "default": "-",
          "description": "Class name of the tooltip card",
          "descriptionZh": "卡片类名"
        },
        {
          "name": "overlayStyle",
          "type": "object",
          "default": "-",
          "description": "Style of the tooltip card",
          "descriptionZh": "卡片样式"
        },
        {
          "name": "placement",
          "type": "string",
          "default": "`top`",
          "description": "The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`",
          "descriptionZh": "气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`"
        },
        {
          "name": "trigger",
          "type": "`hover` | `focus` | `click` | `contextMenu` | Array<string>",
          "default": "`hover`",
          "description": "Tooltip trigger mode. Could be multiple by passing an array",
          "since": "`click` \\",
          "descriptionZh": "触发行为，可选 `hover` \\"
        },
        {
          "name": "visible",
          "type": "boolean",
          "default": "false",
          "description": "Whether the floating tooltip card is visible or not",
          "descriptionZh": "用于手动控制浮层显隐"
        },
        {
          "name": "onVisibleChange",
          "type": "(visible) => void",
          "default": "-",
          "description": "Callback executed when visibility of the tooltip card is changed",
          "descriptionZh": "显示隐藏的回调"
        },
        {
          "name": "align",
          "type": "object",
          "default": "-",
          "description": "This value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip)",
          "descriptionZh": "该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip)"
        },
        {
          "name": "destroyTooltipOnHide",
          "type": "boolean | { keepParent?: boolean }",
          "default": "false",
          "description": "Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false",
          "since": "false",
          "descriptionZh": "关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器"
        }
      ],
      "tokens": [
        {
          "name": "maxWidth",
          "type": "number",
          "default": "",
          "description": "Max width of tooltip",
          "descriptionZh": "文字提示最大宽度"
        },
        {
          "name": "zIndexPopup",
          "type": "number",
          "default": "",
          "description": "z-index of tooltip",
          "descriptionZh": "文字提示 z-index"
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "文字提示",
      "since": "4.0.0",
      "doc": "\nA simple text popup tip.\n\n## When To Use\n\n- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.\n- To provide an explanation of a `button/text/operation`. It's often used instead of the html `title` attribute.\n\n## API\n\n| Property | Description | Type | Default |\n| -------- | ----------------------------- | -------------------------------------- | ------- |\n| title | The text shown in the tooltip | string \\| ReactNode \\| () => ReactNode | - |\n\n### Common API\n\nThe following APIs are shared by Tooltip, Popconfirm, Popover.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | false | |\n| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true | |\n| defaultVisible | Whether the floating tooltip card is visible by default | boolean | false | |\n| color | The background color | string | - | 4.3.0 |\n| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | function(triggerNode) | () => document.body | |\n| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | |\n| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | |\n| overlayClassName | Class name of the tooltip card | string | - | |\n| overlayStyle | Style of the tooltip card | object | - | |\n| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |\n| trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \\| `focus` \\| `click` \\| `contextMenu` \\| Array&lt;string> | `hover` | |\n| visible | Whether the floating tooltip card is visible or not | boolean | false | |\n| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - | |\n| align | This value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |\n| destroyTooltipOnHide | Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false | boolean \\| { keepParent?: boolean } | false | |\n\n## Note\n\nPlease ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.\n",
      "docZh": "\n简单的文字提示气泡框。\n\n## 何时使用\n\n鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。\n\n可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------- | -------------------------------------- | ------ |\n| title | 提示文字 | string \\| ReactNode \\| () => ReactNode | - |\n\n### 共同的 API\n\n以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false | |\n| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |\n| defaultVisible | 默认是否显隐 | boolean | false | |\n| color | 背景颜色 | string | - | 4.3.0 |\n| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | function(triggerNode) | () => document.body | |\n| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |\n| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |\n| overlayClassName | 卡片类名 | string | - | |\n| overlayStyle | 卡片样式 | object | - | |\n| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |\n| trigger | 触发行为，可选 `hover` \\| `focus` \\| `click` \\| `contextMenu`，可使用数组设置多个触发行为 | string \\| string[] | `hover` | |\n| visible | 用于手动控制浮层显隐 | boolean | false | |\n| onVisibleChange | 显示隐藏的回调 | (visible) => void | - | |\n| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |\n| destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器 | boolean \\| { keepParent?: boolean } | false | |\n\n## 注意\n\n请确保 `Tooltip` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。\n"
    },
    {
      "name": "Transfer",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "- It is a select control essentially which can be use for selecting multiple items.\n- Transfer can display more information for items and take up more space.\n\nTransfer the elements between two columns in an intuitive and efficient way.\n\nOne or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target`. As you can see in the API description, these names are reflected in.",
      "whenToUseZh": "- 需要在多个可选项中进行多选时。\n- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。\n\n穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。\n\n选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反映了这两个概念。",
      "props": [
        {
          "name": "dataSource",
          "type": "[TransferItem](https://git.io/vMM64)[]",
          "default": "[]",
          "description": "Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop",
          "descriptionZh": "数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Whether disabled transfer",
          "descriptionZh": "是否禁用列表"
        },
        {
          "name": "filterOption",
          "type": "(inputValue, option): boolean",
          "default": "-",
          "description": "A function to determine whether an item should show in search result list",
          "descriptionZh": "接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false"
        },
        {
          "name": "footer",
          "type": "(props) => ReactNode",
          "default": "-",
          "description": "A function used for rendering the footer",
          "descriptionZh": "底部渲染函数"
        },
        {
          "name": "listStyle",
          "type": "object | ({direction: `left` | `right`}) => object",
          "default": "-",
          "description": "A custom CSS style used for rendering the transfer columns",
          "since": "`right`}) => object",
          "descriptionZh": "两个穿梭框的自定义样式"
        },
        {
          "name": "locale",
          "type": "{ itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; }",
          "default": "{ itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` }",
          "description": "The i18n text including filter, empty text, item unit, etc",
          "descriptionZh": "各种语言"
        },
        {
          "name": "operations",
          "type": "string[]",
          "default": "[`>`, `<`]",
          "description": "A set of operations that are sorted from top to bottom",
          "descriptionZh": "操作文案集合，顺序从上至下"
        },
        {
          "name": "oneWay",
          "type": "boolean",
          "default": "false",
          "description": "Display as single direction style",
          "since": "4.3.0",
          "descriptionZh": "展示为单向样式"
        },
        {
          "name": "operationStyle",
          "type": "object",
          "default": "-",
          "description": "A custom CSS style used for rendering the operations column",
          "descriptionZh": ""
        },
        {
          "name": "pagination",
          "type": "boolean | { pageSize: number }",
          "default": "false",
          "description": "Use pagination. Not work in render props",
          "since": "4.3.0",
          "descriptionZh": "使用分页样式，自定义渲染列表下无效"
        },
        {
          "name": "render",
          "type": "(record) => ReactNode",
          "default": "-",
          "description": "The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title",
          "descriptionZh": "每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title"
        },
        {
          "name": "selectedKeys",
          "type": "string[]",
          "default": "[]",
          "description": "A set of keys of selected items",
          "descriptionZh": "选中的条目"
        },
        {
          "name": "showSearch",
          "type": "boolean",
          "default": "false",
          "description": "If included, a search box is shown on each column",
          "descriptionZh": "是否显示搜索框"
        },
        {
          "name": "showSelectAll",
          "type": "boolean",
          "default": "true",
          "description": "Show select all checkbox on the header",
          "descriptionZh": "是否展示全选勾选框"
        },
        {
          "name": "targetKeys",
          "type": "string[]",
          "default": "[]",
          "description": "A set of keys of elements that are listed on the right column",
          "descriptionZh": "显示在右侧框数据的 key 集合"
        },
        {
          "name": "titles",
          "type": "ReactNode[]",
          "default": "-",
          "description": "A set of titles that are sorted from left to right",
          "descriptionZh": "标题集合，顺序从左至右"
        },
        {
          "name": "selectAllLabels",
          "type": "(ReactNode | (info: { selectedCount: number, totalCount: number }) => ReactNode)[]",
          "default": "-",
          "description": "A set of customized labels for select all checkboxs on the header",
          "since": "-",
          "descriptionZh": "自定义顶部多选框标题的集合"
        },
        {
          "name": "onChange",
          "type": "(targetKeys, direction, moveKeys): void",
          "default": "-",
          "description": "A callback function that is executed when the transfer between columns is complete",
          "descriptionZh": "选项在两栏之间转移时的回调函数"
        },
        {
          "name": "onScroll",
          "type": "(direction, event): void",
          "default": "-",
          "description": "A callback function which is executed when scroll options list",
          "descriptionZh": "选项列表滚动时的回调函数"
        },
        {
          "name": "onSearch",
          "type": "(direction: `left` | `right`, value: string): void",
          "default": "-",
          "description": "A callback function which is executed when search field are changed",
          "since": "-",
          "descriptionZh": "搜索框内容时改变时的回调函数"
        },
        {
          "name": "onSelectChange",
          "type": "(sourceSelectedKeys, targetSelectedKeys): void",
          "default": "-",
          "description": "A callback function which is executed when selected items are changed",
          "descriptionZh": "选中项发生改变时的回调函数"
        },
        {
          "name": "direction",
          "type": "`left` | `right`",
          "default": "-",
          "description": "List render direction",
          "since": "`right`",
          "descriptionZh": "渲染列表的方向"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "-",
          "description": "Disable list or not",
          "descriptionZh": "是否禁用列表"
        },
        {
          "name": "filteredItems",
          "type": "TransferItem[]",
          "default": "-",
          "description": "Filtered items",
          "descriptionZh": "过滤后的数据"
        },
        {
          "name": "onItemSelect",
          "type": "(key: string, selected: boolean)",
          "default": "-",
          "description": "Select item",
          "descriptionZh": "勾选条目"
        },
        {
          "name": "onItemSelectAll",
          "type": "(keys: string[], selected: boolean)",
          "default": "-",
          "description": "Select a group of items",
          "descriptionZh": "勾选一组条目"
        },
        {
          "name": "selectedKeys",
          "type": "string[]",
          "default": "-",
          "description": "Selected items",
          "descriptionZh": "选中的条目"
        }
      ],
      "tokens": [
        {
          "name": "headerHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of header",
          "descriptionZh": "顶部高度"
        },
        {
          "name": "itemHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of list item",
          "descriptionZh": "列表项高度"
        },
        {
          "name": "itemPaddingBlock",
          "type": "string | number",
          "default": "",
          "description": "Vertical padding of list item",
          "descriptionZh": "列表项纵向内边距"
        },
        {
          "name": "listHeight",
          "type": "string | number",
          "default": "",
          "description": "Height of list",
          "descriptionZh": "列表高度"
        },
        {
          "name": "listWidth",
          "type": "string | number",
          "default": "",
          "description": "Width of list",
          "descriptionZh": "列表宽度"
        },
        {
          "name": "listWidthLG",
          "type": "string | number",
          "default": "",
          "description": "Width of large list",
          "descriptionZh": "大号列表宽度"
        }
      ],
      "faq": [
        {
          "question": "How to support fetch and present data from a remote server in Transfer column.",
          "answer": "In order to keep the page number synchronized, you can disable columns you checked without removing the option: <https://codesandbox.io/s/93xeb>"
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "穿梭框",
      "since": "4.0.0",
      "doc": "\nDouble column transfer choice box.\n\n## When To Use\n\n- It is a select control essentially which can be use for selecting multiple items.\n- Transfer can display more information for items and take up more space.\n\nTransfer the elements between two columns in an intuitive and efficient way.\n\nOne or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target`. As you can see in the API description, these names are reflected in.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop | [TransferItem](https://git.io/vMM64)\\[] | \\[] | |\n| disabled | Whether disabled transfer | boolean | false | |\n| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | - | |\n| footer | A function used for rendering the footer | (props) => ReactNode | - | |\n| listStyle | A custom CSS style used for rendering the transfer columns | object \\| ({direction: `left` \\| `right`}) => object | - | |\n| locale | The i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` } | |\n| operations | A set of operations that are sorted from top to bottom | string\\[] | \\[`>`, `<`] | |\n| oneWay | Display as single direction style | boolean | false | 4.3.0 |\n| operationStyle | A custom CSS style used for rendering the operations column | object | - | |\n| pagination | Use pagination. Not work in render props | boolean \\| { pageSize: number } | false | 4.3.0 |\n| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title | (record) => ReactNode | - | |\n| selectedKeys | A set of keys of selected items | string\\[] | \\[] | |\n| showSearch | If included, a search box is shown on each column | boolean | false | |\n| showSelectAll | Show select all checkbox on the header | boolean | true | |\n| targetKeys | A set of keys of elements that are listed on the right column | string\\[] | \\[] | |\n| titles | A set of titles that are sorted from left to right | ReactNode\\[] | - | |\n| selectAllLabels | A set of customized labels for select all checkboxs on the header | (ReactNode \\| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - | |\n| onChange | A callback function that is executed when the transfer between columns is complete | (targetKeys, direction, moveKeys): void | - | |\n| onScroll | A callback function which is executed when scroll options list | (direction, event): void | - | |\n| onSearch | A callback function which is executed when search field are changed | (direction: `left` \\| `right`, value: string): void | - | |\n| onSelectChange | A callback function which is executed when selected items are changed | (sourceSelectedKeys, targetSelectedKeys): void | - | |\n\n### Render Props\n\nTransfer accept `children` to customize render list, using follow props:\n\n| Property | Description | Type | Version |\n| --------------- | ----------------------- | ----------------------------------- | ------- |\n| direction | List render direction | `left` \\| `right` | |\n| disabled | Disable list or not | boolean | |\n| filteredItems | Filtered items | TransferItem[] | |\n| onItemSelect | Select item | (key: string, selected: boolean) | |\n| onItemSelectAll | Select a group of items | (keys: string[], selected: boolean) | |\n| selectedKeys | Selected items | string[] | |\n\n#### example\n\n```jsx\n<Transfer {...props}>{listProps => <YourComponent {...listProps} />}</Transfer>\n```\n\n## Warning\n\nAccording the [standard](http://facebook.github.io/react/docs/lists-and-keys.html#keys) of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier.\n\nIf there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element.\n\n```jsx\n// eg. your primary key is `uid`\nreturn <Transfer rowKey={record => record.uid} />;\n```\n\n## FAQ\n\n### How to support fetch and present data from a remote server in Transfer column.\n\nIn order to keep the page number synchronized, you can disable columns you checked without removing the option: <https://codesandbox.io/s/93xeb>\n",
      "docZh": "\n双栏穿梭选择框。\n\n## 何时使用\n\n- 需要在多个可选项中进行多选时。\n- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。\n\n穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。\n\n选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反映了这两个概念。\n\n## API\n\n### Transfer\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外 | [TransferItem](https://git.io/vMM64)\\[] | \\[] | |\n| disabled | 是否禁用 | boolean | false | |\n| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | (inputValue, option): boolean | - | |\n| footer | 底部渲染函数 | (props) => ReactNode | - | |\n| listStyle | 两个穿梭框的自定义样式 | object\\|({direction: `left` \\| `right`}) => object | - | |\n| locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` } | |\n| oneWay | 展示为单向样式 | boolean | false | 4.3.0 |\n| operations | 操作文案集合，顺序从上至下 | string\\[] | \\[`>`, `<`] | |\n| pagination | 使用分页样式，自定义渲染列表下无效 | boolean \\| { pageSize: number } | false | 4.3.0 |\n| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title | (record) => ReactNode | - | |\n| selectedKeys | 设置哪些项应该被选中 | string\\[] | \\[] | |\n| showSearch | 是否显示搜索框 | boolean | false | |\n| showSelectAll | 是否展示全选勾选框 | boolean | true | |\n| targetKeys | 显示在右侧框数据的 key 集合 | string\\[] | \\[] | |\n| titles | 标题集合，顺序从左至右 | ReactNode\\[] | - | |\n| selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \\| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - | |\n| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | - | |\n| onScroll | 选项列表滚动时的回调函数 | (direction, event): void | - | |\n| onSearch | 搜索框内容时改变时的回调函数 | (direction: `left` \\| `right`, value: string): void | - | |\n| onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | - | |\n\n### Render Props\n\nTransfer 支持接收 `children` 自定义渲染列表，并返回以下参数：\n\n| 参数 | 说明 | 类型 | 版本 |\n| --------------- | -------------- | ----------------------------------- | ---- |\n| direction | 渲染列表的方向 | `left` \\| `right` | |\n| disabled | 是否禁用列表 | boolean | |\n| filteredItems | 过滤后的数据 | TransferItem[] | |\n| onItemSelect | 勾选条目 | (key: string, selected: boolean) | |\n| onItemSelectAll | 勾选一组条目 | (keys: string[], selected: boolean) | |\n| selectedKeys | 选中的条目 | string[] | |\n\n#### 参考示例\n\n```jsx\n<Transfer {...props}>{listProps => <YourComponent {...listProps} />}</Transfer>\n```\n\n## 注意\n\n按照 React 的[规范](http://facebook.github.io/react/docs/lists-and-keys.html#keys)，所有的组件数组必须绑定 key。在 Transfer 中，`dataSource`里的数据值需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。\n\n如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。\n\n```jsx\n// 比如你的数据主键是 uid\nreturn <Transfer rowKey={record => record.uid} />;\n```\n\n## FAQ\n\n### 怎样让 Transfer 穿梭框列表支持异步数据加载\n\n为了保持页码同步，在勾选时可以不移除选项而以禁用代替：<https://codesandbox.io/s/93xeb>\n"
    },
    {
      "name": "Tree",
      "category": "Data Display",
      "description": "",
      "whenToUse": "Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`.",
      "whenToUseZh": "文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 `树控件` 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。",
      "props": [
        {
          "name": "autoExpandParent",
          "type": "boolean",
          "default": "false",
          "description": "Whether to automatically expand a parent treeNode",
          "descriptionZh": "是否自动展开父节点"
        },
        {
          "name": "blockNode",
          "type": "boolean",
          "default": "false",
          "description": "Whether treeNode fill remaining horizontal space",
          "descriptionZh": "是否节点占据一行"
        },
        {
          "name": "checkable",
          "type": "boolean",
          "default": "false",
          "description": "Add a Checkbox before the treeNodes",
          "descriptionZh": "当树为 checkable 时，设置独立节点是否展示 Checkbox"
        },
        {
          "name": "checkedKeys",
          "type": "string[] | {checked: string[], halfChecked: string[]}",
          "default": "[]",
          "description": "(Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other",
          "since": "[]",
          "descriptionZh": "（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联"
        },
        {
          "name": "checkStrictly",
          "type": "boolean",
          "default": "false",
          "description": "Check treeNode precisely; parent treeNode and children treeNodes are not associated",
          "descriptionZh": "checkable 状态下节点选择完全受控（父子节点选中状态不再关联）"
        },
        {
          "name": "defaultCheckedKeys",
          "type": "string[]",
          "default": "[]",
          "description": "Specifies the keys of the default checked treeNodes",
          "descriptionZh": "默认选中复选框的树节点"
        },
        {
          "name": "defaultExpandAll",
          "type": "boolean",
          "default": "false",
          "description": "Whether to expand all treeNodes by default",
          "descriptionZh": "默认展开所有树节点"
        },
        {
          "name": "defaultExpandedKeys",
          "type": "string[]",
          "default": "[]",
          "description": "Specify the keys of the default expanded treeNodes",
          "descriptionZh": "默认展开指定的树节点"
        },
        {
          "name": "defaultExpandParent",
          "type": "boolean",
          "default": "true",
          "description": "If auto expand parent treeNodes when init",
          "descriptionZh": "默认展开父节点"
        },
        {
          "name": "defaultSelectedKeys",
          "type": "string[]",
          "default": "[]",
          "description": "Specifies the keys of the default selected treeNodes",
          "descriptionZh": "默认选中的树节点"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Whether disabled the tree",
          "descriptionZh": "禁掉响应"
        },
        {
          "name": "draggable",
          "type": "boolean",
          "default": "false",
          "description": "Specifies whether this Tree is draggable (IE > 8)",
          "descriptionZh": "设置节点可拖拽（IE>8）"
        },
        {
          "name": "expandedKeys",
          "type": "string[]",
          "default": "[]",
          "description": "(Controlled) Specifies the keys of the expanded treeNodes",
          "descriptionZh": "（受控）展开指定的树节点"
        },
        {
          "name": "filterTreeNode",
          "type": "function(node)",
          "default": "-",
          "description": "Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted",
          "descriptionZh": "按需筛选树节点（高亮），返回 true"
        },
        {
          "name": "height",
          "type": "number",
          "default": "-",
          "description": "Config virtual scroll height. Will not support horizontal scroll when enable this",
          "descriptionZh": "设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动"
        },
        {
          "name": "loadData",
          "type": "function(node)",
          "default": "-",
          "description": "Load data asynchronously",
          "descriptionZh": "异步加载数据"
        },
        {
          "name": "loadedKeys",
          "type": "string[]",
          "default": "[]",
          "description": "(Controlled) Set loaded tree nodes. Need work with `loadData`",
          "descriptionZh": "（受控）已经加载的节点，需要配合 `loadData` 使用"
        },
        {
          "name": "multiple",
          "type": "boolean",
          "default": "false",
          "description": "Allows selecting multiple treeNodes",
          "descriptionZh": "支持点选多个节点（节点本身）"
        },
        {
          "name": "selectable",
          "type": "boolean",
          "default": "true",
          "description": "Whether can be selected",
          "descriptionZh": "设置节点是否可被选中"
        },
        {
          "name": "selectedKeys",
          "type": "string[]",
          "default": "-",
          "description": "(Controlled) Specifies the keys of the selected treeNodes",
          "descriptionZh": "（受控）设置选中的树节点"
        },
        {
          "name": "showIcon",
          "type": "boolean",
          "default": "false",
          "description": "Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true",
          "descriptionZh": "是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式"
        },
        {
          "name": "switcherIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "Customize collapse/expand icon of tree node",
          "descriptionZh": "自定义树节点的展开/折叠图标"
        },
        {
          "name": "showLine",
          "type": "boolean | {showLeafIcon: boolean}",
          "default": "false",
          "description": "Shows a connecting line",
          "since": "false",
          "descriptionZh": "是否展示连接线"
        },
        {
          "name": "titleRender",
          "type": "(nodeData) => ReactNode",
          "default": "-",
          "description": "Customize tree node title render",
          "since": "4.5.0",
          "descriptionZh": "自定义渲染节点"
        },
        {
          "name": "treeData",
          "type": "array<{ key, title, children, [disabled, selectable] }>",
          "default": "-",
          "description": "The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array)",
          "descriptionZh": "treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）"
        },
        {
          "name": "virtual",
          "type": "boolean",
          "default": "true",
          "description": "Disable virtual scroll when set to false",
          "since": "4.1.0",
          "descriptionZh": "设置 false 时关闭虚拟滚动"
        },
        {
          "name": "onCheck",
          "type": "function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys})",
          "default": "-",
          "description": "Callback function for when the onCheck event occurs",
          "descriptionZh": "点击复选框触发"
        },
        {
          "name": "onDragEnd",
          "type": "function({event, node})",
          "default": "-",
          "description": "Callback function for when the onDragEnd event occurs",
          "descriptionZh": "dragend 触发时调用"
        },
        {
          "name": "onDragEnter",
          "type": "function({event, node, expandedKeys})",
          "default": "-",
          "description": "Callback function for when the onDragEnter event occurs",
          "descriptionZh": "dragenter 触发时调用"
        },
        {
          "name": "onDragLeave",
          "type": "function({event, node})",
          "default": "-",
          "description": "Callback function for when the onDragLeave event occurs",
          "descriptionZh": "dragleave 触发时调用"
        },
        {
          "name": "onDragOver",
          "type": "function({event, node})",
          "default": "-",
          "description": "Callback function for when the onDragOver event occurs",
          "descriptionZh": "dragover 触发时调用"
        },
        {
          "name": "onDragStart",
          "type": "function({event, node})",
          "default": "-",
          "description": "Callback function for when the onDragStart event occurs",
          "descriptionZh": "开始拖拽时调用"
        },
        {
          "name": "onDrop",
          "type": "function({event, node, dragNode, dragNodesKeys})",
          "default": "-",
          "description": "Callback function for when the onDrop event occurs",
          "descriptionZh": "drop 触发时调用"
        },
        {
          "name": "onExpand",
          "type": "function(expandedKeys, {expanded: bool, node})",
          "default": "-",
          "description": "Callback function for when a treeNode is expanded or collapsed",
          "descriptionZh": "展开/收起节点时触发"
        },
        {
          "name": "onLoad",
          "type": "function(loadedKeys, {event, node})",
          "default": "-",
          "description": "Callback function for when a treeNode is loaded",
          "descriptionZh": "节点加载完毕时触发"
        },
        {
          "name": "onRightClick",
          "type": "function({event, node})",
          "default": "-",
          "description": "Callback function for when the user right clicks a treeNode",
          "descriptionZh": "响应右键点击"
        },
        {
          "name": "onSelect",
          "type": "function(selectedKeys, e:{selected: bool, selectedNodes, node, event})",
          "default": "-",
          "description": "Callback function for when the user clicks a treeNode",
          "descriptionZh": "点击树节点触发"
        },
        {
          "name": "icon",
          "type": "ReactNode | (props) => ReactNode",
          "default": "-",
          "description": "Customize treeNode icon",
          "since": "-",
          "descriptionZh": "自定义图标。可接收组件，props 为当前节点 props"
        },
        {
          "name": "checkable",
          "type": "boolean",
          "default": "-",
          "description": "When Tree is checkable, set TreeNode display Checkbox or not",
          "descriptionZh": "当树为 checkable 时，设置独立节点是否展示 Checkbox"
        },
        {
          "name": "disableCheckbox",
          "type": "boolean",
          "default": "false",
          "description": "Disables the checkbox of the treeNode",
          "descriptionZh": "禁掉 checkbox"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disables the treeNode",
          "descriptionZh": "禁掉响应"
        },
        {
          "name": "icon",
          "type": "ReactNode | (props) => ReactNode",
          "default": "-",
          "description": "Customize icon. When you pass component, whose render will receive full TreeNode props as component props",
          "descriptionZh": "自定义图标。可接收组件，props 为当前节点 props"
        },
        {
          "name": "isLeaf",
          "type": "boolean",
          "default": "-",
          "description": "Determines if this is a leaf node(effective when `loadData` is specified). `false` will force trade TreeNode as a parent node",
          "descriptionZh": "设置为叶子节点(设置了`loadData`时有效)。为 `false` 时会强制将其作为父节点"
        },
        {
          "name": "key",
          "type": "string",
          "default": "(internal calculated position of treeNode)",
          "description": "Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree",
          "descriptionZh": "被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！"
        },
        {
          "name": "selectable",
          "type": "boolean",
          "default": "true",
          "description": "Set whether the treeNode can be selected",
          "descriptionZh": "设置节点是否可被选中"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "`---`",
          "description": "Title",
          "descriptionZh": "标题"
        },
        {
          "name": "expandAction",
          "type": "string | boolean",
          "default": "`click`",
          "description": "Directory open logic, optional: false \\",
          "descriptionZh": "目录展开逻辑，可选：false \\"
        }
      ],
      "tokens": [
        {
          "name": "directoryNodeSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color of selected directory node",
          "descriptionZh": "目录树节点选中背景色"
        },
        {
          "name": "directoryNodeSelectedColor",
          "type": "string",
          "default": "",
          "description": "Text color of selected directory node",
          "descriptionZh": "目录树节点选中文字颜色"
        },
        {
          "name": "indentSize",
          "type": "number",
          "default": "",
          "description": "Indent width of tree",
          "descriptionZh": "缩进宽度"
        },
        {
          "name": "nodeHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of hovered node",
          "descriptionZh": "节点悬浮态背景色"
        },
        {
          "name": "nodeHoverColor",
          "type": "string",
          "default": "",
          "description": "Text color of hovered node",
          "descriptionZh": "节点悬浮态态文字颜色"
        },
        {
          "name": "nodeSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color of selected node",
          "descriptionZh": "节点选中态背景色"
        },
        {
          "name": "nodeSelectedColor",
          "type": "string",
          "default": "",
          "description": "Text color of selected node",
          "descriptionZh": "节点选中态文字颜色"
        },
        {
          "name": "switcherSize",
          "type": "number",
          "default": "",
          "description": "Switcher width of tree",
          "descriptionZh": "展开按钮宽度"
        },
        {
          "name": "titleHeight",
          "type": "number",
          "default": "",
          "description": "Node title height",
          "descriptionZh": "节点标题高度"
        }
      ],
      "faq": [
        {
          "question": "How to hide file icon when use showLine?",
          "answer": "File icon realize by using switcherIcon. You can overwrite the style to hide it: https://codesandbox.io/s/883vo47xp8"
        },
        {
          "question": "Why defaultExpandedAll not working on ajax data?",
          "answer": "`default` prefix prop only works when inited. So `defaultExpandedAll` has already executed when ajax load data. You can control `expandedKeys` or render Tree when data loaded to realize expanded all."
        },
        {
          "question": "Virtual scroll limitation",
          "answer": "Virtual scroll only render items in visible region. Thus not support auto width (like long `title` with horizontal scroll)."
        }
      ],
      "categoryZh": "数据展示",
      "nameZh": "树形控件",
      "since": "4.0.0",
      "doc": "\nA hierarchical list structure component.\n\n## When To Use\n\nAlmost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`.\n\n## API\n\n### Tree props\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | false | |\n| blockNode | Whether treeNode fill remaining horizontal space | boolean | false | |\n| checkable | Add a Checkbox before the treeNodes | boolean | false | |\n| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other | string\\[] \\| {checked: string\\[], halfChecked: string\\[]} | \\[] | |\n| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false | |\n| defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\\[] | \\[] | |\n| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |\n| defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string\\[] | \\[] | |\n| defaultExpandParent | If auto expand parent treeNodes when init | boolean | true | |\n| defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string\\[] | \\[] | |\n| disabled | Whether disabled the tree | boolean | false | |\n| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false | |\n| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\\[] | \\[] | |\n| filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - | |\n| height | Config virtual scroll height. Will not support horizontal scroll when enable this | number | - | |\n| loadData | Load data asynchronously | function(node) | - | |\n| loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\\[] | \\[] | |\n| multiple | Allows selecting multiple treeNodes | boolean | false | |\n| selectable | Whether can be selected | boolean | true | |\n| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\\[] | - | |\n| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true | boolean | false | |\n| switcherIcon | Customize collapse/expand icon of tree node | ReactNode | - | |\n| showLine | Shows a connecting line | boolean \\| {showLeafIcon: boolean} | false | |\n| titleRender | Customize tree node title render | (nodeData) => ReactNode | - | 4.5.0 |\n| treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;{ key, title, children, \\[disabled, selectable] }> | - | |\n| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |\n| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - | |\n| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - | |\n| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - | |\n| onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - | |\n| onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - | |\n| onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - | |\n| onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - | |\n| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - | |\n| onLoad | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) | - | |\n| onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - | |\n| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |\n| icon | Customize treeNode icon | ReactNode \\| (props) => ReactNode | - | |\n\n### TreeNode props\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - |\n| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |\n| disabled | Disables the treeNode | boolean | false | |\n| icon | Customize icon. When you pass component, whose render will receive full TreeNode props as component props | ReactNode \\| (props) => ReactNode | - | |\n| isLeaf | Determines if this is a leaf node(effective when `loadData` is specified). `false` will force trade TreeNode as a parent node | boolean | - | |\n| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree | string | (internal calculated position of treeNode) | |\n| selectable | Set whether the treeNode can be selected | boolean | true | |\n| title | Title | string \\| ReactNode | `---` | |\n\n### DirectoryTree props\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| expandAction | Directory open logic, optional: false \\| `click` \\| `doubleClick` | string \\| boolean | `click` |\n\n## Note\n\nBefore `3.4.0`: The number of treeNodes can be very large, but when `checkable=true`, it will increase the compute time. So, we cache some calculations (e.g. `this.treeNodesStates`) to avoid double computing. But, this brings some restrictions. **When you load treeNodes asynchronously, you should render tree like this**:\n\n```jsx\n{\n this.state.treeData.length ? (\n <Tree>\n {this.state.treeData.map(data => (\n <TreeNode />\n ))}\n </Tree>\n ) : (\n 'loading tree'\n );\n}\n```\n\n### Tree Methods\n\n| Name | Description |\n| ----------------- | ------------------------------------ |\n| scrollTo({ key }) | Scroll to key item in virtual scroll |\n\n## FAQ\n\n### How to hide file icon when use showLine?\n\nFile icon realize by using switcherIcon. You can overwrite the style to hide it: https://codesandbox.io/s/883vo47xp8\n\n### Why defaultExpandedAll not working on ajax data?\n\n`default` prefix prop only works when inited. So `defaultExpandedAll` has already executed when ajax load data. You can control `expandedKeys` or render Tree when data loaded to realize expanded all.\n\n### Virtual scroll limitation\n\nVirtual scroll only render items in visible region. Thus not support auto width (like long `title` with horizontal scroll).\n",
      "docZh": "\n多层次的结构列表。\n\n## 何时使用\n\n文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 `树控件` 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。\n\n## API\n\n### Tree props\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| autoExpandParent | 是否自动展开父节点 | boolean | false | |\n| blockNode | 是否节点占据一行 | boolean | false | |\n| checkable | 节点前添加 Checkbox 复选框 | boolean | false | |\n| checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\\[] \\| {checked: string\\[], halfChecked: string\\[]} | \\[] | |\n| checkStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false | |\n| defaultCheckedKeys | 默认选中复选框的树节点 | string\\[] | \\[] | |\n| defaultExpandAll | 默认展开所有树节点 | boolean | false | |\n| defaultExpandedKeys | 默认展开指定的树节点 | string\\[] | \\[] | |\n| defaultExpandParent | 默认展开父节点 | boolean | true | |\n| defaultSelectedKeys | 默认选中的树节点 | string\\[] | \\[] | |\n| disabled | 将树禁用 | boolean | false | |\n| draggable | 设置节点可拖拽（IE>8） | boolean | false | |\n| expandedKeys | （受控）展开指定的树节点 | string\\[] | \\[] | |\n| filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - | |\n| height | 设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动 | number | - | |\n| loadData | 异步加载数据 | function(node) | - | |\n| loadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string\\[] | \\[] | |\n| multiple | 支持点选多个节点（节点本身） | boolean | false | |\n| selectable | 是否可选中 | boolean | true | |\n| selectedKeys | （受控）设置选中的树节点 | string\\[] | - | |\n| showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |\n| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |\n| showLine | 是否展示连接线 | boolean \\| {showLeafIcon: boolean} | false | |\n| titleRender | 自定义渲染节点 | (nodeData) => ReactNode | - | 4.5.0 |\n| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array&lt;{key, title, children, \\[disabled, selectable]}> | - | |\n| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |\n| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - | |\n| onDragEnd | dragend 触发时调用 | function({event, node}) | - | |\n| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - | |\n| onDragLeave | dragleave 触发时调用 | function({event, node}) | - | |\n| onDragOver | dragover 触发时调用 | function({event, node}) | - | |\n| onDragStart | 开始拖拽时调用 | function({event, node}) | - | |\n| onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - | |\n| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - | |\n| onLoad | 节点加载完毕时触发 | function(loadedKeys, {event, node}) | - | |\n| onRightClick | 响应右键点击 | function({event, node}) | - | |\n| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |\n| icon | 自定义树节点图标。 | ReactNode \\| (props) => ReactNode | - | |\n\n### TreeNode props\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| checkable | 当树为 checkable 时，设置独立节点是否展示 Checkbox | boolean | - |\n| disableCheckbox | 禁掉 checkbox | boolean | false |\n| disabled | 禁掉响应 | boolean | false |\n| icon | 自定义图标。可接收组件，props 为当前节点 props | ReactNode \\| (props) => ReactNode | - | |\n| isLeaf | 设置为叶子节点(设置了`loadData`时有效)。为 `false` 时会强制将其作为父节点 | boolean | - |\n| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | (内部计算出的节点位置) |\n| selectable | 设置节点是否可被选中 | boolean | true |\n| title | 标题 | string \\| ReactNode | `---` |\n\n### DirectoryTree props\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| expandAction | 目录展开逻辑，可选：false \\| `click` \\| `doubleClick` | string \\| boolean | `click` |\n\n## 注意\n\n在 `3.4.0` 之前：树节点可以有很多，但在设置`checkable`时，将会花费更多的计算时间，因此我们缓存了一些计算结果（`this.treeNodesStates`）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：\n\n```jsx\n{\n this.state.treeData.length ? (\n <Tree>\n {this.state.treeData.map(data => (\n <TreeNode />\n ))}\n </Tree>\n ) : (\n 'loading tree'\n );\n}\n```\n\n### Tree 方法\n\n| 名称 | 说明 |\n| ----------------- | ------------------------------- |\n| scrollTo({ key }) | 虚拟滚动下，滚动到指定 key 条目 |\n\n## FAQ\n\n### 在 showLine 时，如何隐藏子节点图标？\n\n文件图标通过 switcherIcon 来实现，如果不需要你可以覆盖对应的样式：https://codesandbox.io/s/883vo47xp8\n\n### defaultExpandedAll 在异步加载数据时为何不生效？\n\n`default` 前缀属性只有在初始化时生效，因而异步加载数据时 `defaultExpandedAll` 已经执行完成。你可以通过受控 `expandedKeys` 或者在数据加载完成后渲染 Tree 来实现全部展开。\n\n### 虚拟滚动的限制\n\n虚拟滚动通过在仅渲染可视区域的元素来提升渲染性能。但是同时由于不会渲染所有节点，所以无法自动拓转横向宽度（比如超长 `title` 的横向滚动条）。\n"
    },
    {
      "name": "TreeSelect",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "`TreeSelect` is similar to `Select`, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.",
      "whenToUseZh": "类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。",
      "props": [
        {
          "name": "allowClear",
          "type": "boolean",
          "default": "false",
          "description": "Whether allow clear",
          "descriptionZh": "显示清除按钮"
        },
        {
          "name": "autoClearSearchValue",
          "type": "boolean",
          "default": "true",
          "description": "If auto clear search input value when multiple select is selected/deselected",
          "descriptionZh": "当多选模式下值被选择，自动清空搜索框"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "default": "true",
          "description": "Whether has border style",
          "descriptionZh": "是否显示边框"
        },
        {
          "name": "defaultValue",
          "type": "string | string[]",
          "default": "-",
          "description": "To set the initial selected treeNode(s)",
          "since": "-",
          "descriptionZh": "指定默认选中的条目"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disabled or not",
          "descriptionZh": "是否禁用"
        },
        {
          "name": "dropdownClassName",
          "type": "string",
          "default": "-",
          "description": "The className of dropdown menu",
          "descriptionZh": "下拉菜单的 className 属性"
        },
        {
          "name": "dropdownMatchSelectWidth",
          "type": "boolean | number",
          "default": "true",
          "description": "Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll",
          "since": "true",
          "descriptionZh": "下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动"
        },
        {
          "name": "dropdownRender",
          "type": "(originNode: ReactNode, props) => ReactNode",
          "default": "-",
          "description": "Customize dropdown content",
          "descriptionZh": "自定义下拉框内容"
        },
        {
          "name": "dropdownStyle",
          "type": "CSSProperties",
          "default": "-",
          "description": "To set the style of the dropdown menu",
          "descriptionZh": "下拉菜单的样式"
        },
        {
          "name": "filterTreeNode",
          "type": "boolean | function(inputValue: string, treeNode: TreeNode) (should return boolean)",
          "default": "function",
          "description": "Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default",
          "since": "function",
          "descriptionZh": "是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值"
        },
        {
          "name": "getPopupContainer",
          "type": "function(triggerNode)",
          "default": "() => document.body",
          "description": "To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010)",
          "descriptionZh": "菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010)"
        },
        {
          "name": "labelInValue",
          "type": "boolean",
          "default": "false",
          "description": "Whether to embed label in value, turn the format of value from `string` to {value: string, label: ReactNode, halfChecked: string[]}",
          "descriptionZh": "是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式"
        },
        {
          "name": "listHeight",
          "type": "number",
          "default": "256",
          "description": "Config popup height",
          "descriptionZh": "设置弹窗滚动高度"
        },
        {
          "name": "loadData",
          "type": "function(node)",
          "default": "-",
          "description": "Load data asynchronously",
          "descriptionZh": "异步加载数据"
        },
        {
          "name": "maxTagCount",
          "type": "number",
          "default": "-",
          "description": "Max tag count to show",
          "descriptionZh": "最多显示多少个 tag"
        },
        {
          "name": "maxTagPlaceholder",
          "type": "ReactNode | function(omittedValues)",
          "default": "-",
          "description": "Placeholder for not showing tags",
          "since": "-",
          "descriptionZh": "隐藏 tag 时显示的内容"
        },
        {
          "name": "multiple",
          "type": "boolean",
          "default": "false",
          "description": "Support multiple or not, will be `true` when enable `treeCheckable`",
          "descriptionZh": "支持多选（当设置 treeCheckable 时自动变为 true）"
        },
        {
          "name": "placeholder",
          "type": "string",
          "default": "-",
          "description": "Placeholder of the select input",
          "descriptionZh": "选择框默认文字"
        },
        {
          "name": "searchValue",
          "type": "string",
          "default": "-",
          "description": "Work with `onSearch` to make search value controlled",
          "descriptionZh": "搜索框的值，可以通过 `onSearch` 获取用户输入"
        },
        {
          "name": "treeIcon",
          "type": "boolean",
          "default": "false",
          "description": "Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true`",
          "descriptionZh": "是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式"
        },
        {
          "name": "switcherIcon",
          "type": "expand icon of tree node",
          "default": "ReactNode",
          "description": "customize collapse \\",
          "since": "-",
          "descriptionZh": "自定义树节点的展开/折叠图标"
        },
        {
          "name": "showCheckedStrategy",
          "type": "`TreeSelect.SHOW_ALL` | `TreeSelect.SHOW_PARENT` | `TreeSelect.SHOW_CHILD`",
          "default": "`TreeSelect.SHOW_CHILD`",
          "description": "The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode)",
          "since": "`TreeSelect.SHOW_CHILD`",
          "descriptionZh": "定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点)。`TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点"
        },
        {
          "name": "showSearch",
          "type": "boolean",
          "default": "single: false | multiple: true",
          "description": "Support search or not",
          "since": "multiple: true",
          "descriptionZh": "是否支持搜索框"
        },
        {
          "name": "size",
          "type": "`large` | `middle` | `small`",
          "default": "-",
          "description": "To set the size of the select input",
          "since": "`small`",
          "descriptionZh": "选择框大小"
        },
        {
          "name": "showArrow",
          "type": "boolean",
          "default": "-",
          "description": "Whether to show the `suffixIcon`，when single selection mode, default `true`",
          "descriptionZh": "是否显示 `suffixIcon`，单选模式下默认 `true`"
        },
        {
          "name": "suffixIcon",
          "type": "ReactNode",
          "default": "-",
          "description": "The custom suffix icon,you must set `showArrow` to `true` manually in multiple selection mode",
          "descriptionZh": "自定义的选择框后缀图标, 多选模式下必须同时设置 `showArrow` 为 true"
        },
        {
          "name": "treeCheckable",
          "type": "boolean",
          "default": "false",
          "description": "Whether to show checkbox on the treeNodes",
          "descriptionZh": "显示 Checkbox"
        },
        {
          "name": "treeCheckStrictly",
          "type": "boolean",
          "default": "false",
          "description": "Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true",
          "descriptionZh": "`checkable` 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true"
        },
        {
          "name": "treeData",
          "type": "array<{ value, title, children, [disabled, disableCheckbox, selectable, checkable] }>",
          "default": "[]",
          "description": "Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value)",
          "descriptionZh": "treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）"
        },
        {
          "name": "treeDataSimpleMode",
          "type": "false | object<{ id: string, pId: string, rootPId: string }>",
          "default": "false",
          "description": "Enable simple mode of treeData. Changes the `treeData` schema to: [{id:1, pId:0, value:'1', title:\"test1\",...},...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode`",
          "since": "false",
          "descriptionZh": "使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', title:\"test1\",...},...]， `pId` 是父节点的 id)"
        },
        {
          "name": "treeDefaultExpandAll",
          "type": "boolean",
          "default": "false",
          "description": "Whether to expand all treeNodes by default",
          "descriptionZh": "默认展开所有树节点"
        },
        {
          "name": "treeDefaultExpandedKeys",
          "type": "string[]",
          "default": "-",
          "description": "Default expanded treeNodes",
          "descriptionZh": "默认展开的树节点"
        },
        {
          "name": "treeExpandedKeys",
          "type": "string[]",
          "default": "-",
          "description": "Set expanded keys",
          "descriptionZh": "设置展开的树节点"
        },
        {
          "name": "treeNodeFilterProp",
          "type": "string",
          "default": "`value`",
          "description": "Will be used for filtering if `filterTreeNode` returns true",
          "descriptionZh": "输入项过滤对应的 treeNode 属性"
        },
        {
          "name": "treeNodeLabelProp",
          "type": "string",
          "default": "`title`",
          "description": "Will render as content of select",
          "descriptionZh": "作为显示的 prop 设置"
        },
        {
          "name": "value",
          "type": "string",
          "default": "-",
          "description": "To set the current selected treeNode(s)",
          "since": "-",
          "descriptionZh": "默认根据此属性值进行筛选（其值在整个树范围内唯一）"
        },
        {
          "name": "virtual",
          "type": "boolean",
          "default": "true",
          "description": "Disable virtual scroll when set to false",
          "since": "4.1.0",
          "descriptionZh": "设置 false 时关闭虚拟滚动"
        },
        {
          "name": "onChange",
          "type": "function(value, label, extra)",
          "default": "-",
          "description": "A callback function, can be executed when selected treeNodes or input value change",
          "descriptionZh": "选中树节点时调用此函数"
        },
        {
          "name": "onSearch",
          "type": "function(value: string)",
          "default": "-",
          "description": "A callback function, can be executed when the search input changes",
          "descriptionZh": "文本框值变化时回调"
        },
        {
          "name": "onSelect",
          "type": "function(value, node, extra)",
          "default": "-",
          "description": "A callback function, can be executed when you select a treeNode",
          "descriptionZh": "被选中时调用"
        },
        {
          "name": "onTreeExpand",
          "type": "function(expandedKeys)",
          "default": "-",
          "description": "A callback function, can be executed when treeNode expanded",
          "descriptionZh": "展示节点时调用"
        },
        {
          "name": "blur()",
          "type": "",
          "default": "-",
          "description": "Remove focus",
          "descriptionZh": ""
        },
        {
          "name": "focus()",
          "type": "",
          "default": "-",
          "description": "Get focus",
          "descriptionZh": ""
        },
        {
          "name": "selectable",
          "type": "boolean",
          "default": "true",
          "description": "Whether can be selected",
          "descriptionZh": "是否可选"
        },
        {
          "name": "checkable",
          "type": "boolean",
          "default": "-",
          "description": "When Tree is checkable, set TreeNode display Checkbox or not",
          "descriptionZh": "当树为 Checkbox 时，设置独立节点是否展示 Checkbox"
        },
        {
          "name": "disableCheckbox",
          "type": "boolean",
          "default": "false",
          "description": "Disables the checkbox of the treeNode",
          "descriptionZh": "禁掉 Checkbox"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disabled or not",
          "descriptionZh": "是否禁用"
        },
        {
          "name": "isLeaf",
          "type": "boolean",
          "default": "false",
          "description": "Leaf node or not",
          "descriptionZh": "是否是叶子节点"
        },
        {
          "name": "key",
          "type": "string",
          "default": "-",
          "description": "Required property (unless using `treeDataSimpleMode`), should be unique in the tree",
          "descriptionZh": "此项必须设置（其值在整个树范围内唯一）"
        },
        {
          "name": "title",
          "type": "string | ReactNode",
          "default": "`---`",
          "description": "Content showed on the treeNodes",
          "since": "`---`",
          "descriptionZh": "树节点显示的内容"
        },
        {
          "name": "value",
          "type": "string",
          "default": "-",
          "description": "Will be treated as `treeNodeFilterProp` by default, should be unique in the tree",
          "descriptionZh": "默认根据此属性值进行筛选（其值在整个树范围内唯一）"
        }
      ],
      "tokens": [
        {
          "name": "indentSize",
          "type": "number",
          "default": "",
          "description": "Indent width of tree",
          "descriptionZh": "缩进宽度"
        },
        {
          "name": "nodeHoverBg",
          "type": "string",
          "default": "",
          "description": "Background color of hovered node",
          "descriptionZh": "节点悬浮态背景色"
        },
        {
          "name": "nodeHoverColor",
          "type": "string",
          "default": "",
          "description": "Text color of hovered node",
          "descriptionZh": "节点悬浮态态文字颜色"
        },
        {
          "name": "nodeSelectedBg",
          "type": "string",
          "default": "",
          "description": "Background color of selected node",
          "descriptionZh": "节点选中态背景色"
        },
        {
          "name": "nodeSelectedColor",
          "type": "string",
          "default": "",
          "description": "Text color of selected node",
          "descriptionZh": "节点选中态文字颜色"
        },
        {
          "name": "switcherSize",
          "type": "number",
          "default": "",
          "description": "Switcher width of tree",
          "descriptionZh": "展开按钮宽度"
        },
        {
          "name": "titleHeight",
          "type": "number",
          "default": "",
          "description": "Node title height",
          "descriptionZh": "节点标题高度"
        }
      ],
      "faq": [
        {
          "question": "How to get parent node in onChange?",
          "answer": "We don't provide this since performance consideration. You can get by this way: <https://codesandbox.io/s/wk080nn81k>"
        },
        {
          "question": "Why sometime customize Option cause scroll break?",
          "answer": "You can ref Select [FAQ](/components/select)."
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "树选择",
      "since": "4.0.0",
      "doc": "\nTree selection control.\n\n## When To Use\n\n`TreeSelect` is similar to `Select`, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.\n\n## API\n\n### Tree props\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| allowClear | Whether allow clear | boolean | false | |\n| autoClearSearchValue | If auto clear search input value when multiple select is selected/deselected | boolean | true | |\n| bordered | Whether has border style | boolean | true | |\n| defaultValue | To set the initial selected treeNode(s) | string \\| string\\[] | - | |\n| disabled | Disabled or not | boolean | false | |\n| dropdownClassName | The className of dropdown menu | string | - | |\n| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \\| number | true | |\n| dropdownRender | Customize dropdown content | (originNode: ReactNode, props) => ReactNode | - | |\n| dropdownStyle | To set the style of the dropdown menu | CSSProperties | - | |\n| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default | boolean \\| function(inputValue: string, treeNode: TreeNode) (should return boolean) | function | |\n| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |\n| labelInValue | Whether to embed label in value, turn the format of value from `string` to {value: string, label: ReactNode, halfChecked: string[]} | boolean | false | |\n| listHeight | Config popup height | number | 256 | |\n| loadData | Load data asynchronously | function(node) | - | |\n| maxTagCount | Max tag count to show | number | - | |\n| maxTagPlaceholder | Placeholder for not showing tags | ReactNode \\| function(omittedValues) | - | |\n| multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false | |\n| placeholder | Placeholder of the select input | string | - | |\n| searchValue | Work with `onSearch` to make search value controlled | string | - | |\n| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | |\n| switcherIcon | customize collapse \\| expand icon of tree node | ReactNode | - |\n| showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode) | `TreeSelect.SHOW_ALL` \\| `TreeSelect.SHOW_PARENT` \\| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` | |\n| showSearch | Support search or not | boolean | single: false \\| multiple: true | |\n| size | To set the size of the select input | `large` \\| `middle` \\| `small` | - | |\n| showArrow | Whether to show the `suffixIcon`，when single selection mode, default `true` | boolean | - | |\n| suffixIcon | The custom suffix icon,you must set `showArrow` to `true` manually in multiple selection mode | ReactNode | - | |\n| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | |\n| treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false | |\n| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array&lt;{ value, title, children, \\[disabled, disableCheckbox, selectable, checkable] }> | \\[] | |\n| treeDataSimpleMode | Enable simple mode of treeData. Changes the `treeData` schema to: \\[{id:1, pId:0, value:'1', title:\"test1\",...},...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode` | false \\| object&lt;{ id: string, pId: string, rootPId: string }> | false | |\n| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |\n| treeDefaultExpandedKeys | Default expanded treeNodes | string\\[] | - | |\n| treeExpandedKeys | Set expanded keys | string\\[] | - | |\n| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | |\n| treeNodeLabelProp | Will render as content of select | string | `title` | |\n| value | To set the current selected treeNode(s) | string \\| string\\[] | - | |\n| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |\n| onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | |\n| onSearch | A callback function, can be executed when the search input changes | function(value: string) | - | |\n| onSelect | A callback function, can be executed when you select a treeNode | function(value, node, extra) | - | |\n| onTreeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - | |\n\n### Tree Methods\n\n| Name | Description | Version |\n| ------- | ------------ | ------- |\n| blur() | Remove focus | |\n| focus() | Get focus | |\n\n### TreeNode props\n\n> We recommend you to use `treeData` rather than `TreeNode`, to avoid the trouble of manual construction.\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| selectable | Whether can be selected | boolean | true | |\n| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | |\n| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |\n| disabled | Disabled or not | boolean | false | |\n| isLeaf | Leaf node or not | boolean | false | |\n| key | Required property (unless using `treeDataSimpleMode`), should be unique in the tree | string | - | |\n| title | Content showed on the treeNodes | string \\| ReactNode | `---` | |\n| value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | - | |\n\n## FAQ\n\n### How to get parent node in onChange?\n\nWe don't provide this since performance consideration. You can get by this way: <https://codesandbox.io/s/wk080nn81k>\n\n### Why sometime customize Option cause scroll break?\n\nYou can ref Select [FAQ](/components/select).\n",
      "docZh": "\n树型选择控件。\n\n## 何时使用\n\n类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。\n\n## API\n\n### Tree props\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| allowClear | 显示清除按钮 | boolean | false | |\n| autoClearSearchValue | 当多选模式下值被选择，自动清空搜索框 | boolean | true | |\n| bordered | 是否显示边框 | boolean | true | |\n| defaultValue | 指定默认选中的条目 | string \\| string\\[] | - | |\n| disabled | 是否禁用 | boolean | false | |\n| dropdownClassName | 下拉菜单的 className 属性 | string | - | |\n| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \\| number | true | |\n| dropdownRender | 自定义下拉框内容 | (originNode: ReactNode, props) => ReactNode | - | |\n| dropdownStyle | 下拉菜单的样式 | object | - | |\n| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean \\| function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | function | |\n| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |\n| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式 | boolean | false | |\n| listHeight | 设置弹窗滚动高度 | number | 256 | |\n| loadData | 异步加载数据 | function(node) | - | |\n| maxTagCount | 最多显示多少个 tag | number | - | |\n| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \\| function(omittedValues) | - | |\n| multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false | |\n| placeholder | 选择框默认文字 | string | - | |\n| searchValue | 搜索框的值，可以通过 `onSearch` 获取用户输入 | string | - | |\n| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |\n| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |\n| showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点)。`TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点 | `TreeSelect.SHOW_ALL` \\| `TreeSelect.SHOW_PARENT` \\| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` | |\n| showSearch | 是否支持搜索框 | boolean | 单选：false \\| 多选：true | |\n| size | 选择框大小 | `large` \\| `middle` \\| `small` | - | |\n| showArrow | 是否显示 `suffixIcon`，单选模式下默认 `true` | boolean | - | |\n| suffixIcon | 自定义的选择框后缀图标, 多选模式下必须同时设置 `showArrow` 为 true | ReactNode | - | |\n| treeCheckable | 显示 Checkbox | boolean | false | |\n| treeCheckStrictly | `checkable` 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | boolean | false | |\n| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一） | array&lt;{value, title, children, \\[disabled, disableCheckbox, selectable, checkable]}> | \\[] | |\n| treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: \\[{id:1, pId:0, value:'1', title:\"test1\",...},...]， `pId` 是父节点的 id) | false \\| object&lt;{ id: string, pId: string, rootPId: string }> | false | |\n| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false | |\n| treeDefaultExpandedKeys | 默认展开的树节点 | string\\[] | - | |\n| treeExpandedKeys | 设置展开的树节点 | string\\[] | - | |\n| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | |\n| treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | |\n| value | 指定当前选中的条目 | string \\| string\\[] | - | |\n| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |\n| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - | |\n| onSearch | 文本框值变化时回调 | function(value: string) | - | |\n| onSelect | 被选中时调用 | function(value, node, extra) | - | |\n| onTreeExpand | 展示节点时调用 | function(expandedKeys) | - | |\n\n### Tree 方法\n\n| 名称 | 描述 | 版本 |\n| ------- | -------- | ---- |\n| blur() | 移除焦点 | |\n| focus() | 获取焦点 | |\n\n### TreeNode props\n\n> 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| selectable | 是否可选 | boolean | true | |\n| checkable | 当树为 Checkbox 时，设置独立节点是否展示 Checkbox | boolean | - | |\n| disableCheckbox | 禁掉 Checkbox | boolean | false | |\n| disabled | 是否禁用 | boolean | false | |\n| isLeaf | 是否是叶子节点 | boolean | false | |\n| key | 此项必须设置（其值在整个树范围内唯一） | string | - | |\n| title | 树节点显示的内容 | string \\| ReactNode | `---` | |\n| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | |\n\n## FAQ\n\n### onChange 时如何获得父节点信息？\n\n从性能角度考虑，我们默认不透出父节点信息。你可以这样获得：<https://codesandbox.io/s/wk080nn81k>\n\n### 自定义 Option 样式导致滚动异常怎么办？\n\n请参考 Select 的 [FAQ](/components/select)。\n"
    },
    {
      "name": "Typography",
      "category": "General",
      "description": "",
      "whenToUse": "- When need to display a title or paragraph contents in Articles/Blogs/Notes.\n- When you need copyable/editable/ellipsis texts.",
      "whenToUseZh": "- 当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。\n- 当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。",
      "props": [
        {
          "name": "code",
          "type": "boolean",
          "default": "false",
          "description": "Code style",
          "descriptionZh": "添加代码样式"
        },
        {
          "name": "copyable",
          "type": "boolean | [copyable](#copyable)",
          "default": "false",
          "description": "Whether to be copyable, customize it via setting an object",
          "since": "[copyable](#copyable)",
          "descriptionZh": "是否可拷贝，为对象时可进行各种自定义"
        },
        {
          "name": "delete",
          "type": "boolean",
          "default": "false",
          "description": "Deleted line style",
          "descriptionZh": "添加删除线样式"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disabled content",
          "descriptionZh": "禁用文本"
        },
        {
          "name": "editable",
          "type": "boolean | [editable](#editable)",
          "default": "false",
          "description": "If editable. Can control edit state when is object",
          "since": "[editable](#editable)",
          "descriptionZh": "是否可编辑，为对象时可对编辑进行控制"
        },
        {
          "name": "ellipsis",
          "type": "boolean | [ellipsis](#ellipsis)",
          "default": "false",
          "description": "Display ellipsis when text overflows, can configure rows and expandable by using object",
          "since": "[ellipsis](#ellipsis)",
          "descriptionZh": "自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等"
        },
        {
          "name": "mark",
          "type": "boolean",
          "default": "false",
          "description": "Marked style",
          "descriptionZh": "添加标记样式"
        },
        {
          "name": "keyboard",
          "type": "boolean",
          "default": "false",
          "description": "Keyboard style",
          "since": "4.3.0",
          "descriptionZh": "添加键盘样式"
        },
        {
          "name": "underline",
          "type": "boolean",
          "default": "false",
          "description": "Underlined style",
          "descriptionZh": "添加下划线样式"
        },
        {
          "name": "onChange",
          "type": "function(string)",
          "default": "-",
          "description": "Trigger when user edits the content",
          "descriptionZh": "文本域编辑时触发"
        },
        {
          "name": "strong",
          "type": "boolean",
          "default": "false",
          "description": "Bold style",
          "descriptionZh": "是否加粗"
        },
        {
          "name": "type",
          "type": "`secondary` | `success` | `warning` | `danger`",
          "default": "-",
          "description": "Content type",
          "since": "4.6.0",
          "descriptionZh": "文本类型"
        },
        {
          "name": "code",
          "type": "boolean",
          "default": "false",
          "description": "Code style",
          "descriptionZh": "添加代码样式"
        },
        {
          "name": "copyable",
          "type": "boolean | [copyable](#copyable)",
          "default": "false",
          "description": "Whether to be copyable, customize it via setting an object",
          "since": "[copyable](#copyable)",
          "descriptionZh": "是否可拷贝，为对象时可进行各种自定义"
        },
        {
          "name": "delete",
          "type": "boolean",
          "default": "false",
          "description": "Deleted line style",
          "descriptionZh": "添加删除线样式"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disabled content",
          "descriptionZh": "禁用文本"
        },
        {
          "name": "editable",
          "type": "boolean | [editable](#editable)",
          "default": "false",
          "description": "If editable. Can control edit state when is object",
          "since": "[editable](#editable)",
          "descriptionZh": "是否可编辑，为对象时可对编辑进行控制"
        },
        {
          "name": "ellipsis",
          "type": "boolean | [ellipsis](#ellipsis)",
          "default": "false",
          "description": "Display ellipsis when text overflows, can configure rows and expandable by using object",
          "since": "[ellipsis](#ellipsis)",
          "descriptionZh": "自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等"
        },
        {
          "name": "level",
          "type": "number: 1, 2, 3, 4, 5",
          "default": "1",
          "description": "Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5`",
          "since": "4.6.0",
          "descriptionZh": "重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5`"
        },
        {
          "name": "mark",
          "type": "boolean",
          "default": "false",
          "description": "Marked style",
          "descriptionZh": "添加标记样式"
        },
        {
          "name": "underline",
          "type": "boolean",
          "default": "false",
          "description": "Underlined style",
          "descriptionZh": "添加下划线样式"
        },
        {
          "name": "onChange",
          "type": "function(string)",
          "default": "-",
          "description": "Trigger when user edits the content",
          "descriptionZh": "文本域编辑时触发"
        },
        {
          "name": "type",
          "type": "`secondary` | `success` | `warning` | `danger`",
          "default": "-",
          "description": "Content type",
          "since": "4.6.0",
          "descriptionZh": "文本类型"
        },
        {
          "name": "code",
          "type": "boolean",
          "default": "false",
          "description": "Code style",
          "descriptionZh": "添加代码样式"
        },
        {
          "name": "copyable",
          "type": "boolean | [copyable](#copyable)",
          "default": "false",
          "description": "Whether to be copyable, customize it via setting an object",
          "since": "[copyable](#copyable)",
          "descriptionZh": "是否可拷贝，为对象时可进行各种自定义"
        },
        {
          "name": "delete",
          "type": "boolean",
          "default": "false",
          "description": "Deleted line style",
          "descriptionZh": "添加删除线样式"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disabled content",
          "descriptionZh": "禁用文本"
        },
        {
          "name": "editable",
          "type": "boolean | [editable](#editable)",
          "default": "false",
          "description": "If editable. Can control edit state when is object",
          "since": "[editable](#editable)",
          "descriptionZh": "是否可编辑，为对象时可对编辑进行控制"
        },
        {
          "name": "ellipsis",
          "type": "boolean | [ellipsis](#ellipsis)",
          "default": "false",
          "description": "Display ellipsis when text overflows, can configure rows and expandable by using object",
          "since": "[ellipsis](#ellipsis)",
          "descriptionZh": "自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等"
        },
        {
          "name": "mark",
          "type": "boolean",
          "default": "false",
          "description": "Marked style",
          "descriptionZh": "添加标记样式"
        },
        {
          "name": "underline",
          "type": "boolean",
          "default": "false",
          "description": "Underlined style",
          "descriptionZh": "添加下划线样式"
        },
        {
          "name": "onChange",
          "type": "function(string)",
          "default": "-",
          "description": "Trigger when user edits the content",
          "descriptionZh": "文本域编辑时触发"
        },
        {
          "name": "strong",
          "type": "boolean",
          "default": "false",
          "description": "Bold style",
          "descriptionZh": "是否加粗"
        },
        {
          "name": "type",
          "type": "`secondary` | `success` | `warning` | `danger`",
          "default": "-",
          "description": "Content type",
          "since": "4.6.0",
          "descriptionZh": "文本类型"
        },
        {
          "name": "text",
          "type": "string",
          "default": "-",
          "description": "The text to copy",
          "descriptionZh": "拷贝到剪切板里的文本"
        },
        {
          "name": "onCopy",
          "type": "function",
          "default": "-",
          "description": "Called when copied text",
          "descriptionZh": "拷贝成功的回调函数"
        },
        {
          "name": "icon",
          "type": "[ReactNode, ReactNode]",
          "default": "-",
          "description": "Custom copy icon: [copyIcon, copiedIcon]",
          "since": "4.6.0",
          "descriptionZh": "自定义编辑图标"
        },
        {
          "name": "tooltips",
          "type": "[ReactNode, ReactNode]",
          "default": "[`Copy`, `Copied`]",
          "description": "Custom tooltip text, hide when it is false",
          "since": "4.4.0",
          "descriptionZh": "自定义提示文案，为 false 时隐藏文案"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "default": "<EditOutlined />",
          "description": "Custom editable icon",
          "since": "4.6.0",
          "descriptionZh": "自定义编辑图标"
        },
        {
          "name": "tooltip",
          "type": "boolean | ReactNode",
          "default": "`Edit`",
          "description": "Custom tooltip text, hide when it is false",
          "since": "4.6.0",
          "descriptionZh": "自定义提示文本，为 false 时关闭"
        },
        {
          "name": "editing",
          "type": "boolean",
          "default": "false",
          "description": "Whether to be editable",
          "descriptionZh": "控制是否是编辑中状态"
        },
        {
          "name": "maxLength",
          "type": "number",
          "default": "-",
          "description": "`maxLength` attribute of textarea",
          "since": "4.4.0",
          "descriptionZh": "编辑中文本域最大长度"
        },
        {
          "name": "autoSize",
          "type": "boolean | { minRows: number, maxRows: number }",
          "default": "-",
          "description": "`autoSize` attribute of textarea",
          "since": "4.4.0",
          "descriptionZh": "自动 resize 文本域"
        },
        {
          "name": "onStart",
          "type": "function",
          "default": "-",
          "description": "Called when enter editable state",
          "descriptionZh": "进入编辑中状态时触发"
        },
        {
          "name": "onChange",
          "type": "function(event)",
          "default": "-",
          "description": "Called when input at textarea",
          "descriptionZh": "文本域编辑时触发"
        },
        {
          "name": "rows",
          "type": "number",
          "default": "-",
          "description": "Max rows of content",
          "descriptionZh": "最多显示的行数"
        },
        {
          "name": "expandable",
          "type": "boolean",
          "default": "-",
          "description": "Whether to be expandable",
          "descriptionZh": "是否可展开"
        },
        {
          "name": "suffix",
          "type": "ReactNode",
          "default": "-",
          "description": "Suffix of ellipsis content",
          "descriptionZh": "自定义省略内容后缀"
        },
        {
          "name": "symbol",
          "type": "ReactNode",
          "default": "`...`",
          "description": "Custom `...` symbol of ellipsis",
          "descriptionZh": "自定义省略符号"
        },
        {
          "name": "onExpand",
          "type": "function(event)",
          "default": "-",
          "description": "Called when expand content",
          "descriptionZh": "点击展开时的回调"
        },
        {
          "name": "onEllipsis",
          "type": "function(ellipsis)",
          "default": "-",
          "description": "Called when enter or leave ellipsis state",
          "since": "4.2.0",
          "descriptionZh": "触发省略时的回调"
        }
      ],
      "tokens": [
        {
          "name": "titleMarginBottom",
          "type": "string | number",
          "default": "",
          "description": "Margin bottom of title",
          "descriptionZh": "标题下间距"
        },
        {
          "name": "titleMarginTop",
          "type": "string | number",
          "default": "",
          "description": "Margin top of title",
          "descriptionZh": "标题上间距"
        }
      ],
      "faq": [
        {
          "question": "How to use Typography.Link in react-router?",
          "answer": "`react-router` support render component:\n\n```tsx\n<Link to=\"/\" component={Typography.Link} />\n```"
        }
      ],
      "subComponents": [
        "Typography.Text",
        "Typography.Title",
        "Typography.Paragraph"
      ],
      "categoryZh": "通用",
      "nameZh": "排版",
      "since": "4.0.0",
      "doc": "\nBasic text writing, including headings, body text, lists, and more.\n\n## When To Use\n\n- When need to display a title or paragraph contents in Articles/Blogs/Notes.\n- When you need copyable/editable/ellipsis texts.\n\n## API\n\n### Typography.Text\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| code | Code style | boolean | false | |\n| copyable | Whether to be copyable, customize it via setting an object | boolean \\| [copyable](#copyable) | false | [copyable](#copyable) |\n| delete | Deleted line style | boolean | false | |\n| disabled | Disabled content | boolean | false | |\n| editable | If editable. Can control edit state when is object | boolean \\| [editable](#editable) | false | [editable](#editable) |\n| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \\| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |\n| mark | Marked style | boolean | false | |\n| keyboard | Keyboard style | boolean | false | 4.3.0 |\n| underline | Underlined style | boolean | false | |\n| onChange | Trigger when user edits the content | function(string) | - | |\n| strong | Bold style | boolean | false | |\n| type | Content type | `secondary` \\| `success` \\| `warning` \\| `danger` | - | success: 4.6.0 |\n\n### Typography.Title\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| code | Code style | boolean | false | |\n| copyable | Whether to be copyable, customize it via setting an object | boolean \\| [copyable](#copyable) | false | [copyable](#copyable) |\n| delete | Deleted line style | boolean | false | |\n| disabled | Disabled content | boolean | false | |\n| editable | If editable. Can control edit state when is object | boolean \\| [editable](#editable) | false | [editable](#editable) |\n| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \\| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |\n| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |\n| mark | Marked style | boolean | false | |\n| underline | Underlined style | boolean | false | |\n| onChange | Trigger when user edits the content | function(string) | - | |\n| type | Content type | `secondary` \\| `success` \\| `warning` \\| `danger` | - | success: 4.6.0 |\n\n### Typography.Paragraph\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| code | Code style | boolean | false | |\n| copyable | Whether to be copyable, customize it via setting an object | boolean \\| [copyable](#copyable) | false | [copyable](#copyable) |\n| delete | Deleted line style | boolean | false | |\n| disabled | Disabled content | boolean | false | |\n| editable | If editable. Can control edit state when is object | boolean \\| [editable](#editable) | false | [editable](#editable) |\n| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \\| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |\n| mark | Marked style | boolean | false | |\n| underline | Underlined style | boolean | false | |\n| onChange | Trigger when user edits the content | function(string) | - | |\n| strong | Bold style | boolean | false | |\n| type | Content type | `secondary` \\| `success` \\| `warning` \\| `danger` | - | success: 4.6.0 |\n\n### copyable\n\n```\n{\n text: string,\n onCopy: function,\n icon: ReactNode,\n tooltips: false | [ReactNode, ReactNode],\n}\n```\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| text | The text to copy | string | - | |\n| onCopy | Called when copied text | function | - | |\n| icon | Custom copy icon: \\[copyIcon, copiedIcon] | \\[ReactNode, ReactNode\\] | - | 4.6.0 |\n| tooltips | Custom tooltip text, hide when it is false | \\[ReactNode, ReactNode\\] | \\[`Copy`, `Copied`] | 4.4.0 |\n\n### editable\n\n```\n{\n icon: ReactNode,\n tooltip: boolean | ReactNode,\n editing: boolean,\n maxLength: number,\n autoSize: boolean | { minRows: number, maxRows: number },\n onStart: function,\n onChange: function(string),\n}\n```\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| icon | Custom editable icon | ReactNode | &lt;EditOutlined /> | 4.6.0 |\n| tooltip | Custom tooltip text, hide when it is false | boolean \\| ReactNode | `Edit` | 4.6.0 |\n| editing | Whether to be editable | boolean | false | |\n| maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |\n| autoSize | `autoSize` attribute of textarea | boolean \\| { minRows: number, maxRows: number } | - | 4.4.0 |\n| onStart | Called when enter editable state | function | - | |\n| onChange | Called when input at textarea | function(event) | - | |\n\n### ellipsis\n\n```\n{\n rows: number,\n expandable: boolean,\n suffix: string,\n symbol: ReactNode,\n onExpand: function(event),\n onEllipsis: function(ellipsis),\n}\n```\n\n| Property | Description | Type | Default | Version |\n| ---------- | ----------------------------------------- | ------------------ | ------- | ------- |\n| rows | Max rows of content | number | - | |\n| expandable | Whether to be expandable | boolean | - | |\n| suffix | Suffix of ellipsis content | ReactNode | - | |\n| symbol | Custom `...` symbol of ellipsis | ReactNode | `...` | |\n| onExpand | Called when expand content | function(event) | - | |\n| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |\n\n## FAQ\n\n### How to use Typography.Link in react-router?\n\n`react-router` support render component:\n\n```tsx\n<Link to=\"/\" component={Typography.Link} />\n```\n",
      "docZh": "\n文本的基本格式。\n\n## 何时使用\n\n- 当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。\n- 当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。\n\n## API\n\n### Typography.Text\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| code | 添加代码样式 | boolean | false | |\n| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \\| [copyable](#copyable) | false | [copyable](#copyable) |\n| delete | 添加删除线样式 | boolean | false | |\n| disabled | 禁用文本 | boolean | false | |\n| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \\| [editable](#editable) | false | [editable](#editable) |\n| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \\| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |\n| mark | 添加标记样式 | boolean | false | |\n| keyboard | 添加键盘样式 | boolean | false | 4.3.0 |\n| underline | 添加下划线样式 | boolean | false | |\n| strong | 是否加粗 | boolean | false | |\n| type | 文本类型 | `secondary` \\| `success` \\| `warning` \\| `danger` | - | success: 4.6.0 |\n\n### Typography.Title\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| code | 添加代码样式 | boolean | false | |\n| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \\| [copyable](#copyable) | false | [copyable](#copyable) |\n| delete | 添加删除线样式 | boolean | false | |\n| disabled | 禁用文本 | boolean | false | |\n| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \\| [editable](#editable) | false | [editable](#editable) |\n| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \\| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |\n| level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |\n| mark | 添加标记样式 | boolean | false | |\n| underline | 添加下划线样式 | boolean | false | |\n| onChange | 当用户提交编辑内容时触发 | function(string) | - | |\n| type | 文本类型 | `secondary` \\| `success` \\| `warning` \\| `danger` | - | success: 4.6.0 |\n\n### Typography.Paragraph\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| code | 添加代码样式 | boolean | false | |\n| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \\| [copyable](#copyable) | false | [copyable](#copyable) |\n| delete | 添加删除线样式 | boolean | false | |\n| disabled | 禁用文本 | boolean | false | |\n| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \\| [editable](#editable) | false | [editable](#editable) |\n| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \\| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |\n| mark | 添加标记样式 | boolean | false | |\n| underline | 添加下划线样式 | boolean | false | |\n| onChange | 当用户提交编辑内容时触发 | function(string) | - | |\n| strong | 是否加粗 | boolean | false | |\n| type | 文本类型 | `secondary` \\| `success` \\| `warning` \\| `danger` | - | success: 4.6.0 |\n\n### copyable\n\n```\n{\n text: string,\n onCopy: function,\n icon: ReactNode,\n tooltips: false | [ReactNode, ReactNode],\n}\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| text | 拷贝到剪切板里的文本 | string | - | |\n| onCopy | 拷贝成功的回调函数 | function | - | |\n| icon | 自定义拷贝图标：\\[默认图标, 拷贝后的图标] | \\[ReactNode, ReactNode\\] | - | 4.6.0 |\n| tooltips | 自定义提示文案，为 false 时隐藏文案 | \\[ReactNode, ReactNode\\] | \\[`复制`, `复制成功`] | 4.4.0 |\n\n### editable\n\n```\n{\n icon: ReactNode,\n tooltip: boolean | ReactNode,\n editing: boolean,\n maxLength: number,\n autoSize: boolean | { minRows: number, maxRows: number },\n onStart: function,\n onChange: function(string),\n}\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| icon | 自定义编辑图标 | ReactNode | &lt;EditOutlined /> | 4.6.0 |\n| tooltip | 自定义提示文本，为 false 时关闭 | boolean \\| ReactNode | `编辑` | 4.6.0 |\n| editing | 控制是否是编辑中状态 | boolean | false | |\n| maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |\n| autoSize | 自动 resize 文本域 | boolean \\| { minRows: number, maxRows: number } | - | 4.4.0 |\n| onStart | 进入编辑中状态时触发 | function | - | |\n| onChange | 文本域编辑时触发 | function(event) | - | |\n\n### ellipsis\n\n```\n{\n rows: number,\n expandable: boolean,\n suffix: string,\n symbol: ReactNode,\n onExpand: function(event),\n onEllipsis: function(ellipsis),\n}\n```\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| ---------- | ------------------ | ------------------ | ------ | ----- |\n| rows | 最多显示的行数 | number | - | |\n| expandable | 是否可展开 | boolean | - | |\n| suffix | 自定义省略内容后缀 | ReactNode | - | |\n| symbol | 自定义省略符号 | ReactNode | `...` | |\n| onExpand | 点击展开时的回调 | function(event) | - | |\n| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |\n\n## FAQ\n\n### Typography.Link 如何与 react-router 库集成？\n\n`react-router` 支持[自定义](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md#component-reactcomponent)渲染组件：\n\n```tsx\n<Link to=\"/\" component={Typography.Link} />\n```\n"
    },
    {
      "name": "Upload",
      "category": "Data Entry",
      "description": "",
      "whenToUse": "Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.\n\n- When you need to upload one or more files.\n- When you need to show the process of uploading.\n- When you need to upload files by dragging and dropping.",
      "whenToUseZh": "上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。\n\n- 当需要上传一个或一些文件时。\n- 当需要展现上传的进度时。\n- 当需要使用拖拽交互时。",
      "props": [
        {
          "name": "accept",
          "type": "string",
          "default": "-",
          "description": "File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)",
          "descriptionZh": "接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)"
        },
        {
          "name": "action",
          "type": "string | (file) => Promise",
          "default": "-",
          "description": "Uploading URL",
          "since": "-",
          "descriptionZh": "上传的地址"
        },
        {
          "name": "method",
          "type": "string",
          "default": "`post`",
          "description": "The http method of upload request",
          "descriptionZh": "上传请求的 http method"
        },
        {
          "name": "directory",
          "type": "boolean",
          "default": "false",
          "description": "Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory))",
          "descriptionZh": "支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)）"
        },
        {
          "name": "beforeUpload",
          "type": "(file, fileList) => boolean | Promise",
          "default": "-",
          "description": "Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported in IE9**",
          "since": "-",
          "descriptionZh": "上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）。**注意：IE9 不支持该方法**"
        },
        {
          "name": "customRequest",
          "type": "function",
          "default": "-",
          "description": "Override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest",
          "descriptionZh": "通过覆盖默认的上传行为，可以自定义自己的上传实现"
        },
        {
          "name": "data",
          "type": "object | (file) => object | Promise<object>",
          "default": "-",
          "description": "Uploading extra params or function which can return uploading extra params",
          "since": "Promise<object>",
          "descriptionZh": "上传所需额外参数或返回上传额外参数的方法"
        },
        {
          "name": "defaultFileList",
          "type": "object[]",
          "default": "-",
          "description": "Default list of files that have been uploaded",
          "descriptionZh": "默认已经上传的文件列表"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "default": "false",
          "description": "Disable upload button",
          "descriptionZh": "是否禁用"
        },
        {
          "name": "fileList",
          "type": "object[]",
          "default": "-",
          "description": "List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it",
          "descriptionZh": "已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423)"
        },
        {
          "name": "headers",
          "type": "object",
          "default": "-",
          "description": "Set request headers, valid above IE10",
          "descriptionZh": "设置上传的请求头部，IE10 以上有效"
        },
        {
          "name": "listType",
          "type": "string",
          "default": "`text`",
          "description": "Built-in stylesheets, support for three types: `text`, `picture` or `picture-card`",
          "descriptionZh": "上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card`"
        },
        {
          "name": "multiple",
          "type": "boolean",
          "default": "false",
          "description": "Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true",
          "descriptionZh": "是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件"
        },
        {
          "name": "name",
          "type": "string",
          "default": "`file`",
          "description": "The name of uploading file",
          "descriptionZh": "发到后台的文件参数名"
        },
        {
          "name": "previewFile",
          "type": "(file: File | Blob) => Promise<dataURL: string>",
          "default": "-",
          "description": "Customize preview file logic",
          "since": "-",
          "descriptionZh": "自定义文件预览逻辑"
        },
        {
          "name": "isImageUrl",
          "type": "(file: UploadFile) => boolean",
          "default": "[(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68)",
          "description": "Customize if render <img /> in thumbnail",
          "descriptionZh": "自定义缩略图是否使用 <img /> 标签进行显示"
        },
        {
          "name": "showUploadList",
          "type": "boolean | { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode }",
          "default": "true",
          "description": "Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually",
          "since": "true",
          "descriptionZh": "是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon`"
        },
        {
          "name": "withCredentials",
          "type": "boolean",
          "default": "false",
          "description": "The ajax upload with cookie sent",
          "descriptionZh": "上传请求时是否携带 cookie"
        },
        {
          "name": "openFileDialogOnClick",
          "type": "boolean",
          "default": "true",
          "description": "Click open file dialog",
          "descriptionZh": "点击打开文件对话框"
        },
        {
          "name": "onChange",
          "type": "function",
          "default": "-",
          "description": "A callback function, can be executed when uploading state is changing, see [onChange](#onChange)",
          "descriptionZh": "上传文件改变时的状态，详见 [onChange](#onChange)"
        },
        {
          "name": "onPreview",
          "type": "function(file)",
          "default": "-",
          "description": "A callback function, will be executed when file link or preview icon is clicked",
          "descriptionZh": "点击文件链接或预览图标时的回调"
        },
        {
          "name": "onRemove",
          "type": "function(file): boolean | Promise",
          "default": "-",
          "description": "A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or reject",
          "since": "-",
          "descriptionZh": "点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除"
        },
        {
          "name": "onDownload",
          "type": "function(file): void",
          "default": "(Jump to new TAB)",
          "description": "Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB",
          "descriptionZh": "点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页"
        },
        {
          "name": "transformFile",
          "type": "Function(file): string | Blob | File | Promise<string | Blob | File>",
          "default": "-",
          "description": "Customize transform file before request",
          "since": "File \\",
          "descriptionZh": "在上传之前转换文件。支持返回一个 Promise 对象"
        },
        {
          "name": "iconRender",
          "type": "(file: UploadFile, listType?: UploadListType) => React.ReactNode",
          "default": "-",
          "description": "Custom show icon",
          "descriptionZh": "自定义显示 icon"
        },
        {
          "name": "progress",
          "type": "[ProgressProps](/components/progress/#API) (support `type=\"line\"` only)",
          "default": "{ strokeWidth: 2, showInfo: false }",
          "description": "Custom progress bar",
          "since": "4.3.0",
          "descriptionZh": "自定义进度条样式"
        }
      ],
      "tokens": [
        {
          "name": "actionsColor",
          "type": "string",
          "default": "",
          "description": "Action button color",
          "descriptionZh": "操作按扭颜色"
        },
        {
          "name": "pictureCardSize",
          "type": "number",
          "default": "",
          "description": "Size of list items in card type (affects both picture-card and picture-circle)",
          "descriptionZh": "卡片类型文件列表项的尺寸（对 picture-card 和 picture-circle 生效）"
        }
      ],
      "faq": [
        {
          "question": "How to implement upload server side?",
          "answer": "- You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side) about how to implement server side upload interface.\n- There is a mock example of in rc-upload."
        },
        {
          "question": "I want to display download links.",
          "answer": "Please set property `url` of each item in `fileList` to control content of link."
        },
        {
          "question": "How to use `customRequest`?",
          "answer": "See <https://github.com/react-component/upload#customrequest>."
        }
      ],
      "categoryZh": "数据录入",
      "nameZh": "上传",
      "since": "4.0.0",
      "doc": "\nUpload file by selecting or dragging.\n\n## When To Use\n\nUploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.\n\n- When you need to upload one or more files.\n- When you need to show the process of uploading.\n- When you need to upload files by dragging and dropping.\n\n## API\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |\n| action | Uploading URL | string \\| (file) => Promise | - | |\n| method | The http method of upload request | string | `post` | |\n| directory | Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | |\n| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported in IE9** | (file, fileList) => boolean \\| Promise | - | |\n| customRequest | Override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | function | - | |\n| data | Uploading extra params or function which can return uploading extra params | object \\| (file) => object \\| Promise&lt;object> | - | |\n| defaultFileList | Default list of files that have been uploaded | object\\[] | - | |\n| disabled | Disable upload button | boolean | false | |\n| fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | object\\[] | - | |\n| headers | Set request headers, valid above IE10 | object | - | |\n| listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | `text` | |\n| multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false | |\n| name | The name of uploading file | string | `file` | |\n| previewFile | Customize preview file logic | (file: File \\| Blob) => Promise&lt;dataURL: string> | - | |\n| isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | [(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | |\n| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \\| { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true | |\n| withCredentials | The ajax upload with cookie sent | boolean | false | |\n| openFileDialogOnClick | Click open file dialog | boolean | true | |\n| onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onChange) | function | - | |\n| onPreview | A callback function, will be executed when file link or preview icon is clicked | function(file) | - | |\n| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or reject | function(file): boolean \\| Promise | - | |\n| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) | |\n| transformFile   | Customize transform file before request | Function(file): string \\| Blob \\| File \\| Promise&lt;string \\| Blob \\| File> | - | |\n| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => React.ReactNode | - | |\n| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type=\"line\"` only) | { strokeWidth: 2, showInfo: false } | 4.3.0 |\n\n### onChange\n\n> The function will be called when uploading is in progress, completed or failed.\n\nWhen uploading state change, it returns:\n\n```js\n{\n file: { /*... */ },\n fileList: [ /*... */ ],\n event: { /*... */ },\n}\n```\n\n1. `file` File object for the current operation.\n\n ```js\n {\n uid: 'uid', // unique identifier, negative is recommend, to prevent interference with internal generated id\n name: 'xx.png', // file name\n status: 'done', // options：uploading, done, error, removed. Intercepted file by beforeUpload don't have status field.\n response: '{\"status\": \"success\"}', // response from server\n linkProps: '{\"download\": \"image\"}', // additional html props of file link\n xhr: 'XMLHttpRequest{... }', // XMLHttpRequest Header\n }\n ```\n\n2. `fileList` current list of files\n3. `event` response from server, including uploading progress, supported by advanced browsers.\n\n## FAQ\n\n### How to implement upload server side?\n\n- You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side) about how to implement server side upload interface.\n- There is a mock example of in rc-upload.\n\n### I want to display download links.\n\nPlease set property `url` of each item in `fileList` to control content of link.\n\n### How to use `customRequest`?\n\nSee <https://github.com/react-component/upload#customrequest>.\n",
      "docZh": "\n文件选择上传和拖拽上传控件。\n\n## 何时使用\n\n上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。\n\n- 当需要上传一个或一些文件时。\n- 当需要展现上传的进度时。\n- 当需要使用拖拽交互时。\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |\n| action | 上传的地址 | string \\| (file) => Promise | - | |\n| method | 上传请求的 http method | string | `post` | |\n| directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false | |\n| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）。**注意：IE9 不支持该方法** | (file, fileList) => boolean \\| Promise | - | |\n| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | function | - | |\n| data | 上传所需额外参数或返回上传额外参数的方法 | object\\|(file) => object \\| Promise&lt;object> | - | |\n| defaultFileList | 默认已经上传的文件列表 | object\\[] | - | |\n| disabled | 是否禁用 | boolean | false | |\n| fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object\\[] | - | |\n| headers | 设置上传的请求头部，IE10 以上有效 | object | - | |\n| listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | `text` | |\n| multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false | |\n| name | 发到后台的文件参数名 | string | `file` | |\n| previewFile | 自定义文件预览逻辑 | (file: File \\| Blob) => Promise<dataURL: string> | - | |\n| isImageUrl | 自定义缩略图是否使用 &lt;img /> 标签进行显示 | (file: UploadFile) => boolean | [(内部实现)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | |\n| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \\| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true | |\n| withCredentials | 上传请求时是否携带 cookie | boolean | false | |\n| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |\n| onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | function | - | |\n| onPreview | 点击文件链接或预览图标时的回调 | function(file) | - | |\n| onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除               | function(file): boolean \\| Promise | -   | |\n| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) | |\n| transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | function(file): string \\| Blob \\| File \\| Promise&lt;string \\| Blob \\| File> | -   | |\n| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => React.ReactNode | - | |\n| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#API)（仅支持 `type=\"line\"`） | { strokeWidth: 2, showInfo: false } | 4.3.0 |\n\n### onChange\n\n> 上传中、完成、失败都会调用这个函数。\n\n文件状态改变的回调，返回为：\n\n```js\n{\n file: { /*... */ },\n fileList: [ /*... */ ],\n event: { /*... */ },\n}\n```\n\n1. `file` 当前操作的文件对象。\n\n ```js\n {\n uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突\n name: 'xx.png' // 文件名\n status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性\n response: '{\"status\": \"success\"}', // 服务端响应内容\n linkProps: '{\"download\": \"image\"}', // 下载链接额外的 HTML 属性\n }\n ```\n\n2. `fileList` 当前的文件列表。\n3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。\n\n## FAQ\n\n### 服务端如何实现？\n\n- 服务端上传接口实现可以参考 [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side)。\n- 如果要做本地 mock 可以参考这个 [express 的例子](https://github.com/react-component/upload/blob/master/server.js)。\n\n### 如何显示下载链接？\n\n请使用 fileList 属性设置数组项的 url 属性进行展示控制。\n\n### `customRequest` 怎么使用？\n\n请参考 <https://github.com/react-component/upload#customrequest>。\n"
    }
  ],
  "globalTokens": [
    {
      "type": "number",
      "default": "",
      "description": "Border radius of base components",
      "descriptionZh": "基础组件的圆角大小，例如按钮、输入框、卡片等"
    },
    {
      "type": "string",
      "default": "",
      "description": "Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!",
      "descriptionZh": "用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！"
    },
    {
      "type": "string",
      "default": "",
      "description": "Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.",
      "descriptionZh": "用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.",
      "descriptionZh": "用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the color of hyperlink.",
      "descriptionZh": "控制超链接的颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.",
      "descriptionZh": "品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义"
    },
    {
      "type": "string",
      "default": "",
      "description": "Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.",
      "descriptionZh": "用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!",
      "descriptionZh": "用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！"
    },
    {
      "type": "string",
      "default": "",
      "description": "Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.",
      "descriptionZh": "用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。"
    },
    {
      "type": "number",
      "default": "",
      "description": "The height of the basic controls such as buttons and input boxes in Ant Design",
      "descriptionZh": "Ant Design 中按钮和输入框等基础控件的高度"
    },
    {
      "type": "string",
      "default": "",
      "description": "The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.",
      "descriptionZh": "Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Code font, used for code, pre and kbd elements in Typography",
      "descriptionZh": "代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素"
    },
    {
      "type": "number",
      "default": "",
      "description": "The most widely used font size in the design system, from which the text gradient will be derived.",
      "descriptionZh": "设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Border style of base components",
      "descriptionZh": "用于控制组件边框、分割线等的样式，默认是实线"
    },
    {
      "type": "number",
      "default": "",
      "description": "Border width of base components",
      "descriptionZh": "用于控制组件边框、分割线等的宽度"
    },
    {
      "type": "boolean",
      "default": "",
      "description": "Used to configure the motion effect, when it is `false`, the motion is turned off",
      "descriptionZh": "用于配置动画效果，为 `false` 时则关闭动画"
    },
    {
      "type": "number",
      "default": "",
      "description": "Animation Base Duration.",
      "descriptionZh": "动画基础时长。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Preset motion curve.",
      "descriptionZh": "预设动效曲率"
    },
    {
      "type": "string",
      "default": "",
      "description": "Preset motion curve.",
      "descriptionZh": "预设动效曲率"
    },
    {
      "type": "string",
      "default": "",
      "description": "Preset motion curve.",
      "descriptionZh": "预设动效曲率"
    },
    {
      "type": "string",
      "default": "",
      "description": "Preset motion curve.",
      "descriptionZh": "预设动效曲率"
    },
    {
      "type": "string",
      "default": "",
      "description": "Preset motion curve.",
      "descriptionZh": "预设动效曲率"
    },
    {
      "type": "string",
      "default": "",
      "description": "Preset motion curve.",
      "descriptionZh": "预设动效曲率"
    },
    {
      "type": "string",
      "default": "",
      "description": "Preset motion curve.",
      "descriptionZh": "预设动效曲率"
    },
    {
      "type": "string",
      "default": "",
      "description": "Preset motion curve.",
      "descriptionZh": "预设动效曲率"
    },
    {
      "type": "number",
      "default": "",
      "description": "The unit of animation duration change",
      "descriptionZh": "用于控制动画时长的变化单位"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control image opacity",
      "descriptionZh": "控制图片不透明度"
    },
    {
      "type": "number",
      "default": "",
      "description": "The size of the component arrow",
      "descriptionZh": "组件箭头的尺寸"
    },
    {
      "type": "number",
      "default": "",
      "description": "The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2",
      "descriptionZh": "用于控制组件尺寸的基础步长，尺寸步长结合尺寸变化单位，就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式，例如 V5 紧凑模式下的尺寸步长为 2"
    },
    {
      "type": "number",
      "default": "",
      "description": "The unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size step",
      "descriptionZh": "用于控制组件尺寸的变化单位，在 Ant Design 中我们的基础单位为 4 ，便于更加细致地控制尺寸梯度"
    },
    {
      "type": "boolean",
      "default": "",
      "description": "Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item",
      "descriptionZh": "用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项"
    },
    {
      "type": "number",
      "default": "",
      "description": "The base Z axis value of all components, which can be used to control the level of some floating components based on the Z axis value, such as BackTop, Affix, etc.",
      "descriptionZh": "所有组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 BackTop、 Affix 等"
    },
    {
      "type": "number",
      "default": "",
      "description": "Base zIndex of component like FloatButton, Affix which can be cover by large popup",
      "descriptionZh": "浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset blue color",
      "descriptionZh": "预设blue颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset purple color",
      "descriptionZh": "预设purple颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset cyan color",
      "descriptionZh": "预设cyan颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset green color",
      "descriptionZh": "预设green颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset magenta color",
      "descriptionZh": "预设magenta颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset pink color",
      "descriptionZh": "预设pink颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset red color",
      "descriptionZh": "预设red颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset orange color",
      "descriptionZh": "预设orange颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset yellow color",
      "descriptionZh": "预设yellow颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset volcano color",
      "descriptionZh": "预设volcano颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset geekblue color",
      "descriptionZh": "预设geekblue颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset lime color",
      "descriptionZh": "预设lime颜色"
    },
    {
      "type": "color",
      "default": "",
      "description": "Preset gold color",
      "descriptionZh": "预设gold颜色"
    },
    {
      "type": "number",
      "default": "",
      "description": "LG size border radius, used in some large border radius components, such as Card, Modal and other components.",
      "descriptionZh": "LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Outer border radius",
      "descriptionZh": "外部圆角"
    },
    {
      "type": "number",
      "default": "",
      "description": "SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size",
      "descriptionZh": "SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角"
    },
    {
      "type": "number",
      "default": "",
      "description": "XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius.",
      "descriptionZh": "XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of frosted glass container, usually transparent.",
      "descriptionZh": "控制毛玻璃容器的背景色，通常为透明色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.",
      "descriptionZh": "组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc.",
      "descriptionZh": "浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。"
    },
    {
      "type": "string",
      "default": "",
      "description": "This color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong.",
      "descriptionZh": "该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的"
    },
    {
      "type": "string",
      "default": "",
      "description": "The background color of the mask, used to cover the content below the mask, Modal, Drawer, Image and other components use this token",
      "descriptionZh": "浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer、Image 等组件的蒙层使用的是该 token"
    },
    {
      "type": "string",
      "default": "",
      "description": "Solid background color, currently only used for the default solid button background color.",
      "descriptionZh": "实心的背景颜色，目前只用在默认实心按钮背景色上。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Solid background color active state, currently only used in the active effect of the default solid button.",
      "descriptionZh": "实心的背景颜色激活态，目前只用在默认实心按钮的 active 效果。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Solid background color hover state, currently only used in the hover effect of the default solid button.",
      "descriptionZh": "实心的背景颜色悬浮态，目前只用在默认实心按钮的 hover 效果。"
    },
    {
      "type": "string",
      "default": "",
      "description": "This color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip.",
      "descriptionZh": "该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Default border color, used to separate different elements, such as: form separator, card separator, etc.",
      "descriptionZh": "默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the border color of the element in the disabled state.",
      "descriptionZh": "控制元素在禁用状态下的边框颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used.",
      "descriptionZh": "比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The active state of the error color.",
      "descriptionZh": "错误色的深色激活态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The background color of the error state.",
      "descriptionZh": "错误色的浅色背景颜色"
    },
    {
      "type": "string",
      "default": "",
      "description": "The active state background color of the error state.",
      "descriptionZh": "错误色的浅色背景色激活态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The wrong color fills the background color of the suspension state, which is currently only used in the hover effect of the dangerous filled button.",
      "descriptionZh": "错误色的浅色填充背景色悬浮态，目前只用在危险填充按钮的 hover 效果。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state background color of the error state.",
      "descriptionZh": "错误色的浅色背景色悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The border color of the error state.",
      "descriptionZh": "错误色的描边色"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state border color of the error state.",
      "descriptionZh": "错误色的描边色悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state of the error color.",
      "descriptionZh": "错误色的深色悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The default state of the text in the error color.",
      "descriptionZh": "错误色的文本默认态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The active state of the text in the error color.",
      "descriptionZh": "错误色的文本激活态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state of the text in the error color.",
      "descriptionZh": "错误色的文本悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider.",
      "descriptionZh": "最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc.",
      "descriptionZh": "最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc.",
      "descriptionZh": "二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.",
      "descriptionZh": "三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Active state of dark color of information color.",
      "descriptionZh": "信息色的深色激活态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Light background color of information color.",
      "descriptionZh": "信息色的浅色背景颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state of light background color of information color.",
      "descriptionZh": "信息色的浅色背景色悬浮态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Border color of information color.",
      "descriptionZh": "信息色的描边色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state of border color of information color.",
      "descriptionZh": "信息色的描边色悬浮态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state of dark color of information color.",
      "descriptionZh": "信息色的深色悬浮态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Default state of text color of information color.",
      "descriptionZh": "信息色的文本默认态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Active state of text color of information color.",
      "descriptionZh": "信息色的文本激活态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state of text color of information color.",
      "descriptionZh": "信息色的文本悬浮态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the color of hyperlink when clicked.",
      "descriptionZh": "控制超链接被点击时的颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the color of hyperlink when hovering.",
      "descriptionZh": "控制超链接悬浮时的颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Dark active state under the main color gradient.",
      "descriptionZh": "主色梯度下的深色激活态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Light background color of primary color, usually used for weak visual level selection state.",
      "descriptionZh": "主色浅色背景颜色，一般用于视觉层级较弱的选中状态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state color corresponding to the light background color of the primary color.",
      "descriptionZh": "与主色浅色背景颜色相对应的悬浮态颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The stroke color under the main color gradient, used on the stroke of components such as Slider.",
      "descriptionZh": "主色梯度下的描边用色，用在 Slider 等组件的描边上。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button.",
      "descriptionZh": "主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state under the main color gradient.",
      "descriptionZh": "主色梯度下的悬浮态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Text color under the main color gradient.",
      "descriptionZh": "主色梯度下的文本颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Active state of text color under the main color gradient.",
      "descriptionZh": "主色梯度下的文本激活态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state of text color under the main color gradient.",
      "descriptionZh": "主色梯度下的文本悬浮态。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Active state color of dark success color",
      "descriptionZh": "成功色的深色激活态"
    },
    {
      "type": "string",
      "default": "",
      "description": "Light background color of success color, used for Tag and Alert success state background color",
      "descriptionZh": "成功色的浅色背景颜色，用于 Tag 和 Alert 的成功态背景色"
    },
    {
      "type": "string",
      "default": "",
      "description": "Light background color of success color, but antd does not use this token currently",
      "descriptionZh": "成功色浅色背景颜色，一般用于视觉层级较弱的选中状态，不过 antd 目前没有使用到该 token"
    },
    {
      "type": "string",
      "default": "",
      "description": "Border color of success color, used for Tag and Alert success state border color",
      "descriptionZh": "成功色的描边色，用于 Tag 和 Alert 的成功态描边色"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state color of success color border",
      "descriptionZh": "成功色的描边色悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state color of dark success color",
      "descriptionZh": "成功色的深色悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "Default state color of success color text",
      "descriptionZh": "成功色的文本默认态"
    },
    {
      "type": "string",
      "default": "",
      "description": "Active state color of success color text",
      "descriptionZh": "成功色的文本激活态"
    },
    {
      "type": "string",
      "default": "",
      "description": "Hover state color of success color text",
      "descriptionZh": "成功色的文本悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "Default text color which comply with W3C standards, and this color is also the darkest neutral color.",
      "descriptionZh": "最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.",
      "descriptionZh": "第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.",
      "descriptionZh": "作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc.",
      "descriptionZh": "第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。"
    },
    {
      "type": "string",
      "default": "",
      "description": "The active state of the warning color.",
      "descriptionZh": "警戒色的深色激活态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The background color of the warning state.",
      "descriptionZh": "警戒色的浅色背景颜色"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state background color of the warning state.",
      "descriptionZh": "警戒色的浅色背景色悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The border color of the warning state.",
      "descriptionZh": "警戒色的描边色"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state border color of the warning state.",
      "descriptionZh": "警戒色的描边色悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state of the warning color.",
      "descriptionZh": "警戒色的深色悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The default state of the text in the warning color.",
      "descriptionZh": "警戒色的文本默认态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The active state of the text in the warning color.",
      "descriptionZh": "警戒色的文本激活态"
    },
    {
      "type": "string",
      "default": "",
      "description": "The hover state of the text in the warning color.",
      "descriptionZh": "警戒色的文本悬浮态"
    },
    {
      "type": "string",
      "default": "",
      "description": "Pure white color don't changed by theme",
      "descriptionZh": "不随主题变化的纯白色"
    },
    {
      "type": "number",
      "default": "",
      "description": "LG component height",
      "descriptionZh": "较高的组件高度"
    },
    {
      "type": "number",
      "default": "",
      "description": "SM component height",
      "descriptionZh": "较小的组件高度"
    },
    {
      "type": "number",
      "default": "",
      "description": "XS component height",
      "descriptionZh": "更小的组件高度"
    },
    {
      "type": "number",
      "default": "",
      "description": "Font size of h1 tag.",
      "descriptionZh": "H1 标签所使用的字号"
    },
    {
      "type": "number",
      "default": "",
      "description": "Font size of h2 tag.",
      "descriptionZh": "h2 标签所使用的字号"
    },
    {
      "type": "number",
      "default": "",
      "description": "Font size of h3 tag.",
      "descriptionZh": "h3 标签使用的字号"
    },
    {
      "type": "number",
      "default": "",
      "description": "Font size of h4 tag.",
      "descriptionZh": "h4 标签使用的字号"
    },
    {
      "type": "number",
      "default": "",
      "description": "Font size of h5 tag.",
      "descriptionZh": "h5 标签使用的字号"
    },
    {
      "type": "number",
      "default": "",
      "description": "Large font size",
      "descriptionZh": "大号字体大小"
    },
    {
      "type": "number",
      "default": "",
      "description": "Small font size",
      "descriptionZh": "小号字体大小"
    },
    {
      "type": "number",
      "default": "",
      "description": "Super large font size",
      "descriptionZh": "超大号字体大小"
    },
    {
      "type": "number",
      "default": "",
      "description": "Line height of text.",
      "descriptionZh": "文本行高"
    },
    {
      "type": "number",
      "default": "",
      "description": "Line height of h1 tag.",
      "descriptionZh": "H1 标签所使用的行高"
    },
    {
      "type": "number",
      "default": "",
      "description": "Line height of h2 tag.",
      "descriptionZh": "h2 标签所使用的行高"
    },
    {
      "type": "number",
      "default": "",
      "description": "Line height of h3 tag.",
      "descriptionZh": "h3 标签所使用的行高"
    },
    {
      "type": "number",
      "default": "",
      "description": "Line height of h4 tag.",
      "descriptionZh": "h4 标签所使用的行高"
    },
    {
      "type": "number",
      "default": "",
      "description": "Line height of h5 tag.",
      "descriptionZh": "h5 标签所使用的行高"
    },
    {
      "type": "number",
      "default": "",
      "description": "Line height of large text.",
      "descriptionZh": "大型文本行高"
    },
    {
      "type": "number",
      "default": "",
      "description": "Line height of small text.",
      "descriptionZh": "小型文本行高"
    },
    {
      "type": "number",
      "default": "",
      "description": "The default line width of the outline class components, such as Button, Input, Select, etc.",
      "descriptionZh": "描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Motion speed, fast speed. Used for small element animation interaction.",
      "descriptionZh": "动效播放速度，快速。用于小型元素动画交互"
    },
    {
      "type": "string",
      "default": "",
      "description": "Motion speed, medium speed. Used for medium element animation interaction.",
      "descriptionZh": "动效播放速度，中速。用于中型元素动画交互"
    },
    {
      "type": "string",
      "default": "",
      "description": "Motion speed, slow speed. Used for large element animation interaction.",
      "descriptionZh": "动效播放速度，慢速。用于大型元素如面板动画交互"
    },
    {
      "type": "number",
      "default": "",
      "description": "Medium size",
      "descriptionZh": "中等尺寸"
    },
    {
      "type": "number",
      "default": "",
      "description": "Large size",
      "descriptionZh": "大尺寸"
    },
    {
      "type": "number",
      "default": "",
      "description": "Medium-large size",
      "descriptionZh": "中大尺寸"
    },
    {
      "type": "number",
      "default": "",
      "description": "Same as `size`, but could be larger in compact mode",
      "descriptionZh": "与size大小相同，但在紧凑模式下可能更大"
    },
    {
      "type": "number",
      "default": "",
      "description": "Medium-small size",
      "descriptionZh": "中小尺寸"
    },
    {
      "type": "number",
      "default": "",
      "description": "Extra-large size",
      "descriptionZh": "超大尺寸"
    },
    {
      "type": "number",
      "default": "",
      "description": "Small size",
      "descriptionZh": "小尺寸"
    },
    {
      "type": "number",
      "default": "",
      "description": "Largest size",
      "descriptionZh": "最大尺寸"
    },
    {
      "type": "number",
      "default": "",
      "description": "Smallest size",
      "descriptionZh": "最小尺寸"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the box shadow style of an element.",
      "descriptionZh": "控制元素阴影样式。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the secondary box shadow style of an element.",
      "descriptionZh": "控制元素二级阴影样式。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the tertiary box shadow style of an element.",
      "descriptionZh": "控制元素三级盒子阴影样式。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of container in disabled state.",
      "descriptionZh": "控制容器在禁用状态下的背景色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of text in active state.",
      "descriptionZh": "控制文本在激活状态下的背景色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of text in hover state.",
      "descriptionZh": "控制文本在悬停状态下的背景色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the color of background border of element.",
      "descriptionZh": "控制元素背景边框的颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the outline color of input component in error state.",
      "descriptionZh": "控制输入组件错误状态下的外轮廓线颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the alternative background color of element.",
      "descriptionZh": "控制元素替代背景色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of content area.",
      "descriptionZh": "控制内容区域的背景色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the style of background color of content area when mouse hovers over it.",
      "descriptionZh": "控制内容区域背景色在鼠标悬停时的样式。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the color of page element when highlighted.",
      "descriptionZh": "控制页面元素高亮时的颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Weak action. Such as `allowClear` or Alert close button",
      "descriptionZh": "控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。\n *"
    },
    {
      "type": "string",
      "default": "",
      "description": "Weak action hover color. Such as `allowClear` or Alert close button",
      "descriptionZh": "控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.",
      "descriptionZh": "用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the font color of text description.",
      "descriptionZh": "控制文本描述字体颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the color of text in disabled state.",
      "descriptionZh": "控制禁用状态下的字体颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the font color of heading.",
      "descriptionZh": "控制标题字体颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the font color of text label.",
      "descriptionZh": "控制文本标签字体颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the highlight color of text with background color, such as the text in Primary Button components.",
      "descriptionZh": "控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the color of placeholder text.",
      "descriptionZh": "控制占位文本的颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the outline color of input component in warning state.",
      "descriptionZh": "控制输入组件警告状态下的外轮廓线颜色。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the interactive size of control component.",
      "descriptionZh": "控制组件的交互大小。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of control component item when active.",
      "descriptionZh": "控制组件项在激活状态下的背景颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of control component item when active and disabled.",
      "descriptionZh": "控制组件项在禁用状态下的激活背景颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of control component item when hovering and active.",
      "descriptionZh": "控制组件项在鼠标悬浮且激活状态下的背景颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the background color of control component item when hovering.",
      "descriptionZh": "控制组件项在鼠标悬浮时的背景颜色。"
    },
    {
      "type": "string",
      "default": "",
      "description": "Control the outline color of input component.",
      "descriptionZh": "控制输入组件的外轮廓线颜色。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the outline width of input component.",
      "descriptionZh": "控制输入组件的外轮廓线宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the horizontal padding of an element.",
      "descriptionZh": "控制元素水平内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the horizontal padding of an element with a small-medium size.",
      "descriptionZh": "控制元素中小尺寸水平内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.",
      "descriptionZh": "控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the font weight of heading components (such as h1, h2, h3) or selected item.",
      "descriptionZh": "控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the width of the line when the component is in focus state.",
      "descriptionZh": "控制线条的宽度，当组件处于聚焦态时。"
    },
    {
      "type": "TextDecoration<string | number> | undefined",
      "default": "",
      "description": "Control the text decoration style of a link.",
      "descriptionZh": "控制链接文本的装饰样式。"
    },
    {
      "type": "TextDecoration<string | number> | undefined",
      "default": "",
      "description": "Control the text decoration style of a link on focus.",
      "descriptionZh": "控制链接聚焦时文本的装饰样式。"
    },
    {
      "type": "TextDecoration<string | number> | undefined",
      "default": "",
      "description": "Control the text decoration style of a link on mouse hover.",
      "descriptionZh": "控制链接鼠标悬浮时文本的装饰样式。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the margin of an element, with a medium size.",
      "descriptionZh": "控制元素外边距，中等尺寸。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the margin of an element, with a large size.",
      "descriptionZh": "控制元素外边距，大尺寸。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the margin of an element, with a medium-large size.",
      "descriptionZh": "控制元素外边距，中大尺寸。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the margin of an element, with a medium-small size.",
      "descriptionZh": "控制元素外边距，中小尺寸。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the margin of an element, with an extra-large size.",
      "descriptionZh": "控制元素外边距，超大尺寸。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the margin of an element, with a small size.",
      "descriptionZh": "控制元素外边距，小尺寸。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the margin of an element, with the largest size.",
      "descriptionZh": "控制元素外边距，最大尺寸。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the margin of an element, with the smallest size.",
      "descriptionZh": "控制元素外边距，最小尺寸。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the opacity of the loading state.",
      "descriptionZh": "控制加载状态的透明度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the padding of the element.",
      "descriptionZh": "控制元素的内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the horizontal padding of content element.",
      "descriptionZh": "控制内容元素水平内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the horizontal padding of content element, suitable for large screen devices.",
      "descriptionZh": "控制内容元素水平内间距，适用于大屏幕设备。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the horizontal padding of content element, suitable for small screen devices.",
      "descriptionZh": "控制内容元素水平内间距，适用于小屏幕设备。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the vertical padding of content element.",
      "descriptionZh": "控制内容元素垂直内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the vertical padding of content element, suitable for large screen devices.",
      "descriptionZh": "控制内容元素垂直内间距，适用于大屏幕设备。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the vertical padding of content element, suitable for small screen devices.",
      "descriptionZh": "控制内容元素垂直内间距，适用于小屏幕设备。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the large padding of the element.",
      "descriptionZh": "控制元素的大内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the medium padding of the element.",
      "descriptionZh": "控制元素的中等内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the small padding of the element.",
      "descriptionZh": "控制元素的小内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the extra large padding of the element.",
      "descriptionZh": "控制元素的特大内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the extra small padding of the element.",
      "descriptionZh": "控制元素的特小内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the extra extra small padding of the element.",
      "descriptionZh": "控制元素的极小内间距。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the screen width of large screens.",
      "descriptionZh": "控制大屏幕的屏幕宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the maximum width of large screens.",
      "descriptionZh": "控制大屏幕的最大宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the minimum width of large screens.",
      "descriptionZh": "控制大屏幕的最小宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the screen width of medium screens.",
      "descriptionZh": "控制中等屏幕的屏幕宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the maximum width of medium screens.",
      "descriptionZh": "控制中等屏幕的最大宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the minimum width of medium screens.",
      "descriptionZh": "控制中等屏幕的最小宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the screen width of small screens.",
      "descriptionZh": "控制小屏幕的屏幕宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the maximum width of small screens.",
      "descriptionZh": "控制小屏幕的最大宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the minimum width of small screens.",
      "descriptionZh": "控制小屏幕的最小宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the screen width of extra large screens.",
      "descriptionZh": "控制超大屏幕的屏幕宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the maximum width of extra large screens.",
      "descriptionZh": "控制超大屏幕的最大宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the minimum width of extra large screens.",
      "descriptionZh": "控制超大屏幕的最小宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the screen width of extra small screens.",
      "descriptionZh": "控制超小屏幕的屏幕宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the maximum width of extra small screens.",
      "descriptionZh": "控制超小屏幕的最大宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the minimum width of extra small screens.",
      "descriptionZh": "控制超小屏幕的最小宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the screen width of extra extra large screens.",
      "descriptionZh": "控制超超大屏幕的屏幕宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the maximum width of extra extra large screens.",
      "descriptionZh": "控制超超大屏幕的最大宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the minimum width of extra extra large screens.",
      "descriptionZh": "控制超超大屏幕的最小宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the screen width of XXXL screens.",
      "descriptionZh": "控制超超超大屏幕的屏幕宽度。"
    },
    {
      "type": "number",
      "default": "",
      "description": "Control the minimum width of XXXL screens.",
      "descriptionZh": "控制超超超大屏幕的最小宽度。"
    }
  ],
  "changelog": [
    {
      "version": "4.6.6",
      "date": "2020-09-27",
      "changes": [
        {
          "component": "Steps",
          "type": "fix",
          "description": "🐞 Fix Steps first item shifts in small screen."
        },
        {
          "component": "Divider",
          "type": "style",
          "description": "💄 Fix Divider border style not work when text is provided."
        },
        {
          "component": "Radio.Button",
          "type": "fix",
          "description": "🐞 Fix Radio.Button validation error highlight. "
        },
        {
          "component": "Typography",
          "type": "style",
          "description": "💄 Fix Typography link-decoration style. "
        },
        {
          "component": "Locale",
          "type": "other",
          "description": "- 🌐 Add Thai locale support. "
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Fix message.destroy parameter type. "
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Optimize Slider type definition."
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Form properly export `FormListProps` type. "
        }
      ]
    },
    {
      "version": "4.6.5",
      "date": "2020-09-20",
      "changes": [
        {
          "component": "Descriptions",
          "type": "style",
          "description": "💄 Fix Descriptions item long text ellipsis issue."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Menu unexpected scrollbar when show and hide."
        },
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Fix `-sider-background` cannot set to linear gradient color."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Select compositing status lost when input first letter in Chinese."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Table `-sticky-zindex` less compile error issue. "
        },
        {
          "component": "Button",
          "type": "style",
          "description": "- 💄 Fix Button align issue when has icon only."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 Fix Button warning `Invalid value for prop navigate` when using with react-router. "
        },
        {
          "component": "Button",
          "type": "style",
          "description": "💄 Fix TimePicker column align issue, add `-time-panel-column-width` and `-time-panel-column-height` less variables."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix AutoComplete warning when using `placeholder` and `allowClear`."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Space show items when it's render empty dom. "
        },
        {
          "component": "Button",
          "type": "feature",
          "description": "🛠 Dedupe `rc-trigger` version to reduce package size."
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Cascader add `name` and `id` props definition. "
        }
      ]
    },
    {
      "version": "4.6.4",
      "date": "2020-09-13",
      "changes": [
        {
          "component": "General",
          "type": "style",
          "description": "💄 style: Card card image has extra 1px border."
        },
        {
          "component": "Select",
          "type": "style",
          "description": "💄 Fix Select `placeholder` color not same as Input. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Menu not support React.Fragment inside."
        },
        {
          "component": "TextArea",
          "type": "fix",
          "description": "🐞 Fix TextArea different behavior with Input when set `value` to `undefined`."
        },
        {
          "component": "Motion",
          "type": "fix",
          "description": "🐞 Fix Motion related issue like Upload align flash and Form.Item with `help` ssr issue."
        },
        {
          "component": "Typography.Link",
          "type": "fix",
          "description": "🐞 Fix Typography.Link warning `Invalid value for prop navigate` when using with react-router."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Table pagination missing when is above table."
        },
        {
          "component": "Upload",
          "type": "fix",
          "description": "🐞 Fix Upload in control miss file when upload multiple file in same time."
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Fix Table that sorter `compare` and `multiple` should be optional."
        }
      ]
    },
    {
      "version": "4.6.3",
      "date": "2020-09-06",
      "changes": [
        {
          "component": "Table",
          "type": "style",
          "description": "- 💄 Fix Table nested table styles affects all sub-level tables. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix elements above Table was not clickable elements which has `float: right;` style."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Modal closing cause scroll position jump up."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix the type declaration of onError in `customRequest` options of Upload. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Shutdown Select/TreeSelect autocomplete list in Chrome."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Cascader value overwritten when filtering. [-yoo](https://github.com/lich-yoo)"
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Modal jump out of screen in some situations. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Radio.Group not working properly, when is used in legacy Form. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Pagination align issue in windows."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Form with `help` make ssr un-sync issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Avatar doesn't scale fallback text well when display is none. "
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Col Add `flex` type to `ColSize` interface. "
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Fix Tooltip/Popover `children` tsd to accept ReactNode."
        }
      ]
    },
    {
      "version": "4.6.2",
      "date": "2020-08-31",
      "changes": [
        {
          "component": "Upload",
          "type": "fix",
          "description": "- 🐞 Fix Upload list status issue when in control mode."
        },
        {
          "component": "Upload",
          "type": "style",
          "description": "- 💄 Fix Upload `picture-card` style unexpected margin in Form.Item."
        },
        {
          "component": "Upload",
          "type": "style",
          "description": "💄 Fix Select focus shadow style. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table Pagination not hide with empty data when show on top position. "
        },
        {
          "component": "Table",
          "type": "style",
          "description": "- 💄 Fix Table expand icon size issue when `-size-base` is `12px`."
        },
        {
          "component": "Space",
          "type": "fix",
          "description": "- 🐞 Fix Space not support React.Fragment issue."
        },
        {
          "component": "Space",
          "type": "fix",
          "description": "- 🐞 Fix Space preserve empty dom node when `children` contains empty node."
        },
        {
          "component": "Space",
          "type": "fix",
          "description": "🐞 Fix Badge not work when `status` or `color` is empty. "
        },
        {
          "component": "Space",
          "type": "style",
          "description": "💄 Fix Tree draggable transition style."
        },
        {
          "component": "Space",
          "type": "fix",
          "description": "🐞 Fix `colorPalette is not defined` when customize theme in some situation."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix TimePicker.RangePicker typescript need `picker` issue."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Upload extended `showUploadList` of Upload with `removeIcon` and `downloadIcon` properties. "
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix the rtl style of Col. "
        }
      ]
    },
    {
      "version": "4.6.1",
      "date": "2020-08-24",
      "changes": [
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Upload type declaration missing `children`."
        }
      ]
    },
    {
      "version": "4.6.0",
      "date": "2020-08-23",
      "changes": [
        {
          "component": "General",
          "type": "style",
          "description": "💄 Darker `-color` for WCAG 2.0 on contrast ratio."
        },
        {
          "component": "Upload",
          "type": "feature",
          "description": "🛠 Refactor Upload via hooks."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Form support style of required mark with `requiredMark` and deprecate `hideRequiredMark` prop."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Form.List support the second `index` param in `add`."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "🆕 VirtualList support no blink jump and fix Select blank dropdown issue."
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "- 🆕 Support Typography.Text `success` type. "
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "- 🆕 Typography `copyable` support hide tooltip and `editable` support config icon and tooltip. "
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "- 🆕 Add Typography.Title level 5."
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "- 🆕 Typography add `maxLength` & `autoSize` with `editable` config "
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix Transfer `filterOption` not trigger when search spaces."
        },
        {
          "component": "Progress",
          "type": "fix",
          "description": "- 🐞 Fix Progress `steps` don't support `trailColor`."
        },
        {
          "component": "Progress",
          "type": "fix",
          "description": "- 🐞 Fix Progress `success.percent` not working when `type=\"circle\"`."
        },
        {
          "component": "Progress",
          "type": "fix",
          "description": "🐞 Fix Textarea don't display `defaultValue` when `value` is `undefined`."
        },
        {
          "component": "Cascader",
          "type": "fix",
          "description": "- 🐞 Fix Cascader options not open with search after ESC pressing. "
        },
        {
          "component": "Cascader",
          "type": "style",
          "description": "- 💄 Optimize Cascader clear animation."
        },
        {
          "component": "Cascader",
          "type": "deprecation",
          "description": "🗑 Remove deprecated `Button.Group` and please use Space component instead."
        },
        {
          "component": "Select",
          "type": "feature",
          "description": "- 🆕 Select support `onClear` prop."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix Select `mode=\"tags\"` showing duplicated items when search."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fixed the style exception that was disabled when Select focused."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix Select icon overlap with selections when `showArrow` enabled. "
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix panel not correct when `picker` changed."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix RangePicker do not close panel when click clear icon."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Pagination font family style. "
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Space children remount in some case."
        },
        {
          "component": "Badge",
          "type": "style",
          "description": "- 💄 Add `-color` less variable."
        },
        {
          "component": "Badge",
          "type": "feature",
          "description": "- 🆕 Badge support `size` prop. "
        },
        {
          "component": "Badge",
          "type": "feature",
          "description": "🆕 Tabs `tabBarExtraSlot` support extra position. "
        },
        {
          "component": "Badge",
          "type": "style",
          "description": "💄 Optimize the display effect of Descriptions when there is more content."
        },
        {
          "component": "Badge",
          "type": "feature",
          "description": "🆕 message could be detroied by `message.desctroy(key)`. "
        },
        {
          "component": "Badge",
          "type": "style",
          "description": "💄 Adjust InputNumber handler bar to be hidden when `readOnly`."
        },
        {
          "component": "Locale",
          "type": "other",
          "description": "- 🌐 Add Galician locale support. "
        },
        {
          "component": "Locale",
          "type": "other",
          "description": "- 🌐 Use `kmr_IQ` to replace `ku_IQ`."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize the connection line style in Tree RTL mode."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Dropdown RTL writing to avoid dark mode style overlays."
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Fix Form.Item `initialValue` missing definition. "
        },
        {
          "component": "TypeScript",
          "type": "other",
          "description": "- 🤖 Form support generic type."
        }
      ]
    },
    {
      "version": "4.5.4",
      "date": "2020-08-12",
      "changes": [
        {
          "component": "Form.Item",
          "type": "fix",
          "description": "🐞 Fix Form.Item `hidden` not working in less."
        },
        {
          "component": "Dropdown",
          "type": "fix",
          "description": "🐞 Fix Dropdown render issue when `overlay` is string."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Table pagination disappear when last record in last page is deleted. "
        },
        {
          "component": "Tree",
          "type": "fix",
          "description": "- 🐞 Fix Tree.DirectoryTree can not use `scrollTo` with ref."
        },
        {
          "component": "Tree",
          "type": "fix",
          "description": "- 🐞 Fix Tree lost line between top level nodes when enable `showLine`. "
        },
        {
          "component": "Tree",
          "type": "style",
          "description": "💄 Add `-color` less variable."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fixed Input.Search border style in RTL mode."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix the style of Input when `addonBefore` in RTL mode."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix multiple style issues for DatePicker in RTL mode."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Slider `handleStyle` and `trackStyle` TypeScript definitions."
        }
      ]
    },
    {
      "version": "4.5.3",
      "date": "2020-08-08",
      "changes": [
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix horizontal Menu dark `theme` style under dark theme."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix the position of the horizontal Menu in dark theme and RTL mode."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table crash when `dataSource` contains number."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table empty filters throw warning."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item `hidden` not work with `noStyle`."
        },
        {
          "component": "Form",
          "type": "style",
          "description": "- 💄 Fix Form.Item margin is uncorrect in compact mode."
        },
        {
          "component": "Transfer",
          "type": "fix",
          "description": "- 🐞 Fix the mouse style of the head dropDown when Transfer is `disabled`."
        },
        {
          "component": "Transfer",
          "type": "fix",
          "description": "- 🐞 Fix the problem that Pagination is not `disabled` when Transfer is `disabled`."
        },
        {
          "component": "Cascader",
          "type": "style",
          "description": "- 💄 Cascader selector down arrow doesn't rotate. "
        },
        {
          "component": "Cascader",
          "type": "fix",
          "description": "- 🐞 Fix Cascader text overflow bug in Firefox."
        },
        {
          "component": "Cascader",
          "type": "fix",
          "description": "- 🐞 Fix the problem that the color of mouse hover border is abnormal when Cascader is `disabled`."
        },
        {
          "component": "Select",
          "type": "style",
          "description": "- 💄 Optimize the `disabled` style of Select multiple mode."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix the mouse style of custom icon when Select is `disabled`."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Breadcrumb.Item lost separator after wrapping in component. "
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix InputNumber dark theme handler background color."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix the missing `key` of Avatar.Group."
        },
        {
          "component": "Select",
          "type": "style",
          "description": "💄 Adjusts Mentions `readOnly` mouse style to native style."
        },
        {
          "component": "Select",
          "type": "style",
          "description": "💄 Add `-line-height`."
        },
        {
          "component": "Select",
          "type": "style",
          "description": "💄 Optimize Pagination style when `simple` type and `disabled`."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Modal `useModal` missing style issue."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Steps RTL style when use `progress`."
        },
        {
          "component": "Select",
          "type": "other",
          "description": "🌐 Improve Arabic locale. "
        },
        {
          "component": "Select",
          "type": "other",
          "description": "🌐 Improve fr_FR localization. "
        }
      ]
    },
    {
      "version": "4.5.2",
      "date": "2020-08-02",
      "changes": [
        {
          "component": "Slider",
          "type": "fix",
          "description": "🐞 Fix Slider tooltip abnormal visibility. "
        },
        {
          "component": "Divider",
          "type": "fix",
          "description": "🐞 Fix Divider color in dark mode."
        },
        {
          "component": "Radio.Button",
          "type": "fix",
          "description": "🐞 Fix Radio.Button text color when `disabled` and `checked`."
        },
        {
          "component": "Carousel",
          "type": "fix",
          "description": "🐞 Fix Carousel children height smaller then parent node issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Table `indentSize` couldn't be zero value. "
        },
        {
          "component": "List",
          "type": "fix",
          "description": "🐞 Fix List `actions` show cursor outside clickable area."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fixed vertical Slider default `tooltipPlacement` in RTL mode."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Tabs RTL style of `card` type."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix nested Table RTL style under dark theme."
        }
      ]
    },
    {
      "version": "4.5.1",
      "date": "2020-07-28",
      "changes": [
        {
          "component": "Badge",
          "type": "fix",
          "description": "🐞 Fix Badge style causing build error."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Menu in `horizontal` `dark` status Menu.Item background style glitch."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Optimize Divider color in none-white background."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Remove multiple Select choice animation of item."
        }
      ]
    },
    {
      "version": "4.5.0",
      "date": "2020-07-28",
      "changes": [
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Input and Input.TextArea support `bordered` prop."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Add `useMessage` hook for Message to support `context` access."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Tree support `titleRender` to customize all nodes' content."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Descriptions add `extra` prop. "
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Add `Modal.config` to set `rootPrefixCls` for Modal statis methods."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Drawer support `push` prop for multi-Drawer linkage. "
        },
        {
          "component": "Badge.Ribbon",
          "type": "feature",
          "description": "🆕 Add Badge.Ribbon component."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Steps support `percent` prop to show step icon progress."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 **Menu.Item's blue indicator line and dropdown width are the same as its content's width in `horizontal` mode.**"
        },
        {
          "component": "Avatar",
          "type": "feature",
          "description": "- 🆕 Add Avatar.Group for showing a set of avatars."
        },
        {
          "component": "Avatar",
          "type": "fix",
          "description": "- 🐞 Fix Avatar not fallback correctly when `src` is invalid."
        },
        {
          "component": "DatePicker",
          "type": "feature",
          "description": "- 🆕 DatePicker support [date-fns](https://date-fns.org/). "
        },
        {
          "component": "DatePicker",
          "type": "feature",
          "description": "- 🆕 Improve DatePicker hovering experience, the placeholder will change to format value of target-date when hovering a date cell. (). [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "DatePicker",
          "type": "feature",
          "description": "- 🆕 RangePicker `onCalendarChange` add `range` param to indicate currently activated pane. [-Wing-Fung](https://github.com/Kim-Wing-Fung)"
        },
        {
          "component": "DatePicker",
          "type": "feature",
          "description": "- 🆕 DatePicker support `panelRender` to customize panel."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix QuarterPicker not working, remove DatePicker.XxxPicker and recommend `picker='xxx'` usage instead."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Form.List support array in `remove` method. "
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Form.Item supports `dependencies` to control updating logic with render props `children`."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Adjust Form.Item validateFist to validate in order. Origin logic use parallel to validate."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item sometime not clean up prev error message."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item not collect `validateStatus` when children Form.Item with `noStyle` has an error."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item setting `labelCol={{ offset: number }}` doesn't work if layout is vertical. "
        },
        {
          "component": "Form",
          "type": "other",
          "description": "- ⌨️ Form add `role=\"alert\"` attribute on validation message node to import accessibility. "
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "- 🐞 Fix Calendar `validRange` prevents `disabledDate`. "
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "- 🐞 Fix Calendar `validRange` not working on month selection dropdown. "
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "🐞 Fix Table `indeterminate` returned by `getCheckboxProps` not working."
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "🐞 Fix Select clear icon position in Form.Item."
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "🐞 Fix Pagination mouse style of the page turning button."
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "🐞 Fix TreeSelect `treeNodeLabelProp` affect tree node render result."
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "🐞 Fix Carousel `findDOMNode` warning in strict mode."
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "🐞 Fix Radio causing SSR build errors with `webpack.44.0`. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Calendar",
          "type": "fix",
          "description": "🐞 Fix Tabs focus & active state color when disabled. "
        },
        {
          "component": "Calendar",
          "type": "style",
          "description": "💄 Card action pane color is unified with body color."
        },
        {
          "component": "Calendar",
          "type": "other",
          "description": "⌨️ Improve Alert/message/notification accessibility by adding role attribute."
        }
      ]
    },
    {
      "version": "4.4.3",
      "date": "2020-07-20",
      "changes": [
        {
          "component": "Layout",
          "type": "fix",
          "description": "🐞 Fix Layout `trigger` cannot customize zero width to trigger."
        },
        {
          "component": "Form.Item",
          "type": "fix",
          "description": "🐞 Fix Form.Item `help` style when verification fails. "
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "🐞 Fix Descriptions abnormal style inside Table `expandedRowRender`."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Add `-popconfirm: 1060` less variable, and improve `-tooltip` into `1070`."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🛠 Upgrade `react-slick` to reduce bundle size."
        },
        {
          "component": "Catalan",
          "type": "other",
          "description": "🌐 Improve Catalan ca_ES localization. "
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Upload `customRequest` file interface. "
        }
      ]
    },
    {
      "version": "4.4.2",
      "date": "2020-07-11",
      "changes": [
        {
          "component": "General",
          "type": "feature",
          "description": "🛠 Adjust Alert animation to remove directly dom operation. [#dd8e9f8](https://github.com/ant-design/ant-design/commit/dd8e9f8) "
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix Select shifts vertically when searching."
        },
        {
          "component": "Select",
          "type": "style",
          "description": "- 💄 Add `-item-select-color` to control the color when Select item is selected."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Form.Item warning for `preserve` as invalidate dom prop."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Card cover margin bug when bordered is false. "
        },
        {
          "component": "Select",
          "type": "style",
          "description": "💄 Adjust Typography style to set `overflow-wrap: break-word` as default."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Table `expandedRowRender` nested Table cell background color."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Popover wrong positioning on Radio.Button. "
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix RangePicker clear icon position issue when `size=small`."
        },
        {
          "component": "Select",
          "type": "feature",
          "description": "🆕 Upload supports to show thumbnail for non-image files as `thumbUrl` configured in `onChange` event. "
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Table `onChange` triggered multiple times when change page size. "
        },
        {
          "component": "Select",
          "type": "feature",
          "description": "🛠 Remove `babel-runtime` and add `/runtime` in dependencies, reduce gzipped bundle size `18.6KB`."
        }
      ]
    },
    {
      "version": "4.4.1",
      "date": "2020-07-06",
      "changes": [
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu.Item use `a` tag color style issue. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu inline animation not correct issue."
        },
        {
          "component": "Menu",
          "type": "style",
          "description": "- 💄 Optimize Menu collapse animation."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Input disabled `backgroundColor` is override when inside a `error` or `warning` Form.Item."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Table header extra border of right side column."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Grid ResponsiveObserve not been unsubscribed correctly. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Progress `successPercent` warning message and correct `success.progress` to `success.percent`. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix PageHeader Tabs unnecessary `margin-bottom`. "
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item `hidden` no working."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item help message may not disappear in a `display:none` container."
        },
        {
          "component": "Radio",
          "type": "fix",
          "description": "- 🐞 Fix Radio.Group throw `Function components cannot be given refs` warning message."
        },
        {
          "component": "Radio",
          "type": "fix",
          "description": "- 🐞 Fix Radio.Group style with extra spaces in `children`. "
        },
        {
          "component": "Radio",
          "type": "fix",
          "description": "🐞 Fix Drawer click mask will trigger close event multiple times."
        },
        {
          "component": "Radio",
          "type": "fix",
          "description": "🐞 Fix Skeleton Button/Avatar/Input/Image default width to auto."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Slider `onChange` definition. "
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Tooltip custom color type definition. "
        }
      ]
    },
    {
      "version": "4.4.0",
      "date": "2020-06-29",
      "changes": [
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Form.Item support `preserve` to disable value preserve."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Form.Item add `hidden` prop."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Form instance support `getFieldInstance`."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table `onChange` add `action` in extra argument."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table support `rowSelection.dirty` to enable cache `key` with ajax."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Table supports `rowSelection.checkStrictly`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `onSelectAll`'s `changeRows` parameter is incorrect."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table expand buttons of leaf rows in tree data can still be clicked."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table expand icon still interative when hidden."
        },
        {
          "component": "TimePicker",
          "type": "fix",
          "description": "- 🐞 Fix TimePicker display 12 AM as 0 AM."
        },
        {
          "component": "TimePicker",
          "type": "fix",
          "description": "- 🐞 Fix TimePicker not using 0 ~ 23 to disable hours."
        },
        {
          "component": "TimePicker",
          "type": "fix",
          "description": "- 🐞 Fix TimePicker AM | PM are not related with hour disabled status."
        },
        {
          "component": "TimePicker",
          "type": "fix",
          "description": "- 🐞 Fix TimePicker \"Now\" button's behavior doesn't conform hour, minute, second step."
        },
        {
          "component": "Cascader",
          "type": "feature",
          "description": "- 🆕 Cascader add `expandIcon` to customize the current item expand icon."
        },
        {
          "component": "Cascader",
          "type": "feature",
          "description": "- 🆕 Cascader support `dropdownRender` prop for customizing menu."
        },
        {
          "component": "Menu",
          "type": "feature",
          "description": "- 🆕 Menu support `triggerSubMenuAction` (hover or click). "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu.SubMenu background color in dark theme."
        },
        {
          "component": "Tabs",
          "type": "feature",
          "description": "- 🆕 Pagination support `onChange` called when `pageSize` change. "
        },
        {
          "component": "Tabs",
          "type": "feature",
          "description": "- 🆕 Tabs support `addIcon` to customize add icon node."
        },
        {
          "component": "Tabs",
          "type": "fix",
          "description": "- 🐞 Fix Tabs can not close in IE11."
        },
        {
          "component": "Pagination",
          "type": "fix",
          "description": "- 🐞 Improve Pagination accessibility by fixing a W3C error."
        },
        {
          "component": "DatePicker",
          "type": "feature",
          "description": "- 🆕 Fix month and quarter picker's toggle button size of DatePicker component. "
        },
        {
          "component": "DatePicker",
          "type": "feature",
          "description": "- 🆕 DatePicker support `showNow`. TimePicker support `showNow`."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "- 🆕 Dropdown component support `arrow` prop. "
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "- 🐞 Fix Drawer `getContainer={false}` cause scrollbar missing in some situation."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Fix Rate render unexpectedly when `value` is `1.6` or `2.6`."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Menution support `autoSize` prop. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Remove the 140px width limit on vertical dot Steps.Step."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Move Result children to end of component."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Add Rate `character` support `(RateProps)=> ReactNode` customization."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Add `optionType` api to set Radio type in Radio.Group when use `options`."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Add `closeIcon` to customize Tag close icon."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Drawer support `closeIcon`."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Add `ghost` prop for collapse to set a transparent background."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Progress support customise filled Progress color. "
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Typography copyable support `icon` and `tooltips` for customization. "
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Add `showLeafIcon` for Tree Component when set `showLine` prop."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🆕 Add BackTop `duration` used to set the time required to return to the top."
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "🐞 Fix Select suffix icon can not focus input."
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "🐞 Fix the issue that Notification modification `width` is not aligned with the edge of the screen."
        },
        {
          "component": "Drawer",
          "type": "style",
          "description": "💄 Make Switch animation more smooth and quicker."
        },
        {
          "component": "Drawer",
          "type": "feature",
          "description": "🛠 Modal add more less parameters. "
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "🐞 Fix PageHeader tabs unexpected border style."
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "🐞 Fix InputNumber `max` prop has no default value."
        },
        {
          "component": "Drawer",
          "type": "other",
          "description": "🌐 Add missing translation keys to table locale in German, Italian and Czech. "
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Table nested style in RTL."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Table title style in RTL when use filter and sorter."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix InputNumber input inner in RTL."
        }
      ]
    },
    {
      "version": "4.3.5",
      "date": "2020-06-21",
      "changes": [
        {
          "component": "Input.Search",
          "type": "fix",
          "description": "🐞 Fix Input.Search as AutoComplete customize component crash issue."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🛠 Rewrite Input.Password with hooks. [-Liu](https://github.com/Rustin-Liu)"
        },
        {
          "component": "PageHeader",
          "type": "fix",
          "description": "🐞 Fix PageHeader tabs broken style since `4.3.0`."
        },
        {
          "component": "Backtop",
          "type": "fix",
          "description": "🐞 Fix Backtop still interactive when it is hidden. "
        },
        {
          "component": "Upload",
          "type": "fix",
          "description": "🐞 Fix Upload don't support Popover."
        },
        {
          "component": "Tabs",
          "type": "fix",
          "description": "🐞 Fix Tabs content exceeds container width issue."
        },
        {
          "component": "DataPicker",
          "type": "fix",
          "description": "🐞 Fix DataPicker/TimePicker time dropdown alignment issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table nested border style."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "- 💄 Improve Table empty filters menu UI."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "- 💄 Reduce Table filter dropdown's `max-height`."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "- 🐞 Fix Descriptions selecting text behavior when double clicking item. "
        },
        {
          "component": "Descriptions",
          "type": "style",
          "description": "- 💄 Fix Descriptions label text not start aligned in Safari."
        },
        {
          "component": "Descriptions",
          "type": "style",
          "description": "💄 Fix List.Item.Meta content width may overflow sometimes."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "🐞 Fix dark mode Menu.SubMenu background color in compact theme."
        },
        {
          "component": "Descriptions",
          "type": "deprecation",
          "description": "⚡️ Reduce 3KB Button css bundle size."
        }
      ]
    },
    {
      "version": "4.3.4",
      "date": "2020-06-14",
      "changes": [
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix `validateTrigger` not works on Form."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item still replace component `id` when `id` configured."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.List error message display not correct when nested with `noStyle`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `shouldCellUpdate` missing `prevRecord` param."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table's filter dropdown's display value doesn't sync with controlled `filteredValue`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `onChange` get wrong state with multiple sorter operation."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Modal `confirm()` has no default icon."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix List `grid` not working in React.Fragment or wrapped List.Item."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Avatar fallback to children when loading image with error. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Drawer doesn't omit prop `getTargetContainer`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Tabs dropdown clip text when tab title too long."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Carousel under Tabs shaking when tab switch."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Transfer package size will increase if tree shaking is disabled. "
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Add `-star-hover-scale` to control Rate scale when cursor hover."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Add `-orientation-margin` less variable to control Divider's left margin when `orientation` is set."
        },
        {
          "component": "Table",
          "type": "other",
          "description": "🌐 Localization"
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🛠 Export Select `OptionProps` interface. "
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🛠 Export Card `CardInterface` interface. "
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🛠 Remove `emptyText` from Table `TableProps`. "
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🛠 Add `patch` type on Upload `method` prop. "
        }
      ]
    },
    {
      "version": "4.3.3",
      "date": "2020-06-07",
      "changes": [
        {
          "component": "Drawer",
          "type": "fix",
          "description": "🐞 Fix Drawer cannot open."
        },
        {
          "component": "Menu.SubMenu",
          "type": "fix",
          "description": "🐞 Fix Menu.SubMenu cannot scroll."
        }
      ]
    },
    {
      "version": "4.3.2",
      "date": "2020-06-06",
      "changes": [
        {
          "component": "Tag.CheckableTag",
          "type": "fix",
          "description": "🐞 Fix Tag.CheckableTag don't support `onClick`."
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "🐞 Fix Drawer support set `getPopupContainer` and `getPrefixCls` by ConfigProvider."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Button `loading.delay` repeat trigger when parent compoent re-render."
        },
        {
          "component": "Dropdown",
          "type": "fix",
          "description": "🐞 Fix Dropdown menu link color when has `icon`."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix Select virtual scroll display abnormally in compact mode."
        },
        {
          "component": "Select",
          "type": "deprecation",
          "description": "- ⚡️ Optimize Select multiple mode performance. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Calendar trigger `onPanelChange` even when in the same panel."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Input component height issue in IE11. "
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Radio typescript error typo. "
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Statistic don't work with Tooltip."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix TimePicker.RangePicker `bordered={false}` not working when has `className`."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix List cannot trigger `onChange` in pagination."
        },
        {
          "component": "Select",
          "type": "other",
          "description": "🌐 Localization"
        },
        {
          "component": "Select",
          "type": "style",
          "description": "💄 Add less variable `-font-size`, `-font-size-md` and `-font-size-sm` to customize the size of Table text. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Tabs dropdown style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Add `Modal.method()` RTL supports only use hooks."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Badge offset in RTL."
        }
      ]
    },
    {
      "version": "4.3.1",
      "date": "2020-06-02",
      "changes": [
        {
          "component": "Tabs",
          "type": "fix",
          "description": "- 🐞 Fix Tabs `hideAdd` not working."
        },
        {
          "component": "Tabs",
          "type": "fix",
          "description": "- 🐞 Fix Tabs dropdown has extra horizontal scrollbar in Firefox."
        },
        {
          "component": "Tabs",
          "type": "fix",
          "description": "- 🐞 Fix Tabs inkbar border lost when use with `react-sticky`."
        },
        {
          "component": "Tabs",
          "type": "style",
          "description": "- 💄 Adjust Tabs `tabBarStyle` style display."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 Fix Button quick set `loading` from `delay` to `false` will still change to the loading status."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 Fix the inconsistent style of Text Button in `danger`. "
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Table no showing scrollbar inside Row. "
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Drawer get `dropdownMatchSelectWidth` as dom prop warning."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Adjust Steps to support React.Fragment with `children`."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Upload delete icon cannot be navigate via keyboard. "
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix multiple Select search input cursor missing issue."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Radio.Group using `options` get `Element type is invalid` error."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Adjust Notification default placement to `topLeft` in RTL."
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🛠 Export Tabs `TabPaneProps` definition."
        }
      ]
    },
    {
      "version": "4.3.0",
      "date": "2020-05-31",
      "changes": [
        {
          "component": "General",
          "type": "feature",
          "description": "🛠 Optimize dependencies to reduce overall package size."
        },
        {
          "component": "Button",
          "type": "feature",
          "description": "- 🆕 New `type=\"text\"` Button."
        },
        {
          "component": "Button",
          "type": "style",
          "description": "- 💄 Improve button background variable usage. "
        },
        {
          "component": "Upload",
          "type": "feature",
          "description": "- 🆕 `data` could return `Promise` now. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Upload",
          "type": "feature",
          "description": "- 🆕 Support `progress` to customize progress bar. "
        },
        {
          "component": "Upload",
          "type": "fix",
          "description": "- 🐞 Fix progress bar override by accident. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table support `rowSelection.hideSelectAll` to hide selectAll checkbox. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 `ellipsis` support `showTitle` to config `title` show. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table `columns` support `shouldCellUpdate`."
        },
        {
          "component": "Input",
          "type": "feature",
          "description": "- 🆕 Input.Passowrd support custom icon."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input.Password still show `value` attribute in DOM after blur it."
        },
        {
          "component": "Input",
          "type": "style",
          "description": "- 💄 Add less variable `-disabled-color`. "
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item inline `label` collapsed when in narrow space."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.List field status sync logic and add a nest fields demo."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Form support `validateTrigger` to config children fields validate trigger."
        },
        {
          "component": "Menu",
          "type": "feature",
          "description": "- 🆕 Adjust text shows the first character when Menu is collapsed in `inline` mode."
        },
        {
          "component": "Menu",
          "type": "feature",
          "description": "- 🆕 Menu.Item support `danger` prop."
        },
        {
          "component": "Avatar",
          "type": "feature",
          "description": "- 🆕 Avatar support `gap` to set the unit distance between left and right sides."
        },
        {
          "component": "Avatar",
          "type": "fix",
          "description": "- 🐞 Fix Avatar `onError` trigger twice. "
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "- 🆕 Support Typography.Paragraph custom expand style. "
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "- 🆕 Typography.Text support `keyboard` style."
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "- 🆕 Add Link component."
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "- 🐞 Fix Typography `title` prop support. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 Tooltip support `color` to config background color."
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 Popconfirm can be closed by pressing `ESC` now."
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 Tooltip `destroyTooltipOnHide` support `keepParent` config. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 Notification support to config `prefixCls`. "
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 RangePicker `dateRender` support additional argument to detect is `start` or `end` field."
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 Skeleton add `round` prop to enable paragraph and title show radius. "
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 Transfer support `oneWay` and `pagination`."
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 Message support customize `className` and `style`. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Typography",
          "type": "feature",
          "description": "🆕 ConfigProvider support `virtual` and `dropdownMatchSelectWidth`. "
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix Breadcrumb icon margin missing when using links. "
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix Cascader expand icon color when disabled."
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix List warning about `React does not recognize colStyle prop`."
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix Progress with `steps` don't update `percent` expectedly. "
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix Steps `subtitle` transition style."
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix Alert close icon `padding` style."
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix Tree `-directory-selected-bg` don't work. "
        },
        {
          "component": "Typography",
          "type": "fix",
          "description": "🐞 Fix `-prefix` don't work on some styles. "
        },
        {
          "component": "Typography",
          "type": "style",
          "description": "💄 Descriptions add less variables `-item-trailing-colon` and etc. "
        },
        {
          "component": "Typography",
          "type": "other",
          "description": "🌐 Localization"
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Tree checkbox style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Calendar notice content text style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Table filter dropdown style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Cascader dropdown style in RTL."
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🛠 Form export `RuleObject` and `RuleRender` types. "
        }
      ]
    },
    {
      "version": "4.2.5",
      "date": "2020-05-25",
      "changes": [
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Table selection arrow out of column when `size` is `small/middle`."
        },
        {
          "component": "Input.TextArea",
          "type": "fix",
          "description": "🐞 Fix Input.TextArea clear icon disappears in Input.Group when hover it. [-jiangzhiguo](https://github.com/Mr-jiangzhiguo)"
        },
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Fixed an issue where the `RowSelection.onChange` will still be cached when the Table removes entries in `dataSource`."
        },
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Adjust `useNotification` api instance to be same instance for each render."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Button `loading` transition animation missing and Modal `confirmLoading` not being reset."
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "🐞 Fix Drawer cover background elements when it is not visible."
        },
        {
          "component": "Cascader",
          "type": "fix",
          "description": "🐞 Fix Cascader/Select/Table/TreeSelect text color when data empty."
        },
        {
          "component": "InputNumber",
          "type": "style",
          "description": "💄 Fix InputNumber operation button arrow is not centered."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Table with empty array `filteredValue` still highlight the filtered icon."
        },
        {
          "component": "Cascader",
          "type": "fix",
          "description": "🐞 Fix Cascader not support `number[]` value."
        },
        {
          "component": "Switch",
          "type": "other",
          "description": "⌨️ Fix Switch `autoFocus` trigger when `disabled` removed. Adjust style to avoid switch shaking. Remove blur logic when `onMouseUp` to improve acessibility."
        },
        {
          "component": "Menu",
          "type": "style",
          "description": "💄 Add Menu default `text-align` style."
        },
        {
          "component": "List",
          "type": "feature",
          "description": "🛠 Refactor List code. "
        },
        {
          "component": "strict",
          "type": "feature",
          "description": "🛠 Modify the Alert with hooks to support strict mode. "
        },
        {
          "component": "Card",
          "type": "fix",
          "description": "🐞Fix Card perfermance bug when use with `react-split`."
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🛠Cascader ts definition update. "
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix TS error of `Could not find a declaration rc-upload`."
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🛠 Add children type to BackTop."
        }
      ]
    },
    {
      "version": "4.2.4",
      "date": "2020-05-18",
      "changes": [
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Revert Switch patch to fix handle position style issue with `unCheckedChildren`."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Adjust Upload icon default color to red in error status."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Adjust Dropdown arrow position a little higher."
        },
        {
          "component": "General",
          "type": "other",
          "description": "🌐 Form `defaultValidateMessages` support `ru_RU`. "
        }
      ]
    },
    {
      "version": "4.2.3",
      "date": "2020-05-16",
      "changes": [
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Refactor `rc-progress` to resolve `h3g is not defined` error in `<script src=\"antd.min.js\" />`."
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "- 🐞 Fix Drawer `getContainer={false}` height overflow issue."
        },
        {
          "component": "Drawer",
          "type": "fix",
          "description": "- 🐞 Fix Drawer `mask={false}` animation not working."
        },
        {
          "component": "BackTop",
          "type": "feature",
          "description": "- 🛠 Refactor BackTop with hooks."
        },
        {
          "component": "BackTop",
          "type": "fix",
          "description": "- 🐞 Fix BackTop not working in iframe of Chrome."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix DatePicker with `showToday` not working with `disabledDate`."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix DatePicker `renderExtraFooter` with long content exceed content width."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 Fix small Button align issue when customize theme."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 Fix Button children not working with Tooltip."
        },
        {
          "component": "Button",
          "type": "feature",
          "description": "🛠 Refactor Tooltip with hooks."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Avoid `disabled` Upload.Dragger being triggered by clicking Form `label`."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Select selected option not interactive (such as `title` not working)."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Switch shake in Safari and iOS Chrome. "
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Carousel upgrade to `react-slick.26.1` to resolve some problems."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Cascader will display `defaultValue` instead of empty string when no matched options. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Table `onChange` pagination type. "
        },
        {
          "component": "Button",
          "type": "style",
          "description": "💄 Add less variable `-head-extra-color`."
        },
        {
          "component": "Button",
          "type": "style",
          "description": "💄 Adjust Pagination simple mode background to transparent."
        },
        {
          "component": "Button",
          "type": "style",
          "description": "💄 Fix dark Menu link color."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Dropdown.Button default menu placement in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Menu `border` in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Select multiple tag style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Typography `expand` style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Pagination slash style in RTL."
        }
      ]
    },
    {
      "version": "4.2.2",
      "date": "2020-05-11",
      "changes": [
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Fix `npm run version` install error."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Menu `-item-font-size` not working."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Add `-close-color` less variable."
        }
      ]
    },
    {
      "version": "4.2.1",
      "date": "2020-05-11",
      "changes": [
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item get React warning for `getValueProps`."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item `help` style issue when `validateStatus` is not `error`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix selection column width issue when fix header."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "- 💄 Adjust selection column css selector priority to enable customize width."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix miss placeholder when `placeholder` is `undefined`."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix clear icon color style."
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "- 🐞 Fix loading style for the dark theme. "
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "- 🐞 Fix `unCheckedChildren` not showing."
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Fix Upload error message location to scroll in the float layer. "
        },
        {
          "component": "Switch",
          "type": "style",
          "description": "💄 Tweak Comment render unnecessary div style when `avatar` is empty. "
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Fix Select `focus` border style in Input.Group."
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Fix Steps `subTitle` showing `[object Object]` title."
        },
        {
          "component": "Switch",
          "type": "style",
          "description": "💄 Tweak Select close icon position."
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Fix Drawer `width=\"50%\"` hidden problem when no mask."
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Fix Textarea with `allowClear` has error height style."
        },
        {
          "component": "Switch",
          "type": "style",
          "description": "💄 Adjust Modal.xxx function async to avoid block React events."
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Fix Menu with controlled `openKeys` abnormal behavior when `inlineCollapsed` changed."
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Fix Button `loading` animation."
        },
        {
          "component": "Switch",
          "type": "fix",
          "description": "🐞 Fix Slider `marks` selected problem when dragging."
        },
        {
          "component": "Switch",
          "type": "feature",
          "description": "🛠 Timeline refactors with React Hooks. "
        },
        {
          "component": "Switch",
          "type": "deprecation",
          "description": "- 🗑 Reduce bundle size via removing `react-lifecycles-compat`."
        },
        {
          "component": "Switch",
          "type": "feature",
          "description": "- 🛠 Reduce bundle size via excluding `package.json` from source code."
        },
        {
          "component": "Switch",
          "type": "feature",
          "description": "- 🛠 Upgrade `rc-animate` to 3.x to reduce bundle size."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Input clear icon style in RTL."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix DatePicker panel style in RTL. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize DatePicker active bar style in `RTL`."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Transfer search padding style in `RTL`."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Layout style of RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Button `loading` style in RT."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Input.Search style in RTL."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix InputNumber `onChange` type. "
        }
      ]
    },
    {
      "version": "4.2.0",
      "date": "2020-04-29",
      "changes": [
        {
          "component": "all",
          "type": "feature",
          "description": "🆕 List `grid` support all column count like 5."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Divider add `plain` prop which allows a non-heading style divider text."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Typography `ellipsis` support `onEllipsis` event handler."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Space support `align` prop."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Upload support `isImageUrl` to force trade file as image. "
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Form.Item support `initialValue` and `getValueProps` props."
        },
        {
          "component": "ConfigProvider",
          "type": "feature",
          "description": "- 🆕 ConfigProvider support `getTargetContainer` to config Affix `target` props."
        },
        {
          "component": "ConfigProvider",
          "type": "feature",
          "description": "- 🆕 ConfigProvider support `input` prop to config Input `autoComplete`."
        },
        {
          "component": "ConfigProvider",
          "type": "fix",
          "description": "- 🐞 Fix ConfigProvider `getPopupContainer` not working on DatePicker and Slider. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table `summary` support fixed columns."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table support responsive columns. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table pagination default position in RTL."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table crash when `pageSize` is `undefined`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 fix Table nested margin when size is `small` or `middle`. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix RangePicker `ranges` tag color to primary color."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Transfer with custom empty style issue. "
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Password caret position. "
        },
        {
          "component": "Input",
          "type": "style",
          "description": "- 💄 Adjust Input.Search icon style."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 Fix Button align problem of icon only."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 Fix Button of icon only wrong `loading` style."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 fix Button cannot be directly called by `react-dnd`. "
        },
        {
          "component": "Menu",
          "type": "feature",
          "description": "- 🆕 Menu Item and SubMenu support `icon` prop."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu duplicated shadow style."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Tag cannot be directly called by `react-dnd`. "
        },
        {
          "component": "Anchor",
          "type": "fix",
          "description": "- 🐞 Fix Anchor Link with multiple `#` can not jump correctly. "
        },
        {
          "component": "Anchor",
          "type": "fix",
          "description": "- 🐞 Fix Input with `suffix` align problem."
        },
        {
          "component": "Anchor",
          "type": "style",
          "description": "💄 Select arrow won't rotate when open."
        },
        {
          "component": "Anchor",
          "type": "style",
          "description": "💄 Rate support `direction`."
        },
        {
          "component": "Anchor",
          "type": "style",
          "description": "💄 Adjust font-size in compact mode."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Result button style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Add Divider RTL support."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Alert style in RTL when no-icon."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Table expand animation and pagination style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Table filter dropdown position in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Table rowSelect icon style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize List style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Add Calendar RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Input.Search style in RTL."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Add Notification RTL config."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix PageHeader `tag` definition. "
        },
        {
          "component": "TypeScript",
          "type": "deprecation",
          "description": "- 🗑 Remove Button deprecated `type=\"danger\"` TypeScript definition and warn it."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Table pagination `position` definition. "
        }
      ]
    },
    {
      "version": "4.1.5",
      "date": "2020-04-25",
      "changes": [
        {
          "component": "Button.Group",
          "type": "fix",
          "description": "🐞 Fix Button.Group align style."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Select cannot trigger open by clicking arrow icon."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fix Form fields shake when `-item-margin-bottom` is customize and switching the validing info. "
        },
        {
          "component": "the",
          "type": "fix",
          "description": "🐞 Fix the first Divider render differently with others."
        },
        {
          "component": "nest",
          "type": "fix",
          "description": "🐞 Fix nest ConfigProvider missing `prefixCls` value."
        },
        {
          "component": "Carousel",
          "type": "fix",
          "description": "🐞 Fix Carousel tabbed Radio/Checkbox to non-active slide."
        },
        {
          "component": "Tree",
          "type": "fix",
          "description": "🐞 Fix Tree with virtual scroll frozen by quick `loadData`."
        },
        {
          "component": "Steps",
          "type": "fix",
          "description": "🐞 Fix Steps style in IE11 when direction is vertical. "
        },
        {
          "component": "Input.Search",
          "type": "fix",
          "description": "🐞 Fix Input.Search height affected by `suffix` and `react key` warning."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Menu behavior when hover on submenu gap."
        },
        {
          "component": "Tree",
          "type": "fix",
          "description": "🐞 Fix Tree custom icon missing when node is loading data."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Alert RTL style when set both `showIcon` and `closable`."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Button RTL style when loading."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Collapse that icon position is incorrect in RTL."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Select group label style in RTL."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Statistic RTL style."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix type definition of `selections` for Table. "
        }
      ]
    },
    {
      "version": "4.1.4",
      "date": "2020-04-18",
      "changes": [
        {
          "component": "dark",
          "type": "fix",
          "description": "🐞 Fix dark theme and compact theme not working."
        },
        {
          "component": "Modal.info",
          "type": "fix",
          "description": "🐞 Fix Modal.info executed only once when has argument."
        },
        {
          "component": "Dropdown",
          "type": "fix",
          "description": "🐞 Fix Dropdown submenu background missing."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Optimize PageHeader responsive behavior."
        },
        {
          "component": "TreeSelect",
          "type": "fix",
          "description": "🐞 Fix TreeSelect render blank in compact mode."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Table `rowSelection` params issue when `childrenColumnName` configured."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input `type=\"color\"` height issue."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input width shaking when trigger clear icon."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input.Search `size` not affected by ConfigProvider `componentSize`."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix multiple Select show remove icon when `disabled`."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix Select custom `suffixIcon` cannot be access."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix Select search input caret missing in Collapse."
        },
        {
          "component": "Globalization",
          "type": "other",
          "description": "- 🌐 Add missing translations in he_IL. "
        },
        {
          "component": "Globalization",
          "type": "other",
          "description": "- 🌐 Add missing translations in ru_RU. "
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Pass `popupClassName` prop to `rc-picker`. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Select RTL style."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fix Menu RTL style."
        }
      ]
    },
    {
      "version": "4.1.3",
      "date": "2020-04-13",
      "changes": [
        {
          "component": "General",
          "type": "style",
          "description": "💄 Adjust Form.Item `label` height style in vertical layout."
        },
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Fix `Variable is undefined` when importing dark or compact theme and provide a `getThemeVariables` methold for getting theme variables easily."
        },
        {
          "component": "PageHeader",
          "type": "fix",
          "description": "🐞 Fix PageHeader style breaks when `title` is too long and improve it's responsive design."
        },
        {
          "component": "Tabs",
          "type": "fix",
          "description": "- 🐞 Fix Tabs `-card-height` less variable not working."
        },
        {
          "component": "Tabs",
          "type": "fix",
          "description": "- 🐞 Fix Tabs cannot be displayed in Safari 13. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table fixed columns cannot pin in Safari 12."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `summary` padding in small size. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Select align style with different size."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix RangePicker under Input.Group style issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Pagination missing TypeScript definition of `showTitle`. "
        }
      ]
    },
    {
      "version": "4.1.2",
      "date": "2020-04-10",
      "changes": [
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu SubMenu background in dark mode. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix long SubMenu title being overlayed by arrow icon. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix dark and compact theme cannot work together. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Notification invalid `paddig-top` value."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "- 🐞 Fix Button `loading` animation with icon."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Statistic show `-0` when value is `-`. "
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Modal.confirm `onOk` should not be triggered multiple times."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input.Group Button style not aligned center."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input with `affix` background style in dark theme."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "🐞 Fix Form.Item not correct reset error style when dynamic switch Form.Item."
        },
        {
          "component": "Input",
          "type": "style",
          "description": "💄 Adjust RangePicker arrow & suffix color style."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table selection row with hover background style."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "- 💄 Tweak Table hover background color."
        },
        {
          "component": "Select",
          "type": "style",
          "description": "- 💄 Match mulitiple Select cursor position to single Select."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix borderless Select still show border when Form.Item set `validateStatus`."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix Select style in IE11."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Calendar missing `style` prop support."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix Tabs bottom card active tab wrong height style."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "🐞 Fix RTL support of Anchor, Select, DatePicker, Grid, Mentions. "
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Modal.confirm `okButtonProps` types. [-chiciuc](https://github.com/nicu-chiciuc)"
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Pagination `position` type. "
        }
      ]
    },
    {
      "version": "4.1.1",
      "date": "2020-04-05",
      "changes": [
        {
          "component": "Tabs",
          "type": "fix",
          "description": "🐞 Fix Tabs panel focus outline style. "
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "🐞 Fix Input affix with popup element can not get click focus."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table row selection dropdown support `getPopupContainer`. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table header size with filter or sorter when `size` is configured."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "- 💄 Adjust nest Table style, compact only when just one table element."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table column `align` not working on head when `sorter` configured."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table filter config not work on jsx structure."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Adjust Table expanded row not fix width when scroll only."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix the column can't show when the `column.children` is `undefined`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table still show filter icon when `filters` is `undefined`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table unchanged `filters` should not trigger `onChange`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table loading compatibility."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table scroll shadow style in Safari."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Adjust RangePicker arrow style."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Text with `ellipsis` align issue."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Tweak `-color` should be `-color` defaultly."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix BackTop not working in iframe and improve it's perfermance."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Select inconsistent height when `mode=\"multiple\"` and `size=\"large\" />`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Radio less variable. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Card Tabs do not support small size. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Affix throws `React warning of state update on unmounted component`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Textarea with `clearIcon` additional `margin` in Form.Item."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix List `footer` missing border when data is empty."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Slider `tooltipPlacement` option API is changed to be correct again. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🛠 Refactor LocaleReceiver with new context api to avoid React strict mode warning."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Radio and Checkbox required prop not passing to input."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix variable `--scroll-bar` is undefined. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Menu and Spin style in compact mode. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Space item duplicate key."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Select cursor style."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Add Message RTL style. "
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Menu RTL style."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Radio RTL style. "
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix label display in Form RTL. "
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Space RTL style. "
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Table `FilterDropdownProps` TypeScript definition. "
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Form `Store` and `StoreValue` TypeScript definition. "
        }
      ]
    },
    {
      "version": "4.1.0",
      "date": "2020-03-29",
      "changes": [
        {
          "component": "General",
          "type": "feature",
          "description": "🆕 Tree/TreeSelect/Select support `virtual` prop to disable virtual scroll."
        },
        {
          "component": "Pagination",
          "type": "feature",
          "description": "🆕 Improve Pagination switch experience."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table pagination `position` add more option. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table selection column support `renderCell`."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🆕 Table sorter adding hint tooltip and a new prop `showSorterTooltip`. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 Tag component support `icon` prop. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 Grid add `useBreakpoint` hook."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 Card support `tabProps`."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 Pagination add `autoResize` prop. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 Add render props support for Popover/Popconfirm. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 TimePicker.RangePicker support `order` prop."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 Carousel `dots` support object to pass `className`."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 Form `validateMessages` support `${label}` variable."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🆕 Expose all Dropdown props in Breadcrumb.Item. "
        },
        {
          "component": "Table",
          "type": "other",
          "description": "⌨️ Improve Tabs Accessibility."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🛠 Warning Form.Item with `defaultValue` when it's controlled."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🛠 Menu.Item Tooltip could be hidden by falsy `title` prop."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🛠 Typography `onExpand` function support event parameter. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🛠 Simplify Popconfirm and Popover dom structure."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Autocomplete display `null` when `value` is `null`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Adjust Drawer close button without `title` style to avoid overlap with scroll bar."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Calendar style details."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table fixed column shadow style in Safari."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table style affect nest table element."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `emptyText` is not centered and show pagination when empty data. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `rowSelection` event bubbling with `onRow`. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Input with `suffix` only align style issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Alert cannot work with Tooltip/Popover."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix nest dynamic Form.Item get react unmounted update warning."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Adjust Tag `processing` status color."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Remove Select dropdown group title mouse click style."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Redesign Table filter menu buttons and fix Dropdown edge `padding` style."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Move `-item-label-height` from form styles to theme variables. "
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Add less variables `-focus-decoration` and `-focus-outline`."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 add separator cursor `disabled` of DatePicker."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Checkbox `inner` RTL style issue."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Optimize Upload `picture-card` RTL style issue."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Badge RTL number style issue."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Select RTL style issue when select multiple options can be cleared."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Progress RTL style issue."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Badge RTL style issue."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Input RTL style issue."
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Fix Steps RTL style issue."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Tabs RTL icon style issue."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Input.Group RTL style issue."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Timeline label mode RTL style issue."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimization Select dropdown group RTL style issue."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimization Dropdown.Button RTL style issue."
        },
        {
          "component": "Typescript",
          "type": "feature",
          "description": "- 🛠 replace deprecated `React.SFC` with `React.FC`. [-Liu](https://github.com/Rustin-Liu)"
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item `children` definition."
        }
      ]
    },
    {
      "version": "4.0.4",
      "date": "2020-03-23",
      "changes": [
        {
          "component": "AutoComplete",
          "type": "fix",
          "description": "🐞 Fix AutoComplete clear icon overlap issue on search icon."
        },
        {
          "component": "Button",
          "type": "fix",
          "description": "🐞 Fix Button align issue when is `disabled` and wrapped by Tooltip."
        },
        {
          "component": "Cascader",
          "type": "fix",
          "description": "🐞 Fix Cascader search need to press down arrow twice to select item. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Carousel",
          "type": "fix",
          "description": "🐞 Fix Carousel cannot works on Snowpack."
        },
        {
          "component": "ConfigProvider",
          "type": "fix",
          "description": "🐞 Fix ConfigProvider `componentSize` not works on DatePicker.RangePicker."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "🐞 Fix Descriptions cannot fit to small container width."
        },
        {
          "component": "General",
          "type": "deprecation",
          "description": "⚡️ Optimization Form.Item with multiple noStyle children Form.Item message collection performance."
        },
        {
          "component": "Grid",
          "type": "fix",
          "description": "🐞 Fix Grid broken style using Col without `span`."
        },
        {
          "component": "InputNumber",
          "type": "style",
          "description": "💄 Add InputNumber RTL style."
        },
        {
          "component": "Menu",
          "type": "feature",
          "description": "- 🛠 Menu inherit `line-height` from header. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu unexpected scrollbar when show and hide."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Progress Dashboard won't allow `gapDeg` to be `0`. "
        },
        {
          "component": "Menu",
          "type": "feature",
          "description": "🛠 Adjust Radio.Group logic that `value` is `undefined` should be uncontrolled mode."
        },
        {
          "component": "Menu",
          "type": "deprecation",
          "description": "⚡️ Reduce Row unnecessary render when `gutter` is array. "
        },
        {
          "component": "Menu",
          "type": "style",
          "description": "💄 Tweak RangePicker arrow shadow style."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Select dropdown menu vertical padding."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Slider tooltip crash when with `nullable` value."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table ColumnGroup with controlled `sorterOrder` not working issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table border radius style. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table fixed column height issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞Fix Table row expand icon show error in ipad. "
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "- 🛠 Table `column.filter` support `boolean` value. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table filter no working when only set `onFilter`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix TreeSelect `treeIcon` not working."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Refactor DirectoryTree to fix deprecated warning."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Typography nest list style issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Adjust Upload `onChange` return `fileList` is immutable data to avoid render issue."
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Omit Table `getCheckboxProps` typeof `checked`. "
        }
      ]
    },
    {
      "version": "4.0.3",
      "date": "2020-03-14",
      "changes": [
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu horizontal Item with nest Icon miss margin style."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu item wrong `title` when setting `getPopupContainer`."
        },
        {
          "component": "Menu",
          "type": "style",
          "description": "- 💄 Optimize the style of Icon in Menu. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Avatar in horizontal Menu `margin` issue."
        },
        {
          "component": "Slider",
          "type": "fix",
          "description": "- 🐞 Fix an issue where the position of 'slider handle' is incorrect in the vertical case of Slider. "
        },
        {
          "component": "Slider",
          "type": "style",
          "description": "- 💄 Fix Slider missing `focus` style."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix ConfigProvider not work on Table filter dropdown."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table nest tree column expandable style issue with fixed column."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix an issue where Table filtering throws `cannot read property 'map' of undefined`. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table expandable column not fixed when selection column is fixed."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table filter menu reset not working. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table filter sub menu max height with many items."
        },
        {
          "component": "Form",
          "type": "style",
          "description": "- 💄 Optimize the responsive and box model performance of The Form. "
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix FormItem hooks render error. "
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fixed the problem of using custom icons to wrap in Input.Group. "
        },
        {
          "component": "Form",
          "type": "style",
          "description": "💄 Adjust Select single padding style to avoid tweak with dropdown."
        },
        {
          "component": "Form",
          "type": "style",
          "description": "💄 Fix Calendar header select ellipsis bug."
        },
        {
          "component": "Form",
          "type": "style",
          "description": "💄 Fixed Dropdown content and icons overlapping. "
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fix Select ellipsis bug in Firefox."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Remove PageHeader unnecessary `overflow: hidden` style,Optimize PageHeader extra buttons responsive design."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fix TextArea `autoSize` don't scroll bottom in Firefox."
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize the style of Pagination in RTL mode. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Fixed the icon style with Cascader RTL. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize the Checkbox.Group style in RTL mode. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize Radio.Button style issues in RTL mode. "
        },
        {
          "component": "RTL",
          "type": "fix",
          "description": "- 🐞 Optimize table-pinned style issues that are listed under RTL. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Adjust the direction of the Dropdown icon in RTL mode. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize the Breadcrumb style in RTL mode. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize the style of the Steps component in RTL mode. "
        },
        {
          "component": "RTL",
          "type": "style",
          "description": "- 💄 Optimize styles in RTL mode with form feedback."
        }
      ]
    },
    {
      "version": "4.0.2",
      "date": "2020-03-08",
      "changes": [
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix nest Form.Item dynamic remove will warning in React."
        },
        {
          "component": "Form",
          "type": "deprecation",
          "description": "- ⚡️ Form `useForm` now return same instance for perfermance."
        },
        {
          "component": "Form",
          "type": "deprecation",
          "description": "- ⚡️ Refactor Form.Item render logic that will only render once when children is a pure component."
        },
        {
          "component": "Form",
          "type": "deprecation",
          "description": "- ⚡️ FormContext use a memoized value to avoid trigger FormItem's unintentional renders. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table dropdown popup at abnormal direction."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `expandIconColumnIndex` display order with `rowSelection`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `size=\"small\"` header background color is not same as other size."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table `className` and `style` works on wrong node."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix Select align issue with empty string value."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fix small size Select tag text not align middle. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu bottom margin is missing."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix horizontal Menu extra margin of Menu.Item with only icon."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "- 🐞 Fix Menu popup menu overflow issue when contains too many items."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Badge animation when switch between 10 and 11. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Radio.Button inside Tooltip throws `Function components cannot be given refs` warning. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Descriptions miss style when content is falsy."
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix DatePicker cursor style on `seperator`. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix ConfigProvider `prefixCls` not working on Input.Password. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Carousel `dots` not align center. "
        },
        {
          "component": "Menu",
          "type": "fix",
          "description": "🐞 Fix Input.Search border style in `rtl` mode. "
        },
        {
          "component": "Less",
          "type": "feature",
          "description": "- 🆕 Add `-fade` variable. "
        },
        {
          "component": "Less",
          "type": "feature",
          "description": "- 🆕 Add `-item-label-height` variable."
        }
      ]
    },
    {
      "version": "4.0.1",
      "date": "2020-03-04",
      "changes": [
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form help control will get `react.13` warning."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item exceed Form width when content is too long."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix TextArea style get warning in `react.13`."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input.Search extra border when has `prefix`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table column with `filtered` not working."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table locale not work."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table.Column `sortOrder` is not working in JSX mode."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table fixed column with sorted status style issue."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Dropdown menu arrow position. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix List `bordered` and `split` props conflict. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Menu.Item `a` tag hidden bug. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix `message.open` crash when `icon` is not passed. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Result `status` cannot assigned to string or number type."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Descriptions warning for duplicate key."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Optimize Calendar header style in small screen."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Radio.Group not wrapping now."
        },
        {
          "component": "Table",
          "type": "feature",
          "description": "🛠 Refactor icons import code to reduce webpack disabled tree shaking bundle size."
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix Radio.Button type error. "
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 fix `TreeSelect.SHOW_*` type. "
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix TreeSelect missing `suffix` define."
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix Drawer `forceRender` TypeScript definite."
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix Tree `treeData` define."
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item `renderProps` return type define."
        }
      ]
    },
    {
      "version": "4.0.0",
      "date": "2020-02-28",
      "changes": [
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Breadcrumb use `path` as default key to fix `name` key conflict. "
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix Table filter menu max height style with many items."
        },
        {
          "component": "the",
          "type": "style",
          "description": "💄 Add the Calendar component's custom default font color for display content. "
        },
        {
          "component": "RangePicker",
          "type": "fix",
          "description": "🐞 Fix RangePicker style render bug in IE11."
        },
        {
          "component": "General",
          "type": "feature",
          "description": "🛠 Progress `strokeColor` now will ignore incorrect percent. "
        },
        {
          "component": "Progress",
          "type": "fix",
          "description": "🐞 Fix Progress `trailColor` not working when `type=line`. "
        },
        {
          "component": "the",
          "type": "fix",
          "description": "🐞 Fix the background of the components in the pop-up components in the dark theme."
        },
        {
          "component": "General",
          "type": "style",
          "description": "- 💄 Optimization under the dark theme color swatches transparency."
        }
      ]
    },
    {
      "version": "4.0.0",
      "date": "2020-02-24",
      "changes": [
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item with `help` align style."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form throw error when using BraftEditor."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form fields shake when switching the validing info. "
        },
        {
          "component": "Upload",
          "type": "fix",
          "description": "- 🐞 Fix Upload identify types of image logic errors. "
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input with `readOnly` still clearable by `allowClear`."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix Input click with `prefix` / `suffix` not get focused."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table selection crash when record children is `null`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Table fixed column style with `small` size."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "- 🐞 Fix `label` does not have the problem of still rendering the label element when not using `bordered`."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "- 🐞 Fix Non-bordered titles under `vertical` are also a problem for `td`."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "- 🐞 Fix `vertical` and `bordered` layout issues."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "- 🐞 Fix the problem of `style` not working on `Item`."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "- 🐞 Fix `th` will also get the useless `-colon` className problem under `border`."
        },
        {
          "component": "Descriptions",
          "type": "style",
          "description": "💄 Picker `onPanelChange` will also trigger when panel value changed."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "🐞 Fix Notification first call multiple time can not stack."
        },
        {
          "component": "Descriptions",
          "type": "fix",
          "description": "🐞 Fix TreeSelect popup do not update issue."
        },
        {
          "component": "Descriptions",
          "type": "style",
          "description": "💄 Optimize Upload `showDownloadIcon` default doesn't show. "
        },
        {
          "component": "Descriptions",
          "type": "style",
          "description": "💄 Tweak Divider inner text `padding` and add `-text-padding`."
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix Form types."
        }
      ]
    },
    {
      "version": "4.0.0",
      "date": "2020-02-16",
      "changes": [
        {
          "component": "Form.Item",
          "type": "fix",
          "description": "🐞 Fix Form.Item `validateFirst` prevent form submit."
        },
        {
          "component": "InputNumber",
          "type": "fix",
          "description": "🐞 Fix InputNumber cursor position issue when deleting consecutive identical numbers."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Remove Menu excess background color."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Optimize the mouse style for the `disabled` state of the DatePicker component."
        },
        {
          "component": "Affix",
          "type": "fix",
          "description": "🐞 Fix Affix throws `Cannot read property getBoundingClientRect` in mobile device."
        },
        {
          "component": "the",
          "type": "fix",
          "description": "🐞 Fix the problem that the label width is incorrect when the screen is less than `xs`."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "🐞 Fix Input `size` is `large` height style."
        },
        {
          "component": "Badge",
          "type": "fix",
          "description": "🐞 Fix Badge `color` not working when contains children."
        },
        {
          "component": "Alert",
          "type": "fix",
          "description": "🐞 Fix Alert close button extra padding."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Tweak Steps 1px align issue."
        },
        {
          "component": "legacy",
          "type": "style",
          "description": "💄 Fix legacy Button.Group `large` size style issue."
        },
        {
          "component": "Input",
          "type": "style",
          "description": "💄 Fix Input border radius with suffix, style in Firefox, TextArea allowClear style issues."
        },
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Pagination will pass `disabled` prop to prev/next buttons return by `itemRender`."
        }
      ]
    },
    {
      "version": "4.0.0",
      "date": "2020-02-09",
      "changes": [
        {
          "component": "General",
          "type": "style",
          "description": "💄 Redesign the style of ink bar for Tabs."
        },
        {
          "component": "less",
          "type": "style",
          "description": "💄 Add less variable `-item-label-font-size`."
        },
        {
          "component": "Badge",
          "type": "fix",
          "description": "🐞 Fix Badge style for Badge with Typography."
        },
        {
          "component": "Checkbox",
          "type": "fix",
          "description": "🐞 Fix Checkbox not work when Checkbox and Checkbox.Group are separated by other component. "
        },
        {
          "component": "Collapse.Panel",
          "type": "fix",
          "description": "🐞 Fix Collapse.Panel wrong content width when `extra` prop is set. "
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item `required` validation not work when name is not set."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item data binding not work when `name` is `0`. "
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item shaking when `help` prop change from valuable to `undefined`."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix worng validating style when `prefix` is set."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fix `size` prop not work when `prefix` or `affix` is set. "
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "🐞 Fix Radio.Group style with Badge."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "🐞 Fix Select no margin between lines when mode is `tags` or `multiple`."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "🐞 Fix Slider dots focus style. [-Xuan](https://github.com/Kermit-Xuan)"
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "🐞 Fix Steps icon not align when `size=\"small\"` and `labelPlacement=\"vertical\"`."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix `expandIcon` prop not work when data item has no `children` field."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix Column `sorter` prop not work."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix custom filter's typing not work."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "🐞 Fix TimePicker `defaultOpenValue` prop not work."
        },
        {
          "component": "Transfer",
          "type": "fix",
          "description": "- 🐞 Fix wrong unit for checkbox label of header. "
        },
        {
          "component": "Transfer",
          "type": "fix",
          "description": "- 🐞 Fix icon not align in search input."
        },
        {
          "component": "Transfer",
          "type": "fix",
          "description": "🐞 Fix Typography not focus at the end of textarea when editable is true."
        }
      ]
    },
    {
      "version": "4.0.0",
      "date": "2020-01-27",
      "changes": [
        {
          "component": "General",
          "type": "feature",
          "description": "🛠 Use native Date instead of moment to get timestamp in Countdown component. "
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "🐞 Fix Input `suffix / prefix` style issue with `addonBefore / addonAfter`."
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Improved Timeline component style in RTL mode. "
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Update `clearfix` mixin to remove legacy `zoom` descriptor. "
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄Card component use `-size-base` instead of inline `14px`. "
        },
        {
          "component": "General",
          "type": "style",
          "description": "💄 Adjust Layout component to let `className` get higher priority. "
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix Tree wrong event type of AntTreeNodeMouseEvent. [-Lhotka](https://github.com/Jirka-Lhotka)"
        },
        {
          "component": "Typescript",
          "type": "fix",
          "description": "- 🐞 Fix Form.Item return type define."
        }
      ]
    },
    {
      "version": "4.0.0",
      "date": "2020-01-21",
      "changes": [
        {
          "component": "some",
          "type": "feature",
          "description": "🛠 Refactor some demos to React hooks and TypeScript."
        },
        {
          "component": "General",
          "type": "fix",
          "description": "🐞 Fixed Input/Select components align issue."
        },
        {
          "component": "Dropdown",
          "type": "feature",
          "description": "- 🆕 Support `buttonsRender` to customize buttons."
        },
        {
          "component": "Dropdown",
          "type": "fix",
          "description": "- 🐞 Tooltip doesn't disappear on `disabled` Dropdown.Button in Chrome."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fixed Input `prefix` and `suffix` overlap with content issue."
        },
        {
          "component": "Input",
          "type": "fix",
          "description": "- 🐞 Fixed Input `placeholder` color in Firefox."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fixed `onChange` return cached fresh sorter & filter state."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fixed problem that all-checkbox is checked when all the checkboxes are disabled."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fixed `locale.emptyText` not working."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fixed `placeholder` wrap and align issue."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fixed multiple Select left padding."
        },
        {
          "component": "Select",
          "type": "fix",
          "description": "- 🐞 Fixed multiple Select clean icon overlap issue."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "- 🆕 Added scroll options as `scrollToField` argument."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fixed Form.Item update `help` makes layout shake."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fixed unexpected extra rerender when Form.Item is not a real Field."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fixed Form.Item ignore `help=\"\"` issue."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "- 🐞 Fixed Form.Item `label` align bug in small screen."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fixed message cut shadow issue."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fixed Tooltip hidden when `title` is `0`."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fixed List `actions` inconsistent position."
        },
        {
          "component": "Form",
          "type": "feature",
          "description": "🆕 Add a visual list example for Tree."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fixed AutoComplete example styling issue."
        },
        {
          "component": "Form",
          "type": "deprecation",
          "description": "🗑 Removed AutoComplete useless `labelInValue`."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fixed Drawer `footerStyle` prop cause react warning."
        },
        {
          "component": "Form",
          "type": "fix",
          "description": "🐞 Fixed Breadcrumb style in `rtl` mode."
        },
        {
          "component": "Form",
          "type": "style",
          "description": "💄 Tweak Layout `className` order to end."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Export DatePicker related interface."
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🆕 Readded `-radius-sm`."
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🆕 Added `-item-padding-bottom`."
        },
        {
          "component": "TypeScript",
          "type": "feature",
          "description": "- 🆕 Added `-header-color`."
        }
      ]
    },
    {
      "version": "4.0.0",
      "date": "2020-01-11",
      "changes": [
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix expanded icon not work when `expandRowByClick` is set."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix expanded row width in scaled dom element and border style."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix background color css priority too high to override user customize style."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix `rowSelection` of `fixed` not work."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix fixed columns in Chrome show the vertical scrollbar."
        },
        {
          "component": "Table",
          "type": "fix",
          "description": "- 🐞 Fix crash when columns with empty children."
        },
        {
          "component": "Table",
          "type": "style",
          "description": "💄 Tweak Calendar basic style month drop-down box width and notice items of word order and card mode, select the size of the box. "
        },
        {
          "component": "DatePicker",
          "type": "style",
          "description": "- 💄 Optimize the `border-radius` of the rounded corners connection."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix selected style overlap."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix extra dividing line at the bottom."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "- 🐞 Fix button style for DatePicker's default range. "
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Input not block user input when value is `undefined`."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Carousel card carousel orientation in left / right mode. "
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Grid responsive gutter under SSR initial value of `0`."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix InputNumber, Select and other components icon size."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Badge `z-index` higher than Table fixed columns."
        },
        {
          "component": "DatePicker",
          "type": "style",
          "description": "💄 Tweak font family to be same as tailwindcss."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix TextArea `autoSize` blink in FireFox."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Form.Item not keep error message sync when hit rule changed."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Form.Item add additional feedback style when `hasFeedback` is not set."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Cascader search bug when `fieldNames` is existed and label/value share same name."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Collapse background color with wrong less variable. "
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Slider's Tooltip not follow handle."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Card cover image get skretched."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Typography automatic overflow with `suffix` property. "
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix AutoComplete with customize component with wrong style."
        },
        {
          "component": "DatePicker",
          "type": "fix",
          "description": "🐞 Fix Input.Group to be partial to a pixel in Form."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Export Form interfaces. "
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Table types."
        },
        {
          "component": "TypeScript",
          "type": "fix",
          "description": "- 🐞 Fix Table.Column and Table.ColumnGroup definition."
        }
      ]
    },
    {
      "version": "4.0.0",
      "date": "2020-01-04",
      "changes": [
        {
          "component": "General",
          "type": "style",
          "description": "💄 New dark theme support."
        },
        {
          "component": "General",
          "type": "style",
          "description": "- 💄 Optimized `expand` animation effect."
        },
        {
          "component": "Skeleton",
          "type": "fix",
          "description": "🐞 Fix the display error of Carousel component `dotposition` as`left | right`. "
        },
        {
          "component": "Skeleton",
          "type": "fix",
          "description": "🐞 Fix Alert style text overflow."
        },
        {
          "component": "Skeleton",
          "type": "style",
          "description": "💄 Add `-color-split-popover`、`-icon-hover-color`、`-clear-background`、`-menu-border-color-split`、`-header-border-color-split`、`-to-color`、`-item-hover-bg` and other less variables."
        }
      ]
    }
  ]
}