docs(shared): Improve shared API docs (#51857)

* docs: split shardProps

* chore: update english

* chore: update style

* chore: update snap
pull/51776/head^2
𝑾𝒖𝒙𝒉 2 months ago committed by GitHub
parent 4f3faa3b2f
commit 4dbb0075bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,15 @@
import * as React from 'react';
import * as all from 'antd';
interface AntdProps {
component: keyof typeof all;
}
function Antd(props: AntdProps) {
const { component, ...restProps } = props;
const Component = (all[component] ?? React.Fragment) as React.ComponentType;
return <Component {...restProps} />;
}
export default Antd;

@ -49,7 +49,9 @@ Common props ref[Common props](/docs/react/common-props)
| onConfirm | A callback of confirmation | function(e) | - | |
| onPopupClick | A callback of popup click | function(e) | - | 5.5.0 |
Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
<!-- Common API -->
<embed src="../tooltip/shared/sharedProps.en-US.md"></embed>
## Design Token

@ -50,7 +50,9 @@ demo:
| onConfirm | 点击确认的回调 | function(e) | - | |
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
<!-- 共同的 API -->
<embed src="../tooltip/shared/sharedProps.zh-CN.md"></embed>
## 主题变量Design Token

@ -39,7 +39,9 @@ Common props ref[Common props](/docs/react/common-props)
| content | Content of the card | ReactNode \| () => ReactNode | - | |
| title | Title of the card | ReactNode \| () => ReactNode | - | |
Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
<!-- Common API -->
<embed src="../tooltip/shared/sharedProps.en-US.md"></embed>
## Note

@ -40,7 +40,9 @@ demo:
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
<!-- 共同的 API -->
<embed src="../tooltip/shared/sharedProps.zh-CN.md"></embed>
## 注意

@ -39,28 +39,7 @@ Common props ref[Common props](/docs/react/common-props)
### Common API
The following APIs are shared by Tooltip, Popconfirm, Popover.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | This value will be merged into placement's config, please refer to the settings [dom-align](https://github.com/yiminghe/dom-align) | object | - | |
| arrow | Change arrow's visible state and change whether the arrow is pointed at the center of target. | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true | |
| color | The background color | string | - | 4.3.0 |
| defaultOpen | Whether the floating tooltip card is open by default | boolean | false | 4.23.0 |
| destroyTooltipOnHide | Whether destroy tooltip when hidden | boolean | false | |
| fresh | Tooltip will cache content when it is closed by default. Setting this property will always keep updating | boolean | false | 5.10.0 |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | |
| overlayClassName | Class name of the tooltip card | string | - | |
| overlayStyle | Style of the tooltip card | React.CSSProperties | - | |
| overlayInnerStyle | Style of the tooltip inner content | React.CSSProperties | - | |
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
| trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| Array&lt;string> | `hover` | |
| open | Whether the floating tooltip card is open or not. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | false | 4.23.0 |
| zIndex | Config `z-index` of Tooltip | number | - | |
| onOpenChange | Callback executed when visibility of the tooltip card is changed | (open: boolean) => void | - | 4.23.0 |
<embed src="./shared/sharedProps.en-US.md"></embed>
## Design Token

@ -41,28 +41,7 @@ demo:
### 共同的 API
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| align | 该值将合并到 placement 的配置中,设置参考 [dom-align](https://github.com/yiminghe/dom-align) | object | - | |
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
| color | 背景颜色 | string | - | 4.3.0 |
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
| destroyTooltipOnHide | 关闭后是否销毁 Tooltip | boolean | false | |
| fresh | 默认情况下Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip单位秒 | number | 0.1 | |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip单位秒 | number | 0.1 | |
| overlayClassName | 卡片类名 | string | - | |
| overlayStyle | 卡片样式 | React.CSSProperties | - | |
| overlayInnerStyle | 卡片内容区域的样式对象 | React.CSSProperties | - | |
| placement | 气泡框位置,可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
| trigger | 触发行为,可选 `hover` \| `focus` \| `click` \| `contextMenu`,可使用数组设置多个触发行为 | string \| string\[] | `hover` | |
| open | 用于手动控制浮层显隐,小于 4.23.0 使用 `visible`[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性) | boolean | false | 4.23.0 |
| zIndex | 设置 Tooltip 的 `z-index` | number | - | |
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
<embed src="./shared/sharedProps.zh-CN.md"></embed>
## 主题变量Design Token

@ -0,0 +1,23 @@
<Antd component="Alert" message="The following APIs are shared by Tooltip, Popconfirm, Popover." type="info" banner="true"></Antd>
<!-- prettier-ignore -->
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | This value will be merged into placement's config, please refer to the settings [dom-align](https://github.com/yiminghe/dom-align) | object | - | |
| arrow | Change arrow's visible state and change whether the arrow is pointed at the center of target. | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true | |
| color | The background color | string | - | 4.3.0 |
| defaultOpen | Whether the floating tooltip card is open by default | boolean | false | 4.23.0 |
| destroyTooltipOnHide | Whether destroy tooltip when hidden | boolean | false | |
| fresh | Tooltip will cache content when it is closed by default. Setting this property will always keep updating | boolean | false | 5.10.0 |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | |
| overlayClassName | Class name of the tooltip card | string | - | |
| overlayStyle | Style of the tooltip card | React.CSSProperties | - | |
| overlayInnerStyle | Style of the tooltip inner content | React.CSSProperties | - | |
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
| trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| Array&lt;string> | `hover` | |
| open | Whether the floating tooltip card is open or not. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | false | 4.23.0 |
| zIndex | Config `z-index` of Tooltip | number | - | |
| onOpenChange | Callback executed when visibility of the tooltip card is changed | (open: boolean) => void | - | 4.23.0 |

@ -0,0 +1,23 @@
<Antd component="Alert" message="以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。" type="info" banner="true"></Antd>
<!-- prettier-ignore -->
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| align | 该值将合并到 placement 的配置中,设置参考 [dom-align](https://github.com/yiminghe/dom-align) | object | - | |
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
| color | 背景颜色 | string | - | 4.3.0 |
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
| destroyTooltipOnHide | 关闭后是否销毁 Tooltip | boolean | false | |
| fresh | 默认情况下Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip单位秒 | number | 0.1 | |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip单位秒 | number | 0.1 | |
| overlayClassName | 卡片类名 | string | - | |
| overlayStyle | 卡片样式 | React.CSSProperties | - | |
| overlayInnerStyle | 卡片内容区域的样式对象 | React.CSSProperties | - | |
| placement | 气泡框位置,可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
| trigger | 触发行为,可选 `hover` \| `focus` \| `click` \| `contextMenu`,可使用数组设置多个触发行为 | string \| string\[] | `hover` | |
| open | 用于手动控制浮层显隐,小于 4.23.0 使用 `visible`[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性) | boolean | false | 4.23.0 |
| zIndex | 设置 Tooltip 的 `z-index` | number | - | |
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |

@ -156,13 +156,13 @@ exports[`site test Component components/pagination en Page 1`] = `1`;
exports[`site test Component components/pagination zh Page 1`] = `1`;
exports[`site test Component components/popconfirm en Page 1`] = `1`;
exports[`site test Component components/popconfirm en Page 1`] = `2`;
exports[`site test Component components/popconfirm zh Page 1`] = `1`;
exports[`site test Component components/popconfirm zh Page 1`] = `2`;
exports[`site test Component components/popover en Page 1`] = `1`;
exports[`site test Component components/popover en Page 1`] = `2`;
exports[`site test Component components/popover zh Page 1`] = `1`;
exports[`site test Component components/popover zh Page 1`] = `2`;
exports[`site test Component components/progress en Page 1`] = `4`;

Loading…
Cancel
Save