From 0a79a79bc76163b451725d9c54f9a3d13f84bb1a Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 2 Apr 2024 14:05:03 +0800 Subject: [PATCH] docs: update sidebar style of website (#48224) * docs: update GetRef/GetProp/GetProps docs * fix: fix * fix: fix * fix: fix * fix: fix * fix: fix --- .dumi/hooks/useMenu.tsx | 35 ++++++++++++++++---------- components/_util/index.en-US.md | 12 ++++++--- components/_util/index.zh-CN.md | 12 ++++++--- components/app/index.en-US.md | 6 ++++- components/app/index.zh-CN.md | 6 ++++- components/color-picker/index.en-US.md | 2 +- components/color-picker/index.zh-CN.md | 2 +- components/flex/index.en-US.md | 2 +- components/flex/index.zh-CN.md | 2 +- components/float-button/index.en-US.md | 2 +- components/float-button/index.zh-CN.md | 2 +- components/qr-code/index.en-US.md | 2 +- components/qr-code/index.zh-CN.md | 2 +- components/tour/index.en-US.md | 2 +- components/tour/index.zh-CN.md | 2 +- components/watermark/index.en-US.md | 5 ++-- components/watermark/index.zh-CN.md | 6 ++--- 17 files changed, 66 insertions(+), 36 deletions(-) diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx index 39232c994d..101336daa7 100644 --- a/.dumi/hooks/useMenu.tsx +++ b/.dumi/hooks/useMenu.tsx @@ -1,12 +1,25 @@ import React, { useMemo } from 'react'; import type { MenuProps } from 'antd'; import { Tag, version } from 'antd'; +import { createStyles } from 'antd-style'; +import classnames from 'classnames'; import { useFullSidebarData, useSidebarData } from 'dumi'; import Link from '../theme/common/Link'; import useLocation from './useLocation'; -const MenuItemLabelWithTag: React.FC<{ +const useStyle = createStyles(({ css }) => ({ + link: css` + display: flex; + align-items: center; + justify-content: space-between; + `, + tag: css` + margin-inline-end: 0; + `, +})); + +interface MenuItemLabelProps { before?: React.ReactNode; after?: React.ReactNode; link: string; @@ -15,18 +28,14 @@ const MenuItemLabelWithTag: React.FC<{ search?: string; tag?: string; className?: string; -}> = ({ before, after, link, title, subtitle, search, tag = '', className }) => { +} + +const MenuItemLabelWithTag: React.FC = (props) => { + const { styles } = useStyle(); + const { before, after, link, title, subtitle, search, tag, className } = props; if (!before && !after) { return ( - + {title} {subtitle && {subtitle}} @@ -34,8 +43,8 @@ const MenuItemLabelWithTag: React.FC<{ {tag && ( {tag.replace('VERSION', version)} diff --git a/components/_util/index.en-US.md b/components/_util/index.en-US.md index d78cf77430..5e16a1cab7 100644 --- a/components/_util/index.en-US.md +++ b/components/_util/index.en-US.md @@ -5,6 +5,7 @@ description: Utilities are used to assist development and provide some common ut showImport: false cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original +tag: 5.13.0 demo: cols: 2 group: @@ -12,12 +13,15 @@ group: order: 99 --- +Available since `5.13.0`. + ## GetRef Get the `ref` property definition of the component, which is very useful for components that are not directly exposed or child components. ```tsx -import type { GetRef, Select } from 'antd'; +import { Select } from 'antd'; +import type { GetRef } from 'antd'; type SelectRefType = GetRef; // BaseSelectRef ``` @@ -27,7 +31,8 @@ type SelectRefType = GetRef; // BaseSelectRef Get the `props` property definition of the component: ```tsx -import type { Checkbox, GetProps } from 'antd'; +import { Checkbox } from 'antd'; +import type { GetProps } from 'antd'; type CheckboxGroupType = GetProps; ``` @@ -37,7 +42,8 @@ type CheckboxGroupType = GetProps; Get the single `props` property definition of the component. It has encapsulated `NonNullable`, so you don't have to worry about being empty: ```tsx -import type { GetProp, Select, SelectProps } from 'antd'; +import { Select } from 'antd'; +import type { GetProp, SelectProps } from 'antd'; // Both of this can work type SelectOptionType1 = GetProp[number]; diff --git a/components/_util/index.zh-CN.md b/components/_util/index.zh-CN.md index a48e4a22d1..7b39912895 100644 --- a/components/_util/index.zh-CN.md +++ b/components/_util/index.zh-CN.md @@ -6,6 +6,7 @@ description: 辅助开发，提供一些常用的工具方法。 showImport: false cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original +tag: 5.13.0 demo: cols: 2 group: @@ -13,12 +14,15 @@ group: order: 99 --- +自 `5.13.0` 版本开始提供这些方法。 + ## GetRef 获取组件的 `ref` 属性定义，这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。 ```tsx -import type { GetRef, Select } from 'antd'; +import { Select } from 'antd'; +import type { GetRef } from 'antd'; type SelectRefType = GetRef; // BaseSelectRef ``` @@ -28,7 +32,8 @@ type SelectRefType = GetRef; // BaseSelectRef 获取组件的 `props` 属性定义： ```tsx -import type { Checkbox, GetProps } from 'antd'; +import { Checkbox } from 'antd'; +import type { GetProps } from 'antd'; type CheckboxGroupType = GetProps; ``` @@ -38,7 +43,8 @@ type CheckboxGroupType = GetProps; 获取组件的单个 `props` 属性定义。它已经将 `NonNullable` 进行了封装，所以不用在考虑为空的情况： ```tsx -import type { GetProp, Select, SelectProps } from 'antd'; +import { Select } from 'antd'; +import type { GetProp, SelectProps } from 'antd'; // 以下两种都可以生效 type SelectOptionType1 = GetProp[number]; diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md index 5648486564..8c92298e15 100644 --- a/components/app/index.en-US.md +++ b/components/app/index.en-US.md @@ -7,9 +7,11 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 -tag: New +tag: 5.1.0 --- +Available since `5.1.0`. + ## When To Use - Provide reset styles based on `.ant-app` element. @@ -125,6 +127,8 @@ export default () => { Common props ref：[Common props](/docs/react/common-props) +> This component is available since `antd@5.1.0`. + ### App | Property | Description | Type | Default | Version | diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 9f89f74cca..f8077c5afe 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -8,9 +8,11 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 -tag: New +tag: 5.1.0 --- +自 `5.1.0` 版本开始提供该组件。 + ## 何时使用 - 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。 @@ -126,6 +128,8 @@ export default () => { 通用属性参考：[通用属性](/docs/react/common-props) +> 自 `antd@5.1.0` 版本开始提供该组件。 + ### App | 参数 | 说明 | 类型 | 默认值 | 版本 | diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md index 4d5c012bf8..f38f65f41e 100644 --- a/components/color-picker/index.en-US.md +++ b/components/color-picker/index.en-US.md @@ -4,7 +4,7 @@ title: ColorPicker description: Used for color selection. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original -tag: New +tag: 5.5.0 demo: cols: 2 group: diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index abd1d5cff6..1ccaca3775 100644 --- a/components/color-picker/index.zh-CN.md +++ b/components/color-picker/index.zh-CN.md @@ -5,7 +5,7 @@ subtitle: 颜色选择器 description: 用于选择颜色。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original -tag: New +tag: 5.5.0 demo: cols: 2 group: diff --git a/components/flex/index.en-US.md b/components/flex/index.en-US.md index a0a736e3c6..2c6d7da08d 100644 --- a/components/flex/index.en-US.md +++ b/components/flex/index.en-US.md @@ -5,7 +5,7 @@ title: Flex description: A flex layout container for alignment. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original -tag: New +tag: 5.10.0 --- Available since `5.10.0`. diff --git a/components/flex/index.zh-CN.md b/components/flex/index.zh-CN.md index 9e2f96c212..d6201b4f5e 100644 --- a/components/flex/index.zh-CN.md +++ b/components/flex/index.zh-CN.md @@ -6,7 +6,7 @@ subtitle: 弹性布局 description: 用于对齐的弹性布局容器。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original -tag: New +tag: 5.10.0 --- 自 `5.10.0` 版本开始提供该组件。 diff --git a/components/float-button/index.en-US.md b/components/float-button/index.en-US.md index 706706e1a9..95a7cea920 100644 --- a/components/float-button/index.en-US.md +++ b/components/float-button/index.en-US.md @@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 -tag: New +tag: 5.0.0 --- Available since `5.0.0`. diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 8f00e17eb3..b98f2a8dc2 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 -tag: New +tag: 5.0.0 --- 自 `5.0.0` 版本开始提供该组件。 diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index ea9cd8adb1..118fb7ffcd 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -9,7 +9,7 @@ demo: group: title: Data Display order: 5 -tag: New +tag: 5.1.0 --- Available since `antd@5.1.0`. diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index 66c1849619..5416699a79 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -10,7 +10,7 @@ demo: group: title: 数据展示 order: 5 -tag: New +tag: 5.1.0 --- 自 `antd@5.1.0` 版本开始提供该组件。 diff --git a/components/tour/index.en-US.md b/components/tour/index.en-US.md index 97d3e23a67..8bb3378bf1 100644 --- a/components/tour/index.en-US.md +++ b/components/tour/index.en-US.md @@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NMvqRZpuJfQAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D70qQJJmzhgAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 -tag: New +tag: 5.0.0 --- Available since `5.0.0`. diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md index 49f1d9ce58..e8e94f0713 100644 --- a/components/tour/index.zh-CN.md +++ b/components/tour/index.zh-CN.md @@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NMvqRZpuJfQAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*D70qQJJmzhgAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 -tag: New +tag: 5.0.0 --- 自 `5.0.0` 版本开始提供该组件。 diff --git a/components/watermark/index.en-US.md b/components/watermark/index.en-US.md index c8323ae9fa..62ccf1c788 100644 --- a/components/watermark/index.en-US.md +++ b/components/watermark/index.en-US.md @@ -7,9 +7,10 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original demo: cols: 1 +tag: 5.1.0 --- -Available since `5.0.0`. +Available since `5.1.0`. ## When To Use @@ -29,7 +30,7 @@ Available since `5.0.0`. Common props ref：[Common props](/docs/react/common-props) -> This component is available since `antd@5.0.0`. +> This component is available since `antd@5.1.0`. ### Watermark diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md index 6e9e0a205e..7c7f875d6b 100644 --- a/components/watermark/index.zh-CN.md +++ b/components/watermark/index.zh-CN.md @@ -8,10 +8,10 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAA coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original demo: cols: 1 -tag: New +tag: 5.1.0 --- -自 `5.0.0` 版本开始提供该组件。 +自 `5.1.0` 版本开始提供该组件。 ## 何时使用 @@ -31,7 +31,7 @@ tag: New 通用属性参考：[通用属性](/docs/react/common-props) -> 自 `antd@5.0.0` 版本开始提供该组件。 +> 自 `antd@5.1.0` 版本开始提供该组件。 ### Watermark