From 028265d3ba5987df5f13c3e9d42cf76cb1812b2e Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 27 Oct 2022 17:55:08 +0800 Subject: [PATCH] chore: update demo --- components/alert/index.en-US.md | 28 +-- components/alert/index.zh-CN.md | 36 +-- components/config-provider/demo/locale.tsx | 4 +- components/config-provider/index.en-US.md | 38 +-- components/config-provider/index.zh-CN.md | 38 +-- .../date-picker/demo/select-in-range.tsx | 6 +- components/date-picker/index.en-US.md | 192 +++++++-------- components/date-picker/index.zh-CN.md | 192 +++++++-------- components/float-button/index.en-US.md | 46 ++-- components/float-button/index.zh-CN.md | 22 +- components/grid/index.en-US.md | 40 ++-- components/grid/index.zh-CN.md | 40 ++-- components/input/index.en-US.md | 94 ++++---- components/input/index.zh-CN.md | 92 ++++---- components/space/index.en-US.md | 24 +- components/space/index.zh-CN.md | 24 +- components/table/index.en-US.md | 220 +++++++++--------- components/transfer/demo/table-transfer.tsx | 4 +- components/typography/demo/interactive.tsx | 3 +- components/typography/index.en-US.md | 146 ++++++------ components/typography/index.zh-CN.md | 146 ++++++------ 21 files changed, 717 insertions(+), 718 deletions(-) diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md index 03a1cd2885..81c16fcd46 100644 --- a/components/alert/index.en-US.md +++ b/components/alert/index.en-US.md @@ -33,20 +33,20 @@ Alert component for feedback. ## API -| Property | Description | Type | Default | Version | -| ----------- | -------------------------------------------------------------------- | ----------------------- | --------------------------------------------- | ------- | -| action | The action of Alert | ReactNode | - | 4.9.0 | -| afterClose | Called when close animation is finished | () => void | - | | -| banner | Whether to show as banner | boolean | false | | -| closable | Whether Alert can be closed | boolean | - | | -| closeText | Close text to show | ReactNode | - | | -| closeIcon | Custom close icon | ReactNode | `` | 4.18.0 | -| description | Additional content of Alert | ReactNode | - | | -| icon | Custom icon, effective when `showIcon` is true | ReactNode | - | | -| message | Content of Alert | ReactNode | - | | -| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | | -| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` | | -| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| action | The action of Alert | ReactNode | - | 4.9.0 | +| afterClose | Called when close animation is finished | () => void | - | | +| banner | Whether to show as banner | boolean | false | | +| closable | Whether Alert can be closed | boolean | - | | +| closeText | Close text to show | ReactNode | - | | +| closeIcon | Custom close icon | ReactNode | `` | 4.18.0 | +| description | Additional content of Alert | ReactNode | - | | +| icon | Custom icon, effective when `showIcon` is true | ReactNode | - | | +| message | Content of Alert | ReactNode | - | | +| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | | +| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` | | +| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - | | ### Alert.ErrorBoundary diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md index 6f5ada3200..038f23c2f2 100644 --- a/components/alert/index.zh-CN.md +++ b/components/alert/index.zh-CN.md @@ -34,24 +34,24 @@ group: ## API -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | -------------------------------------------------------------------- | ----------------------- | ----------------------------------------- | ------ | -| action | 自定义操作项 | ReactNode | - | 4.9.0 | -| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | | -| banner | 是否用作顶部公告 | boolean | false | | -| closable | 默认不显示关闭按钮 | boolean | - | | -| closeText | 自定义关闭按钮 | ReactNode | - | | -| closeIcon | 自定义关闭 Icon | ReactNode | `` | 4.18.0 | -| description | 警告提示的辅助性文字介绍 | ReactNode | - | | -| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - | | -| message | 警告提示内容 | ReactNode | - | | -| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | | -| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | | -| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| action | 自定义操作项 | ReactNode | - | 4.9.0 | +| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | | +| banner | 是否用作顶部公告 | boolean | false | | +| closable | 默认不显示关闭按钮 | boolean | - | | +| closeText | 自定义关闭按钮 | ReactNode | - | | +| closeIcon | 自定义关闭 Icon | ReactNode | `` | 4.18.0 | +| description | 警告提示的辅助性文字介绍 | ReactNode | - | | +| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - | | +| message | 警告提示内容 | ReactNode | - | | +| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | | +| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | | +| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | | ### Alert.ErrorBoundary -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | -------------------------------------------- | --------- | ----------------- | ---- | -| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | | -| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | | +| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | | diff --git a/components/config-provider/demo/locale.tsx b/components/config-provider/demo/locale.tsx index 44fae48b30..6bf05f0924 100644 --- a/components/config-provider/demo/locale.tsx +++ b/components/config-provider/demo/locale.tsx @@ -16,8 +16,8 @@ import { } from 'antd'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; -import enUS from 'antd/es/locale/en_US'; -import zhCN from 'antd/es/locale/zh_CN'; +import enUS from 'antd/locale/en_US'; +import zhCN from 'antd/locale/zh_CN'; dayjs.locale('en'); diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index a6b12f77f5..1378181dcc 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -45,25 +45,25 @@ Some components use dynamic style to support wave effect. You can config `csp` p ## API -| Property | Description | Type | Default | Version | -| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------- | -| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true | | -| componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 | -| componentSize | Config antd component size | `small` \| `middle` \| `large` | - | | -| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | | -| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | -| 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 | -| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | - | requiredMark: 4.8.0 | -| getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | | -| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 | -| iconPrefixCls | Set icon prefix className (cooperated with [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106)) | string | `anticon` | 4.11.0 | -| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 | -| locale | Language package setting, you can find the packages in [antd/locale](http://unpkg.com/antd/locale/) | object | - | | -| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost: boolean } | true | | -| 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` | | -| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | | -| space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | -| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true | | +| componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 | +| componentSize | Config antd component size | `small` \| `middle` \| `large` | - | | +| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | | +| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | +| 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 | +| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | - | requiredMark: 4.8.0 | +| getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | | +| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 | +| iconPrefixCls | Set icon prefix className (cooperated with [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106)) | string | `anticon` | 4.11.0 | +| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 | +| locale | Language package setting, you can find the packages in [antd/locale](http://unpkg.com/antd/locale/) | object | - | | +| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost: boolean } | true | | +| 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` | | +| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | | +| space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | +| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 | ### ConfigProvider.config() `4.13.0+` diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index eff92f855e..c61190fc52 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -46,25 +46,25 @@ export default () => ( ## API -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------- | -| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | | -| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 | -| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | | -| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | | -| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | -| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 | -| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 | -| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | | -| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 | -| iconPrefixCls | 设置图标统一样式前缀。注意：需要配合 `less` 变量 [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106) 使用 | string | `anticon` | 4.11.0 | -| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 | -| locale | 语言包配置，语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - | | -| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true | | -| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | | -| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | | -| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | -| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | | +| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 | +| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | | +| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | | +| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | +| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 | +| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 | +| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | | +| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 | +| iconPrefixCls | 设置图标统一样式前缀。注意：需要配合 `less` 变量 [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106) 使用 | string | `anticon` | 4.11.0 | +| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 | +| locale | 语言包配置，语言包可到 [antd/locale](http://unpkg.com/antd/locale/) 目录下寻找 | object | - | | +| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true | | +| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | | +| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | | +| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | +| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 | ### ConfigProvider.config() `4.13.0+` diff --git a/components/date-picker/demo/select-in-range.tsx b/components/date-picker/demo/select-in-range.tsx index 1266bb747f..4454bd762f 100644 --- a/components/date-picker/demo/select-in-range.tsx +++ b/components/date-picker/demo/select-in-range.tsx @@ -8,7 +8,6 @@ type RangeValue = [Dayjs | null, Dayjs | null] | null; const App: React.FC = () => { const [dates, setDates] = useState(null); - const [hackValue, setHackValue] = useState(null); const [value, setValue] = useState(null); const disabledDate = (current: Dayjs) => { @@ -22,16 +21,15 @@ const App: React.FC = () => { const onOpenChange = (open: boolean) => { if (open) { - setHackValue([null, null]); setDates([null, null]); } else { - setHackValue(null); + setDates(null); } }; return ( setDates(val)} onChange={val => setValue(val)} diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 13d60ccca0..f2695c393d 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -33,7 +33,7 @@ By clicking the input box, you can select a date from a popup calendar. Controlled Panels Customized Range Picker Suffix -\_InternalPanelDoNotUseOrYouWillBeFired +_InternalPanelDoNotUseOrYouWillBeFired ## API @@ -74,36 +74,36 @@ import locale from 'antd/locale/zh_CN'; The following APIs are shared by DatePicker, RangePicker. -| Property | Description | Type | Default | Version | -| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------- | -| allowClear | Whether to show clear button | boolean | true | | -| autoFocus | If get focus when component mounted | boolean | false | | -| bordered | Whether has border style | boolean | true | | -| className | The picker className | string | - | | -| dateRender | Custom rendering function for date cells | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | | -| disabled | Determine whether the DatePicker is disabled | boolean | false | | -| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - | | -| popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 | -| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | -| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | | -| locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | -| 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` | - | | -| nextIcon | The custom next icon | ReactNode | - | 4.17.0 | -| open | The open state of picker | boolean | - | | -| panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 | -| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 | -| placeholder | The placeholder of date input | string \| \[string,string] | - | | -| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | -| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | | -| prevIcon | The custom prev icon | ReactNode | - | 4.17.0 | -| size | To 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` | - | | -| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | -| style | To customize the style of the input box | CSSProperties | {} | | -| suffixIcon | The custom suffix icon | ReactNode | - | | -| superNextIcon | The custom super next icon | ReactNode | - | 4.17.0 | -| superPrevIcon | The custom super prev icon | ReactNode | - | 4.17.0 | -| onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | | -| onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| allowClear | Whether to show clear button | boolean | true | | +| autoFocus | If get focus when component mounted | boolean | false | | +| bordered | Whether has border style | boolean | true | | +| className | The picker className | string | - | | +| dateRender | Custom rendering function for date cells | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | | +| disabled | Determine whether the DatePicker is disabled | boolean | false | | +| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - | | +| popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 | +| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | +| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | | +| locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | +| 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` | - | | +| nextIcon | The custom next icon | ReactNode | - | 4.17.0 | +| open | The open state of picker | boolean | - | | +| panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 | +| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 | +| placeholder | The placeholder of date input | string \| \[string,string] | - | | +| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | +| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | | +| prevIcon | The custom prev icon | ReactNode | - | 4.17.0 | +| size | To 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` | - | | +| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | +| style | To customize the style of the input box | CSSProperties | {} | | +| suffixIcon | The custom suffix icon | ReactNode | - | | +| superNextIcon | The custom super next icon | ReactNode | - | 4.17.0 | +| superPrevIcon | The custom super prev icon | ReactNode | - | 4.17.0 | +| onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | | +| onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | | ### Common Methods @@ -114,88 +114,88 @@ The following APIs are shared by DatePicker, RangePicker. ### DatePicker -| Property | Description | Type | Default | Version | -| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------- | ------- | -| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | -| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [dayjs](https://day.js.org/) | - | | -| disabledTime | To specify the time that cannot be selected | function(date) | - | | -| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | | -| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | -| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 | -| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | | -| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | -| showToday | Whether to show `Today` button | boolean | true | | -| value | To set date | [dayjs](https://day.js.org/) | - | | -| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | -| onOk | Callback when click ok button | function() | - | | -| onPanelChange | Callback function for panel changing | function(value, mode) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | +| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [dayjs](https://day.js.org/) | - | | +| disabledTime | To specify the time that cannot be selected | function(date) | - | | +| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | | +| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | +| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 | +| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | | +| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | +| showToday | Whether to show `Today` button | boolean | true | | +| value | To set date | [dayjs](https://day.js.org/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | +| onOk | Callback when click ok button | function() | - | | +| onPanelChange | Callback function for panel changing | function(value, mode) | - | | ### DatePicker\[picker=year] -| Property | Description | Type | Default | Version | -| ------------------ | --------------------------------------------------------------------- | ----------------------------------------- | ------- | ------- | -| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | -| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | | -| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY` | | -| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | -| value | To set date | [dayjs](https://day.js.org/) | - | | -| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | +| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | | +| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY` | | +| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | +| value | To set date | [dayjs](https://day.js.org/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | ### DatePicker\[picker=quarter] Added in `4.1.0`. -| Property | Description | Type | Default | Version | -| ------------------ | --------------------------------------------------------------------- | ----------------------------------------- | ---------- | ------- | -| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | -| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | | -| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | | -| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | -| value | To set date | [dayjs](https://day.js.org/) | - | | -| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | +| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | | +| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | | +| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | +| value | To set date | [dayjs](https://day.js.org/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | ### DatePicker\[picker=month] -| Property | Description | Type | Default | Version | -| ------------------ | --------------------------------------------------------------------- | ----------------------------------------- | --------- | ------- | -| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | -| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | | -| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-MM` | | -| monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | | -| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | -| value | To set date | [dayjs](https://day.js.org/) | - | | -| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | +| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | | +| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-MM` | | +| monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | | +| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | +| value | To set date | [dayjs](https://day.js.org/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | ### DatePicker\[picker=week] -| Property | Description | Type | Default | Version | -| ------------------ | --------------------------------------------------------------------- | ----------------------------------------- | --------- | ------- | -| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | -| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | | -| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` | | -| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | -| value | To set date | [dayjs](https://day.js.org/) | - | | -| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | | +| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | | +| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` | | +| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | +| value | To set date | [dayjs](https://day.js.org/) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | ### RangePicker -| Property | Description | Type | Default | Version | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------- | -| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | | -| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - | | -| defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | -| defaultValue | To set default date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | -| disabled | If disable start or end | \[boolean, boolean] | - | | -| disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - | | -| format | To set the date format, refer to [dayjs](https://day.js.org/). 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` | | -| ranges | The preseted ranges for quick selection | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | | -| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | -| separator | Set separator between inputs | React.ReactNode | `` | | -| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | | -| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | -| value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | -| 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: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | -| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | | +| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - | | +| defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | +| defaultValue | To set default date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | +| disabled | If disable start or end | \[boolean, boolean] | - | | +| disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - | | +| format | To set the date format, refer to [dayjs](https://day.js.org/). 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` | | +| ranges | The preseted ranges for quick selection | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | | +| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | +| separator | Set separator between inputs | React.ReactNode | `` | | +| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | | +| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | +| value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | +| 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: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | +| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | | ## FAQ diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index bb5e02e8a9..6f793dd17b 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -34,7 +34,7 @@ demo: 受控面板 自定义日期范围选择 后缀图标 -\_InternalPanelDoNotUseOrYouWillBeFired +_InternalPanelDoNotUseOrYouWillBeFired ## API @@ -75,36 +75,36 @@ import locale from 'antd/locale/zh_CN'; 以下 API 为 DatePicker、 RangePicker 共享的 API。 -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------- | -| allowClear | 是否显示清除按钮 | boolean | true | | -| autoFocus | 自动获取焦点 | boolean | false | | -| bordered | 是否有边框 | boolean | true | | -| className | 选择器 className | string | - | | -| dateRender | 自定义日期单元格的内容 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | | -| disabled | 禁用 | boolean | false | | -| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - | | -| popupClassName | 额外的弹出日历 className | string | - | 4.23.0 | -| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | | -| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | | -| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | -| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | | -| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 | -| open | 控制弹层是否展开 | boolean | - | | -| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 | -| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 | -| placeholder | 输入框提示文字 | string \| \[string, string] | - | | -| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | -| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | | -| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 | -| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | | -| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | -| style | 自定义输入框样式 | CSSProperties | {} | | -| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | -| superNextIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 | -| superPrevIcon | 自定义 `>>` 切换图标 | ReactNode | - | 4.17.0 | -| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | | -| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| allowClear | 是否显示清除按钮 | boolean | true | | +| autoFocus | 自动获取焦点 | boolean | false | | +| bordered | 是否有边框 | boolean | true | | +| className | 选择器 className | string | - | | +| dateRender | 自定义日期单元格的内容 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | | +| disabled | 禁用 | boolean | false | | +| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - | | +| popupClassName | 额外的弹出日历 className | string | - | 4.23.0 | +| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | | +| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | | +| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | +| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | | +| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 | +| open | 控制弹层是否展开 | boolean | - | | +| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 | +| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 | +| placeholder | 输入框提示文字 | string \| \[string, string] | - | | +| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | +| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | | +| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 | +| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | +| style | 自定义输入框样式 | CSSProperties | {} | | +| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | +| superNextIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 | +| superPrevIcon | 自定义 `>>` 切换图标 | ReactNode | - | 4.17.0 | +| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | | +| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | | ### 共同的方法 @@ -115,88 +115,88 @@ import locale from 'antd/locale/zh_CN'; ### DatePicker -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------- | ----- | -| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | -| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [dayjs](https://day.js.org/) | - | | -| disabledTime | 不可选择的时间 | function(date) | - | | -| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | | -| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | -| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 | -| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | | -| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | -| showToday | 是否展示“今天”按钮 | boolean | true | | -| value | 日期 | [dayjs](https://day.js.org/) | - | | -| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | | -| onOk | 点击确定按钮的回调 | function() | - | | -| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | +| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [dayjs](https://day.js.org/) | - | | +| disabledTime | 不可选择的时间 | function(date) | - | | +| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` | | +| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | +| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 | +| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | | +| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | +| showToday | 是否展示“今天”按钮 | boolean | true | | +| value | 日期 | [dayjs](https://day.js.org/) | - | | +| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | | +| onOk | 点击确定按钮的回调 | function() | - | | +| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | | ### DatePicker\[picker=year] -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------------ | ----------------------------------------------------- | ----------------------------------------- | ------ | ---- | -| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | -| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | | -| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY` | | -| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | -| value | 日期 | [dayjs](https://day.js.org/) | - | | -| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | +| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | | +| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY` | | +| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | +| value | 日期 | [dayjs](https://day.js.org/) | - | | +| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | | ### DatePicker\[picker=quarter] `4.1.0` 新增。 -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------------ | ----------------------------------------------------- | ----------------------------------------- | ---------- | ---- | -| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | -| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | | -| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | | -| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | -| value | 日期 | [dayjs](https://day.js.org/) | - | | -| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | +| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | | +| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-\QQ` | | +| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | +| value | 日期 | [dayjs](https://day.js.org/) | - | | +| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | | ### DatePicker\[picker=month] -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------------ | ----------------------------------------------------- | ----------------------------------------- | --------- | ---- | -| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | -| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | | -| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-MM` | | -| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | | -| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | -| value | 日期 | [dayjs](https://day.js.org/) | - | | -| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | +| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | | +| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-MM` | | +| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | | +| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | +| value | 日期 | [dayjs](https://day.js.org/) | - | | +| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | | ### DatePicker\[picker=week] -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------------ | ----------------------------------------------------- | ----------------------------------------- | --------- | ---- | -| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | -| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | | -| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-wo` | | -| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | -| value | 日期 | [dayjs](https://day.js.org/) | - | | -| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | | +| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - | | +| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-wo` | | +| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | +| value | 日期 | [dayjs](https://day.js.org/) | - | | +| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | | ### RangePicker -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ---- | -| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | | -| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - | | -| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - | | -| defaultValue | 默认日期 | [dayjs](https://day.js.org/)\[] | - | | -| disabled | 禁用起始项 | \[boolean, boolean] | - | | -| disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - | | -| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` | | -| ranges | 预设时间范围快捷选择 | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | | -| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | -| separator | 设置分隔符 | React.ReactNode | `` | | -| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | | -| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | -| value | 日期 | [dayjs](https://day.js.org/)\[] | - | | -| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | -| onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | | +| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - | | +| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - | | +| defaultValue | 默认日期 | [dayjs](https://day.js.org/)\[] | - | | +| disabled | 禁用起始项 | \[boolean, boolean] | - | | +| disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - | | +| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` | | +| ranges | 预设时间范围快捷选择 | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | | +| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | +| separator | 设置分隔符 | React.ReactNode | `` | | +| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | | +| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | +| value | 日期 | [dayjs](https://day.js.org/)\[] | - | | +| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | +| onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | | ## FAQ diff --git a/components/float-button/index.en-US.md b/components/float-button/index.en-US.md index 29b85c5453..b610ee9b4b 100644 --- a/components/float-button/index.en-US.md +++ b/components/float-button/index.en-US.md @@ -24,37 +24,37 @@ FloatButton. Available since `5.0.0`. FloatButton Group Menu mode BackTop -\_InternalPanelDoNotUseOrYouWillBeFired +_InternalPanelDoNotUseOrYouWillBeFired ## API ### common API -| Property | Description | Type | Default | Version | -| ----------- | ----------------------------------------- | ---------------------------- | --------- | ------- | -| icon | Set the icon component of button | ReactNode | - | | -| description | Text and other | ReactNode | - | | -| tooltip | The text shown in the tooltip | ReactNode \| () => ReactNode | | | -| type | Setting button type | `default` \| `primary` | `default` | | -| shape | Setting button shape | `circle` \| `square` | `circle` | | -| onClick | Set the handler to handle `click` event | (event) => void | - | | -| href | The target of hyperlink | string | - | | -| target | Specifies where to display the linked URL | string | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| icon | Set the icon component of button | ReactNode | - | | +| description | Text and other | ReactNode | - | | +| tooltip | The text shown in the tooltip | ReactNode \| () => ReactNode | | | +| type | Setting button type | `default` \| `primary` | `default` | | +| shape | Setting button shape | `circle` \| `square` | `circle` | | +| onClick | Set the handler to handle `click` event | (event) => void | - | | +| href | The target of hyperlink | string | - | | +| target | Specifies where to display the linked URL | string | - | | ### FloatButton.Group -| Property | Description | Type | Default | Version | -| ------------ | --------------------------------------------- | ----------------------- | -------- | ------- | -| shape | Setting button shape of children | `circle` \| `square` | `circle` | | -| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | | -| open | Whether the menu is visible or not | boolean | - | | -| onOpenChange | Callback executed when active menu is changed | (open: boolean) => void | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| shape | Setting button shape of children | `circle` \| `square` | `circle` | | +| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | | +| open | Whether the menu is visible or not | boolean | - | | +| onOpenChange | Callback executed when active menu is changed | (open: boolean) => void | - | | ### FloatButton.BackTop -| Property | Description | Type | Default | Version | -| ---------------- | --------------------------------------------------------------------------- | ----------------- | ------------ | ------- | -| duration | Time to return to top（ms） | number | 450 | | -| target | Specifies the scrollable area dom node | () => HTMLElement | () => window | | -| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | | -| onClick | A callback function, which can be executed when you click the button | () => void | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| duration | Time to return to top（ms） | number | 450 | | +| target | Specifies the scrollable area dom node | () => HTMLElement | () => window | | +| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | | +| onClick | A callback function, which can be executed when you click the button | () => void | - | | diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 78a5878915..e53fae3fe6 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -25,22 +25,22 @@ demo: 浮动按钮组 菜单模式 回到顶部 -\_InternalPanelDoNotUseOrYouWillBeFired +_InternalPanelDoNotUseOrYouWillBeFired ## API ### 共同的 API -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | ----------------------------------------------------- | ---------------------------- | --------- | ---- | -| icon | 自定义图标 | ReactNode | - | | -| description | 文字及其它内容 | ReactNode | - | | -| tooltip | 气泡卡片的内容 | ReactNode \| () => ReactNode | - | | -| type | 设置按钮类型 | `default` \| `primary` | `default` | | -| shape | 设置按钮形状 | `circle` \| `square` | `circle` | | -| onClick | 点击按钮时的回调 | (event) => void | - | | -| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | | -| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| icon | 自定义图标 | ReactNode | - | | +| description | 文字及其它内容 | ReactNode | - | | +| tooltip | 气泡卡片的内容 | ReactNode \| () => ReactNode | - | | +| type | 设置按钮类型 | `default` \| `primary` | `default` | | +| shape | 设置按钮形状 | `circle` \| `square` | `circle` | | +| onClick | 点击按钮时的回调 | (event) => void | - | | +| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | | +| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | | ### FloatButton.Group diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index 21689e2222..4b028d57bc 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -58,29 +58,29 @@ If the Ant Design grid layout component does not meet your needs, you can use th ### Row -| Property | Description | Type | Default | Version | -| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------- | -| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 | -| 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 | | -| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 | -| wrap | Auto wrap line | boolean | true | 4.8.0 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 | +| 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 | | +| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 | +| wrap | Auto wrap line | boolean | true | 4.8.0 | ### Col -| Property | Description | Type | Default | Version | -| -------- | ------------------------------------------------------------------------------------------------------ | ---------------- | ------- | ------- | -| flex | Flex layout style | string \| number | - | | -| offset | The number of cells to offset Col from the left | number | 0 | | -| order | Raster order | number | 0 | | -| pull | The number of cells that raster is moved to the left | number | 0 | | -| push | The number of cells that raster is moved to the right | number | 0 | | -| span | Raster number of cells to occupy, 0 corresponds to `display: none` | number | none | | -| xs | `screen < 576px` and also default setting, could be a `span` value or an object containing above props | number \| object | - | | -| sm | `screen ≥ 576px`, could be a `span` value or an object containing above props | number \| object | - | | -| md | `screen ≥ 768px`, could be a `span` value or an object containing above props | number \| object | - | | -| lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \| object | - | | -| xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \| object | - | | -| xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \| object | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| flex | Flex layout style | string \| number | - | | +| offset | The number of cells to offset Col from the left | number | 0 | | +| order | Raster order | number | 0 | | +| pull | The number of cells that raster is moved to the left | number | 0 | | +| push | The number of cells that raster is moved to the right | number | 0 | | +| span | Raster number of cells to occupy, 0 corresponds to `display: none` | number | none | | +| xs | `screen < 576px` and also default setting, could be a `span` value or an object containing above props | number \| object | - | | +| sm | `screen ≥ 576px`, could be a `span` value or an object containing above props | number \| object | - | | +| md | `screen ≥ 768px`, could be a `span` value or an object containing above props | number \| object | - | | +| lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \| object | - | | +| xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \| object | - | | +| xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \| object | - | | The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`). diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index f198ddde8b..8a42cf7324 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -57,29 +57,29 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用 ### Row -| 成员 | 说明 | 类型 | 默认值 | 版本 | -| ------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------- | -| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 | -| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | | -| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 | -| wrap | 是否自动换行 | boolean | true | 4.8.0 | +| 成员 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | object: 4.24.0 | +| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | | +| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | object: 4.24.0 | +| wrap | 是否自动换行 | boolean | true | 4.8.0 | ### Col -| 成员 | 说明 | 类型 | 默认值 | 版本 | -| ------ | -------------------------------------------------------------- | ---------------- | ------ | ---- | -| flex | flex 布局属性 | string \| number | - | | -| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | | -| order | 栅格顺序 | number | 0 | | -| pull | 栅格向左移动格数 | number | 0 | | -| push | 栅格向右移动格数 | number | 0 | | -| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | | -| xs | `屏幕 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | -| sm | `屏幕 ≥ 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | -| md | `屏幕 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | -| lg | `屏幕 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | -| xl | `屏幕 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | -| xxl | `屏幕 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | +| 成员 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| flex | flex 布局属性 | string \| number | - | | +| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | | +| order | 栅格顺序 | number | 0 | | +| pull | 栅格向左移动格数 | number | 0 | | +| push | 栅格向右移动格数 | number | 0 | | +| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | | +| xs | `屏幕 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | +| sm | `屏幕 ≥ 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | +| md | `屏幕 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | +| lg | `屏幕 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | +| xl | `屏幕 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | +| xxl | `屏幕 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。 diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index 1f2482166e..dff85226e7 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -42,25 +42,25 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca ### Input -| Property | Description | Type | Default | Version | -| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------- | -| addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | | -| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | | -| allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false | | -| bordered | Whether has border style | boolean | true | 4.5.0 | -| defaultValue | The initial input content | string | - | | -| disabled | Whether the input is disabled | boolean | false | | -| id | The ID for input | string | - | | -| maxLength | The max length | number | - | | -| showCount | Whether show text count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 | -| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | -| prefix | The prefix icon for the Input | ReactNode | - | | -| size | The size of the input box. Note: in the context of a form, the `middle` size is used | `large` \| `middle` \| `small` | - | | -| suffix | The suffix icon for the Input | ReactNode | - | | -| 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` | | -| value | The input content value | string | - | | -| onChange | Callback when user input | function(e) | - | | -| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | | +| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | | +| allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false | | +| bordered | Whether has border style | boolean | true | 4.5.0 | +| defaultValue | The initial input content | string | - | | +| disabled | Whether the input is disabled | boolean | false | | +| id | The ID for input | string | - | | +| maxLength | The max length | number | - | | +| showCount | Whether show text count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 | +| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | +| prefix | The prefix icon for the Input | ReactNode | - | | +| size | The size of the input box. Note: in the context of a form, the `middle` size is used | `large` \| `middle` \| `small` | - | | +| suffix | The suffix icon for the Input | ReactNode | - | | +| 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` | | +| value | The input content value | string | - | | +| onChange | Callback when user input | function(e) | - | | +| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | | > 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. @@ -68,36 +68,36 @@ The rest of the props of Input are exactly the same as the original [input](http ### Input.TextArea -| Property | Description | Type | Default | Version | -| ------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------ | -| allowClear | If allow to remove input content with clear icon | boolean | false | | -| autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | | -| bordered | Whether has border style | boolean | true | 4.5.0 | -| defaultValue | The initial input content | string | - | | -| maxLength | The max length | number | - | 4.7.0 | -| showCount | Whether show text count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 | -| value | The input content value | string | - | | -| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | | -| onResize | The callback function that is triggered when resize | function({ width, height }) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| allowClear | If allow to remove input content with clear icon | boolean | false | | +| autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | | +| bordered | Whether has border style | boolean | true | 4.5.0 | +| defaultValue | The initial input content | string | - | | +| maxLength | The max length | number | - | 4.7.0 | +| showCount | Whether show text count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 | +| value | The input content value | string | - | | +| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | | +| onResize | The callback function that is triggered when resize | function({ width, height }) | - | | The 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). #### Input.Search -| Property | Description | Type | Default | -| ----------- | -------------------------------------------------------------------------------------------------------- | ---------------------- | ------- | -| enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false | -| loading | Search box with loading | boolean | false | -| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false | +| loading | Search box with loading | boolean | false | +| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - | Supports all props of `Input`. #### Input.Group -| Property | Description | Type | Default | -| -------- | ----------------------------------------------------------------------------------------------------------------- | ------- | --------- | -| compact | Whether use compact style | boolean | false | -| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| compact | Whether use compact style | boolean | false | +| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` | ```jsx @@ -108,17 +108,17 @@ Supports all props of `Input`. #### Input.Password -| Property | Description | Type | Default | Version | -| ---------------- | -------------------------- | ---------------------- | ------------------------------------------------------------------------- | ------- | -| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 | -| visibilityToggle | Whether show toggle button | boolean | true | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 | +| visibilityToggle | Whether show toggle button | boolean | true | | #### Input Methods -| Name | Description | Parameters | Version | -| ----- | ------------ | -------------------------------------------------------------------------- | --------------- | -| blur | Remove focus | - | | -| focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 | +| Name | Description | Parameters | Version | +| --- | --- | --- | --- | +| blur | Remove focus | - | | +| focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 | ## FAQ diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 961d9fa25c..43bf578b03 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -43,25 +43,25 @@ demo: ### Input -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------ | ------------------------- | -| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | | -| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | | -| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | | -| bordered | 是否有边框 | boolean | true | 4.5.0 | -| defaultValue | 输入框默认内容 | string | - | | -| disabled | 是否禁用状态，默认为 false | boolean | false | | -| id | 输入框的 id | string | - | | -| maxLength | 最大长度 | number | - | | -| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 | -| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | -| prefix | 带有前缀图标的 input | ReactNode | - | | -| size | 控件大小。注：标准表单内的输入框大小限制为 `middle` | `large` \| `middle` \| `small` | - | | -| suffix | 带有后缀图标的 input | ReactNode | - | | -| type | 声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type="textarea"`) | string | `text` | | -| value | 输入框内容 | string | - | | -| onChange | 输入框内容变化时的回调 | function(e) | - | | -| onPressEnter | 按下回车的回调 | function(e) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | | +| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | | +| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | | +| bordered | 是否有边框 | boolean | true | 4.5.0 | +| defaultValue | 输入框默认内容 | string | - | | +| disabled | 是否禁用状态，默认为 false | boolean | false | | +| id | 输入框的 id | string | - | | +| maxLength | 最大长度 | number | - | | +| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 | +| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | +| prefix | 带有前缀图标的 input | ReactNode | - | | +| size | 控件大小。注：标准表单内的输入框大小限制为 `middle` | `large` \| `middle` \| `small` | - | | +| suffix | 带有后缀图标的 input | ReactNode | - | | +| type | 声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type="textarea"`) | string | `text` | | +| value | 输入框内容 | string | - | | +| onChange | 输入框内容变化时的回调 | function(e) | - | | +| onPressEnter | 按下回车的回调 | function(e) | - | | > 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。 @@ -69,36 +69,36 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el ### Input.TextArea -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------ | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------ | ------------------------------------------ | -| allowClear | 可以点击清除图标删除内容 | boolean | false | | -| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | | -| bordered | 是否有边框 | boolean | true | 4.5.0 | -| defaultValue | 输入框默认内容 | string | - | | -| maxLength | 内容最大长度 | number | - | 4.7.0 | -| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 | -| value | 输入框内容 | string | - | | -| onPressEnter | 按下回车的回调 | function(e) | - | | -| onResize | resize 回调 | function({ width, height }) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| allowClear | 可以点击清除图标删除内容 | boolean | false | | +| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | | +| bordered | 是否有边框 | boolean | true | 4.5.0 | +| defaultValue | 输入框默认内容 | string | - | | +| maxLength | 内容最大长度 | number | - | 4.7.0 | +| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 | +| value | 输入框内容 | string | - | | +| onPressEnter | 按下回车的回调 | function(e) | - | | +| onResize | resize 回调 | function({ width, height }) | - | | `Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。 #### Input.Search -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | -------------------------------------------------------------- | ---------------------- | ------ | -| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false | -| loading | 搜索 loading | boolean | false | -| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false | +| loading | 搜索 loading | boolean | false | +| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - | 其余属性和 Input 一致。 #### Input.Group -| 参数 | 说明 | 类型 | 默认值 | -| ------- | --------------------------------------------------------------------- | ------- | --------- | -| compact | 是否用紧凑模式 | boolean | false | -| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| compact | 是否用紧凑模式 | boolean | false | +| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` | ```jsx @@ -109,16 +109,16 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el #### Input.Password -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ---------------- | ---------------- | ---------------------- | ------------------------------------------------------------------------- | ----- | -| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 | -| visibilityToggle | 是否显示切换按钮 | boolean | true | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 | +| visibilityToggle | 是否显示切换按钮 | boolean | true | | #### Input Methods -| 名称 | 说明 | 参数 | 版本 | -| ----- | -------- | -------------------------------------------------------------------------- | --------------- | -| blur | 取消焦点 | - | | +| 名称 | 说明 | 参数 | 版本 | +| --- | --- | --- | --- | +| blur | 取消焦点 | - | | | focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 | ## FAQ diff --git a/components/space/index.en-US.md b/components/space/index.en-US.md index 2c26d50138..b1cbf7c2e5 100644 --- a/components/space/index.en-US.md +++ b/components/space/index.en-US.md @@ -33,13 +33,13 @@ Set components spacing. ## API -| Property | Description | Type | Default | Version | -| --------- | ------------------------------------------- | ---------------------------------------- | ------------ | --------------------- | -| align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 | -| direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 | -| size | The space size | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 | -| split | Set split | ReactNode | - | 4.7.0 | -| wrap | Auto wrap line, when `horizontal` effective | boolean | false | 4.9.0 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 | +| direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 | +| size | The space size | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 | +| split | Set split | ReactNode | - | 4.7.0 | +| wrap | Auto wrap line, when `horizontal` effective | boolean | false | 4.9.0 | ### Size @@ -58,8 +58,8 @@ Use Space.Compact when child form components are compactly connected and the bor - TimePicker - TreeSelect -| Property | Description | Type | Default | Version | -| --------- | ------------------------------------------ | ------------------------------ | ------------ | ------- | -| block | Option to fit width to its parent\'s width | boolean | false | 4.24.0 | -| direction | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | 4.24.0 | -| size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.24.0 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| block | Option to fit width to its parent\'s width | boolean | false | 4.24.0 | +| direction | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | 4.24.0 | +| size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.24.0 | diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md index a5d83eac42..01a3807ede 100644 --- a/components/space/index.zh-CN.md +++ b/components/space/index.zh-CN.md @@ -39,13 +39,13 @@ demo: ### Space -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | -------------------------------------- | ---------------------------------------- | ------------ | --------------------- | -| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 | -| direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 | -| size | 间距大小 | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 | -| split | 设置拆分 | ReactNode | - | 4.7.0 | -| wrap | 是否自动换行，仅在 `horizontal` 时有效 | boolean | false | 4.9.0 | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 | +| direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 | +| size | 间距大小 | [Size](#Size) \| [Size\[\]](#Size) | `small` | 4.1.0 \| Array: 4.9.0 | +| split | 设置拆分 | ReactNode | - | 4.7.0 | +| wrap | 是否自动换行，仅在 `horizontal` 时有效 | boolean | false | 4.9.0 | ### Size @@ -66,8 +66,8 @@ demo: - TimePicker - TreeSelect -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ---------------------------- | ------------------------------ | ------------ | ------ | -| block | 将宽度调整为父元素宽度的选项 | boolean | false | 4.24.0 | -| direction | 指定排列方向 | `vertical` \| `horizontal` | `horizontal` | 4.24.0 | -| size | 子组件大小 | `large` \| `middle` \| `small` | `middle` | 4.24.0 | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| block | 将宽度调整为父元素宽度的选项 | boolean | false | 4.24.0 | +| direction | 指定排列方向 | `vertical` \| `horizontal` | `horizontal` | 4.24.0 | +| size | 子组件大小 | `large` \| `middle` \| `small` | `middle` | 4.24.0 | diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index bde77f83ba..212e5221e5 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -108,33 +108,33 @@ const columns = [ ### Table -| Property | Description | Type | Default | Version | -| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -| bordered | Whether to show all table borders | boolean | false | | -| columns | Columns of table | [ColumnsType](#Column)\[] | - | | -| components | Override default table elements | [TableComponents](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129) | - | | -| dataSource | Data record array to be displayed | object\[] | - | | -| expandable | Config expandable content | [expandable](#expandable) | - | | -| footer | Table footer renderer | function(currentPageData) | - | | -| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | | -| loading | Loading status of table | boolean \| [Spin Props](/components/spin/#API) | false | | -| locale | The i18n text including filter, sort, empty text, etc | object | [Default Value](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/en_US.tsx#L19-L37) | | -| 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 | - | | -| rowClassName | Row's className | function(record, index): string | - | | -| rowKey | Row's unique key, could be a string or function that returns a string | string \| function(record): string | `key` | | -| rowSelection | Row selection [config](#rowSelection) | object | - | | -| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | | -| showHeader | Whether to show table header | boolean | true | | -| showSorterTooltip | The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object | boolean \| [Tooltip props](/components/tooltip/#API) | true | | -| size | Size of table | `default` \| `middle` \| `small` | `default` | | -| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | -| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) | -| summary | Summary content | (currentData) => ReactNode | - | | -| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -
`fixed` when header/columns are fixed, or using `column.ellipsis` | | -| title | Table title renderer | function(currentPageData) | - | | -| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: \[], action: `paginate` \| `sort` \| `filter` }) | - | | -| onHeaderRow | Set props on per header row | function(columns, index) | - | | -| onRow | Set props on per row | function(record, index) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| bordered | Whether to show all table borders | boolean | false | | +| columns | Columns of table | [ColumnsType](#Column)\[] | - | | +| components | Override default table elements | [TableComponents](https://github.com/react-component/table/blob/75ee0064e54a4b3215694505870c9d6c817e9e4a/src/interface.ts#L129) | - | | +| dataSource | Data record array to be displayed | object\[] | - | | +| expandable | Config expandable content | [expandable](#expandable) | - | | +| footer | Table footer renderer | function(currentPageData) | - | | +| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | | +| loading | Loading status of table | boolean \| [Spin Props](/components/spin/#API) | false | | +| locale | The i18n text including filter, sort, empty text, etc | object | [Default Value](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/en_US.tsx#L19-L37) | | +| 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 | - | | +| rowClassName | Row's className | function(record, index): string | - | | +| rowKey | Row's unique key, could be a string or function that returns a string | string \| function(record): string | `key` | | +| rowSelection | Row selection [config](#rowSelection) | object | - | | +| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | | +| showHeader | Whether to show table header | boolean | true | | +| showSorterTooltip | The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object | boolean \| [Tooltip props](/components/tooltip/#API) | true | | +| size | Size of table | `default` \| `middle` \| `small` | `default` | | +| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | +| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) | +| summary | Summary content | (currentData) => ReactNode | - | | +| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -
`fixed` when header/columns are fixed, or using `column.ellipsis` | | +| title | Table title renderer | function(currentPageData) | - | | +| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: \[], action: `paginate` \| `sort` \| `filter` }) | - | | +| onHeaderRow | Set props on per header row | function(columns, index) | - | | +| onRow | Set props on per row | function(record, index) | - | | #### onRow usage @@ -163,40 +163,40 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell` One of the Table `columns` prop for describing the table's columns, Column has the same API. -| Property | Description | Type | Default | Version | -| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------ | -| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | | -| className | The className of this column | string | - | | -| colSpan | Span of this column's title | number | - | | -| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | | -| defaultFilteredValue | Default filtered values | string\[] | - | | -| filterResetToDefaultFilteredValue | click the reset button, whether to restore the default filter | boolean | false | | -| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | | -| ellipsis | The ellipsis cell content, not working with sorter and filters for now.
tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 | -| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | | -| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | | -| filtered | Whether the `dataSource` is filtered | boolean | false | | -| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | | -| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | | -| filterMultiple | Whether multiple filters can be selected | boolean | true | | -| filterMode | To specify the filter interface | 'menu' \| 'tree' | 'menu' | 4.17.0 | -| filterSearch | Whether to be searchable for filter menu | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 | -| filters | Filter menu config | object\[] | - | | -| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | | -| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | | -| render | Renderer of the table cell. The return value should be a ReactNode | function(text, record, index) {} | - | | -| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 | -| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 | -| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) | true | | -| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | -| 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 | - | | -| sortOrder | Order of sorted values: `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | | -| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | | -| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | | -| onCell | Set props on per cell | function(record, rowIndex) | - | | -| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | | -| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(visible) {} | - | | -| onHeaderCell | Set props on per header cell | function(column) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | | +| className | The className of this column | string | - | | +| colSpan | Span of this column's title | number | - | | +| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | | +| defaultFilteredValue | Default filtered values | string\[] | - | | +| filterResetToDefaultFilteredValue | click the reset button, whether to restore the default filter | boolean | false | | +| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | | +| ellipsis | The ellipsis cell content, not working with sorter and filters for now.
tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 | +| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - | | +| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | | +| filtered | Whether the `dataSource` is filtered | boolean | false | | +| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | | +| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | | +| filterMultiple | Whether multiple filters can be selected | boolean | true | | +| filterMode | To specify the filter interface | 'menu' \| 'tree' | 'menu' | 4.17.0 | +| filterSearch | Whether to be searchable for filter menu | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 | +| filters | Filter menu config | object\[] | - | | +| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | | +| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | | +| render | Renderer of the table cell. The return value should be a ReactNode | function(text, record, index) {} | - | | +| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 | +| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 | +| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) | true | | +| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | +| 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 | - | | +| sortOrder | Order of sorted values: `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | | +| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | | +| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | | +| onCell | Set props on per cell | function(record, rowIndex) | - | | +| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | | +| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(visible) {} | - | | +| onHeaderCell | Set props on per header cell | function(column) | - | | ### ColumnGroup @@ -208,8 +208,8 @@ One of the Table `columns` prop for describing the table's columns, Column has t Properties for pagination. -| Property | Description | Type | Default | -| -------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----- | ---------------- | +| Property | Description | Type | Default | +| --- | --- | --- | --- | | position | Specify the position of `Pagination`, could be`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight`] | More about pagination, please check [`Pagination`](/components/pagination/). @@ -218,64 +218,64 @@ More about pagination, please check [`Pagination`](/components/pagination/). Properties for expandable. -| Property | Description | Type | Default | Version | -| ---------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------- | ------- | -| childrenColumnName | The column contains children to display | string | children | | -| columnTitle | Set the title of the expand column | ReactNode | - | 4.23.0 | -| columnWidth | Set the width of the expand column | string \| number | - | | -| defaultExpandAllRows | Expand all rows initially | boolean | false | | -| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | | -| expandedRowClassName | Expanded row's className | function(record, index, indent): string | - | | -| expandedRowKeys | Current expanded row keys | string\[] | - | | -| expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - | | -| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - | | -| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false | | -| fixed | Whether the expansion icon is fixed. Optional true `left` `right` | boolean \| string | false | 4.16.0 | -| indentSize | Indent size in pixels of tree data | number | 15 | | -| rowExpandable | Enable row can be expandable | (record) => boolean | - | | -| showExpandColumn | Show expand column | boolean | true | 4.18.0 | -| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - | | -| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| childrenColumnName | The column contains children to display | string | children | | +| columnTitle | Set the title of the expand column | ReactNode | - | 4.23.0 | +| columnWidth | Set the width of the expand column | string \| number | - | | +| defaultExpandAllRows | Expand all rows initially | boolean | false | | +| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | | +| expandedRowClassName | Expanded row's className | function(record, index, indent): string | - | | +| expandedRowKeys | Current expanded row keys | string\[] | - | | +| expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - | | +| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - | | +| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false | | +| fixed | Whether the expansion icon is fixed. Optional true `left` `right` | boolean \| string | false | 4.16.0 | +| indentSize | Indent size in pixels of tree data | number | 15 | | +| rowExpandable | Enable row can be expandable | (record) => boolean | - | | +| showExpandColumn | Show expand column | boolean | true | 4.18.0 | +| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - | | +| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - | | ### rowSelection Properties for row selection. -| Property | Description | Type | Default | Version | -| ----------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------- | ---------- | ------------------- | -| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 | -| columnTitle | Set the title of the selection column | ReactNode | - | | -| columnWidth | Set the width of the selection column | string \| number | `32px` | | -| fixed | Fixed selection column on the left | boolean | - | | -| getCheckboxProps | Get Checkbox or Radio props | function(record) | - | | -| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 4.3.0 | -| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 4.4.0 | -| renderCell | Renderer of the table cell. Same as `render` in column | function(checked, record, index, originNode) {} | - | 4.1.0 | -| selectedRowKeys | Controlled selected row keys | string\[] \| number\[] | \[] | | -| selections | Custom selection [config](#selection), only displays default selections when set to `true` | object\[] \| boolean | - | | -| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | | -| onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows, info: { type }) | - | `info.type`: 4.21.0 | -| onSelect | Callback executed when select/deselect one row | function(record, selected, selectedRows, nativeEvent) | - | | -| onSelectAll | Callback executed when select/deselect all rows | function(selected, selectedRows, changeRows) | - | | -| onSelectInvert | Callback executed when row selection is inverted | function(selectedRowKeys) | - | | -| onSelectNone | Callback executed when row selection is cleared | function() | - | | -| onSelectMultiple | Callback executed when row selection is changed by pressing shift | function(selected, selectedRows, changeRows) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 | +| columnTitle | Set the title of the selection column | ReactNode | - | | +| columnWidth | Set the width of the selection column | string \| number | `32px` | | +| fixed | Fixed selection column on the left | boolean | - | | +| getCheckboxProps | Get Checkbox or Radio props | function(record) | - | | +| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 4.3.0 | +| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 4.4.0 | +| renderCell | Renderer of the table cell. Same as `render` in column | function(checked, record, index, originNode) {} | - | 4.1.0 | +| selectedRowKeys | Controlled selected row keys | string\[] \| number\[] | \[] | | +| selections | Custom selection [config](#selection), only displays default selections when set to `true` | object\[] \| boolean | - | | +| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | | +| onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows, info: { type }) | - | `info.type`: 4.21.0 | +| onSelect | Callback executed when select/deselect one row | function(record, selected, selectedRows, nativeEvent) | - | | +| onSelectAll | Callback executed when select/deselect all rows | function(selected, selectedRows, changeRows) | - | | +| onSelectInvert | Callback executed when row selection is inverted | function(selectedRowKeys) | - | | +| onSelectNone | Callback executed when row selection is cleared | function() | - | | +| onSelectMultiple | Callback executed when row selection is changed by pressing shift | function(selected, selectedRows, changeRows) | - | | ### scroll -| Property | Description | Type | Default | -| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------- | -| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | -| 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) | string \| number \| true | - | -| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number | string \| number | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | +| 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) | string \| number \| true | - | +| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number | string \| number | - | ### selection -| Property | Description | Type | Default | -| -------- | ------------------------------------------------ | --------------------------- | ------- | -| key | Unique key of this selection | string | - | -| text | Display text of this selection | ReactNode | - | -| onSelect | Callback executed when this selection is clicked | function(changeableRowKeys) | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| key | Unique key of this selection | string | - | +| text | Display text of this selection | ReactNode | - | +| onSelect | Callback executed when this selection is clicked | function(changeableRowKeys) | - | ## Using in TypeScript diff --git a/components/transfer/demo/table-transfer.tsx b/components/transfer/demo/table-transfer.tsx index 40a931e561..be6107a35d 100644 --- a/components/transfer/demo/table-transfer.tsx +++ b/components/transfer/demo/table-transfer.tsx @@ -13,9 +13,11 @@ interface RecordType { } interface DataType { + key: string; title: string; - tag: string; description: string; + disabled: boolean; + tag: string; } interface TableTransferProps extends TransferProps { diff --git a/components/typography/demo/interactive.tsx b/components/typography/demo/interactive.tsx index e211f1bba6..d7056a69b2 100644 --- a/components/typography/demo/interactive.tsx +++ b/components/typography/demo/interactive.tsx @@ -71,8 +71,7 @@ const App: React.FC = () => { > {customIconStr} - Trigger edit with:{' '} - setChooseTrigger(radioToState(e.target.value))} value={stateToRadio()} > diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index c641c66cf8..241aeb110d 100644 --- a/components/typography/index.en-US.md +++ b/components/typography/index.en-US.md @@ -30,55 +30,55 @@ Basic text writing, including headings, body text, lists, and more. ### Typography.Text -| Property | Description | Type | Default | Version | -| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------- | --------------------- | -| code | Code style | boolean | false | | -| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | -| delete | Deleted line style | boolean | false | | -| disabled | Disabled content | boolean | false | | -| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) | -| ellipsis | Display ellipsis when text overflows，can't configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually | boolean \| [Omit](#ellipsis) | false | [ellipsis](#ellipsis) | -| keyboard | Keyboard style | boolean | false | 4.3.0 | -| mark | Marked style | boolean | false | | -| onClick | Set the handler to handle click event | (event) => void | - | | -| strong | Bold style | boolean | false | | -| italic | Italic style | boolean | false | 4.16.0 | -| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | -| underline | Underlined style | boolean | false | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| code | Code style | boolean | false | | +| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | +| delete | Deleted line style | boolean | false | | +| disabled | Disabled content | boolean | false | | +| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | Display ellipsis when text overflows，can't configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually | boolean \| [Omit](#ellipsis) | false | [ellipsis](#ellipsis) | +| keyboard | Keyboard style | boolean | false | 4.3.0 | +| mark | Marked style | boolean | false | | +| onClick | Set the handler to handle click event | (event) => void | - | | +| strong | Bold style | boolean | false | | +| italic | Italic style | boolean | false | 4.16.0 | +| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | +| underline | Underlined style | boolean | false | | ### Typography.Title -| Property | Description | Type | Default | Version | -| --------- | --------------------------------------------------------------------------------------- | ------------------------------------------------- | ------- | --------------------- | -| code | Code style | boolean | false | | -| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | -| delete | Deleted line style | boolean | false | | -| disabled | Disabled content | boolean | false | | -| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) | -| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | -| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 | -| mark | Marked style | boolean | false | | -| onClick | Set the handler to handle click event | (event) => void | - | | -| italic | Italic style | boolean | false | 4.16.0 | -| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | -| underline | Underlined style | boolean | false | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| code | Code style | boolean | false | | +| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | +| delete | Deleted line style | boolean | false | | +| disabled | Disabled content | boolean | false | | +| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | +| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 | +| mark | Marked style | boolean | false | | +| onClick | Set the handler to handle click event | (event) => void | - | | +| italic | Italic style | boolean | false | 4.16.0 | +| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | +| underline | Underlined style | boolean | false | | ### Typography.Paragraph -| Property | Description | Type | Default | Version | -| --------- | --------------------------------------------------------------------------------------- | ------------------------------------------------- | ------- | --------------------- | -| code | Code style | boolean | false | | -| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | -| delete | Deleted line style | boolean | false | | -| disabled | Disabled content | boolean | false | | -| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) | -| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | -| mark | Marked style | boolean | false | | -| onClick | Set the handler to handle click event | (event) => void | - | | -| strong | Bold style | boolean | false | | -| italic | Italic style | boolean | false | 4.16.0 | -| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | -| underline | Underlined style | boolean | false | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| code | Code style | boolean | false | | +| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | +| delete | Deleted line style | boolean | false | | +| disabled | Disabled content | boolean | false | | +| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | +| mark | Marked style | boolean | false | | +| onClick | Set the handler to handle click event | (event) => void | - | | +| strong | Bold style | boolean | false | | +| italic | Italic style | boolean | false | 4.16.0 | +| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | +| underline | Underlined style | boolean | false | | ### copyable @@ -90,13 +90,13 @@ Basic text writing, including headings, body text, lists, and more. format: 'text/plain' | 'text/html', } -| Property | Description | Type | Default | Version | -| -------- | ------------------------------------------ | --------------------------- | ------------------- | ------- | -| format | The Mime Type of the text | 'text/plain' \| 'text/html' | - | 4.21.0 | -| icon | Custom copy icon: \[copyIcon, copiedIcon] | \[ReactNode, ReactNode] | - | 4.6.0 | -| text | The text to copy | string | - | | -| tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode] | \[`Copy`, `Copied`] | 4.4.0 | -| onCopy | Called when copied text | function | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| format | The Mime Type of the text | 'text/plain' \| 'text/html' | - | 4.21.0 | +| icon | Custom copy icon: \[copyIcon, copiedIcon] | \[ReactNode, ReactNode] | - | 4.6.0 | +| text | The text to copy | string | - | | +| tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode] | \[`Copy`, `Copied`] | 4.4.0 | +| onCopy | Called when copied text | function | - | | ### editable @@ -115,20 +115,20 @@ Basic text writing, including headings, body text, lists, and more. enterIcon: ReactNode, } -| Property | Description | Type | Default | Version | -| ----------- | -------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------- | ------- | -| autoSize | `autoSize` attribute of textarea | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 | -| editing | Whether to be editable | boolean | false | | -| icon | Custom editable icon | ReactNode | <EditOutlined /> | 4.6.0 | -| maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 | -| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 | -| text | Edit text, specify the editing content instead of using the children implicitly | string | - | 4.24.0 | -| onChange | Called when input at textarea | function(value: string) | - | | -| onCancel | Called when type ESC to exit editable state | function | - | | -| onStart | Called when enter editable state | function | - | | -| onEnd | Called when type ENTER to exit editable state | function | - | 4.14.0 | -| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array<`icon`\|`text`> | \[`icon`] | | -| enterIcon | Custom "enter" icon in the edit field (passing `null` removes the icon) | ReactNode | `` | 4.17.0 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| autoSize | `autoSize` attribute of textarea | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 | +| editing | Whether to be editable | boolean | false | | +| icon | Custom editable icon | ReactNode | <EditOutlined /> | 4.6.0 | +| maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 | +| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 | +| text | Edit text, specify the editing content instead of using the children implicitly | string | - | 4.24.0 | +| onChange | Called when input at textarea | function(value: string) | - | | +| onCancel | Called when type ESC to exit editable state | function | - | | +| onStart | Called when enter editable state | function | - | | +| onEnd | Called when type ENTER to exit editable state | function | - | 4.14.0 | +| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array<`icon`\|`text`> | \[`icon`] | | +| enterIcon | Custom "enter" icon in the edit field (passing `null` removes the icon) | ReactNode | `` | 4.17.0 | ### ellipsis @@ -142,15 +142,15 @@ Basic text writing, including headings, body text, lists, and more. onEllipsis: function(ellipsis), } -| Property | Description | Type | Default | Version | -| ---------- | ----------------------------------------- | ---------------------------------------------------------------- | -------- | ------- | -| expandable | Whether to be expandable | boolean | - | | -| rows | Max rows of content | number | - | | -| suffix | Suffix of ellipsis content | string | - | | -| symbol | Custom description of ellipsis | ReactNode | `Expand` | | -| tooltip | Show tooltip when ellipsis | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#API) | - | 4.11.0 | -| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 | -| onExpand | Called when expand content | function(event) | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| expandable | Whether to be expandable | boolean | - | | +| rows | Max rows of content | number | - | | +| suffix | Suffix of ellipsis content | string | - | | +| symbol | Custom description of ellipsis | ReactNode | `Expand` | | +| tooltip | Show tooltip when ellipsis | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#API) | - | 4.11.0 | +| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 | +| onExpand | Called when expand content | function(event) | - | | ## FAQ diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index 2b79783310..080d0c3e08 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -31,55 +31,55 @@ demo: ### Typography.Text -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------ | --------------------- | -| code | 添加代码样式 | boolean | false | | -| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | -| delete | 添加删除线样式 | boolean | false | | -| disabled | 禁用文本 | boolean | false | | -| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | -| ellipsis | 自动溢出省略，为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.Paragraph，Text 组件自身不带 100% 宽度样式，因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度，请手工配置宽度样式 | boolean \| [Omit](#ellipsis) | false | [ellipsis](#ellipsis) | -| keyboard | 添加键盘样式 | boolean | false | 4.3.0 | -| mark | 添加标记样式 | boolean | false | | -| onClick | 点击 Text 时的回调 | (event) => void | - | | -| strong | 是否加粗 | boolean | false | | -| italic | 是否斜体 | boolean | false | 4.16.0 | -| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | -| underline | 添加下划线样式 | boolean | false | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| code | 添加代码样式 | boolean | false | | +| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | +| delete | 添加删除线样式 | boolean | false | | +| disabled | 禁用文本 | boolean | false | | +| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | 自动溢出省略，为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.Paragraph，Text 组件自身不带 100% 宽度样式，因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度，请手工配置宽度样式 | boolean \| [Omit](#ellipsis) | false | [ellipsis](#ellipsis) | +| keyboard | 添加键盘样式 | boolean | false | 4.3.0 | +| mark | 添加标记样式 | boolean | false | | +| onClick | 点击 Text 时的回调 | (event) => void | - | | +| strong | 是否加粗 | boolean | false | | +| italic | 是否斜体 | boolean | false | 4.16.0 | +| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | +| underline | 添加下划线样式 | boolean | false | | ### Typography.Title -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ------------------------------------------------------------ | ------------------------------------------------- | ------ | --------------------- | -| code | 添加代码样式 | boolean | false | | -| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | -| delete | 添加删除线样式 | boolean | false | | -| disabled | 禁用文本 | boolean | false | | -| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | -| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | -| level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 | -| mark | 添加标记样式 | boolean | false | | -| onClick | 点击 Title 时的回调 | (event) => void | - | | -| italic | 是否斜体 | boolean | false | 4.16.0 | -| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | -| underline | 添加下划线样式 | boolean | false | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| code | 添加代码样式 | boolean | false | | +| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | +| delete | 添加删除线样式 | boolean | false | | +| disabled | 禁用文本 | boolean | false | | +| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | +| level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 | +| mark | 添加标记样式 | boolean | false | | +| onClick | 点击 Title 时的回调 | (event) => void | - | | +| italic | 是否斜体 | boolean | false | 4.16.0 | +| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | +| underline | 添加下划线样式 | boolean | false | | ### Typography.Paragraph -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ------------------------------------------------------------ | ------------------------------------------------- | ------ | --------------------- | -| code | 添加代码样式 | boolean | false | | -| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | -| delete | 添加删除线样式 | boolean | false | | -| disabled | 禁用文本 | boolean | false | | -| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | -| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | -| mark | 添加标记样式 | boolean | false | | -| onClick | 点击 Paragraph 时的回调 | (event) => void | - | | -| strong | 是否加粗 | boolean | false | | -| italic | 是否斜体 | boolean | false | 4.16.0 | -| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | -| underline | 添加下划线样式 | boolean | false | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| code | 添加代码样式 | boolean | false | | +| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) | +| delete | 添加删除线样式 | boolean | false | | +| disabled | 禁用文本 | boolean | false | | +| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) | +| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) | +| mark | 添加标记样式 | boolean | false | | +| onClick | 点击 Paragraph 时的回调 | (event) => void | - | | +| strong | 是否加粗 | boolean | false | | +| italic | 是否斜体 | boolean | false | 4.16.0 | +| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 | +| underline | 添加下划线样式 | boolean | false | | ### copyable @@ -91,13 +91,13 @@ demo: format: 'text/plain' | 'text/html', } -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| -------- | ----------------------------------------- | --------------------------- | --------------------- | ------ | -| format | 剪切板数据的 Mime Type | 'text/plain' \| 'text/html' | - | 4.21.0 | -| icon | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode] | - | 4.6.0 | -| text | 拷贝到剪切板里的文本 | string | - | | -| tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode] | \[`复制`, `复制成功`] | 4.4.0 | -| onCopy | 拷贝成功的回调函数 | function | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| format | 剪切板数据的 Mime Type | 'text/plain' \| 'text/html' | - | 4.21.0 | +| icon | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode] | - | 4.6.0 | +| text | 拷贝到剪切板里的文本 | string | - | | +| tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode] | \[`复制`, `复制成功`] | 4.4.0 | +| onCopy | 拷贝成功的回调函数 | function | - | | ### editable @@ -116,20 +116,20 @@ demo: enterIcon: ReactNode, } -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | ------------------------------------------------------------------------------ | ----------------------------------------------- | ------------------- | ------ | -| autoSize | 自动 resize 文本域 | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 | -| editing | 控制是否是编辑中状态 | boolean | false | | -| icon | 自定义编辑图标 | ReactNode | <EditOutlined /> | 4.6.0 | -| maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 | -| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 | -| text | 显式地指定编辑文案，为空时将隐式地使用 children | string | - | 4.24.0 | -| onChange | 文本域编辑时触发 | function(value: string) | - | | -| onCancel | 按 ESC 退出编辑状态时触发 | function | - | | -| onStart | 进入编辑中状态时触发 | function | - | | -| onEnd | 按 ENTER 结束编辑状态时触发 | function | - | 4.14.0 | -| triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏） | Array<`icon`\|`text`> | \[`icon`] | | -| enterIcon | 在编辑段中自定义“enter”图标（传递“null”将删除图标） | ReactNode | `` | 4.17.0 | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| autoSize | 自动 resize 文本域 | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 | +| editing | 控制是否是编辑中状态 | boolean | false | | +| icon | 自定义编辑图标 | ReactNode | <EditOutlined /> | 4.6.0 | +| maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 | +| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 | +| text | 显式地指定编辑文案，为空时将隐式地使用 children | string | - | 4.24.0 | +| onChange | 文本域编辑时触发 | function(value: string) | - | | +| onCancel | 按 ESC 退出编辑状态时触发 | function | - | | +| onStart | 进入编辑中状态时触发 | function | - | | +| onEnd | 按 ENTER 结束编辑状态时触发 | function | - | 4.14.0 | +| triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏） | Array<`icon`\|`text`> | \[`icon`] | | +| enterIcon | 在编辑段中自定义“enter”图标（传递“null”将删除图标） | ReactNode | `` | 4.17.0 | ### ellipsis @@ -143,15 +143,15 @@ demo: onEllipsis: function(ellipsis), } -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ---------- | -------------------- | ---------------------------------------------------------------- | ------ | ------ | -| expandable | 是否可展开 | boolean | - | | -| rows | 最多显示的行数 | number | - | | -| suffix | 自定义省略内容后缀 | string | - | | -| symbol | 自定义展开描述文案 | ReactNode | `展开` | | -| tooltip | 省略时，展示提示信息 | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#API) | - | 4.11.0 | -| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 | -| onExpand | 点击展开时的回调 | function(event) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| expandable | 是否可展开 | boolean | - | | +| rows | 最多显示的行数 | number | - | | +| suffix | 自定义省略内容后缀 | string | - | | +| symbol | 自定义展开描述文案 | ReactNode | `展开` | | +| tooltip | 省略时，展示提示信息 | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#API) | - | 4.11.0 | +| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 | +| onExpand | 点击展开时的回调 | function(event) | - | | ## FAQ