diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index 62cef852b4..fabd5d5d1a 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -77,3 +77,9 @@ Please ensure that the child node of `Dropdown` accepts `onMouseEnter`, `onMouse ## Design Token + +## FAQ + +### How to prevent Dropdown from being squeezed when it exceeds the screen horizontally? + +You can use `width: max-content` style to handle this. ref [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135). diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index 00073ec217..89c1bbc15b 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -81,3 +81,9 @@ demo: ## Design Token + +## FAQ + +### Dropdown 在水平方向超出屏幕时会被挤压改怎么办? + +你可以通过 `width: max-content` 来解决这个问题,参考 [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135)。 diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index df32ed05e8..a8f2349f6b 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -96,6 +96,13 @@ In this way, we changed the primary color of Radio to Motion + ## Other Ways to Use Dynamic Themes ### Switch Themes Dynamically @@ -560,12 +567,11 @@ export default class MyDocument extends Document { const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ - enhanceApp: (App) => (props) => - ( - - - - ), + enhanceApp: (App) => (props) => ( + + + + ), }); const initialProps = await Document.getInitialProps(ctx); diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index eea3c44469..7104d6e9a7 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -96,6 +96,13 @@ export default App; > 注意:`ConfigProvider` 对 `message.xxx`、`Modal.xxx`、`notification.xxx` 等静态方法不会生效,原因是在这些方法中,antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同,因而无法获取 context 信息。当你需要 context 信息(例如 ConfigProvider 配置的内容)时,可以通过 `Modal.useModal` 方法会返回 modal 实体以及 contextHolder 节点。将其插入到你需要获取 context 位置即可,也可通过 [App 包裹组件](/components/app-cn) 简化 useModal 等方法需要手动植入 contextHolder 的问题。 +### 禁用动画 + +antd 默认内置了一些组件交互动效让企业级页面更加富有细节,在一些极端场景可能会影响页面交互性能,如需关闭动画可以使用下面的方式: + + +动画控制 + ## 动态主题的其他使用方式 ### 动态切换 @@ -556,12 +563,11 @@ export default class MyDocument extends Document { const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ - enhanceApp: (App) => (props) => - ( - - - - ), + enhanceApp: (App) => (props) => ( + + + + ), }); const initialProps = await Document.getInitialProps(ctx); diff --git a/docs/react/demo/motion.md b/docs/react/demo/motion.md new file mode 100644 index 0000000000..53383e0cb4 --- /dev/null +++ b/docs/react/demo/motion.md @@ -0,0 +1,7 @@ +## zh-CN + +通过 `token` 进行动画效果配置。 + +## en-US + +Config animation effect by `token`. diff --git a/docs/react/demo/motion.tsx b/docs/react/demo/motion.tsx new file mode 100644 index 0000000000..888fb37152 --- /dev/null +++ b/docs/react/demo/motion.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Switch, ConfigProvider, Space, Checkbox, Radio, Row, Col } from 'antd'; + +export default () => { + const [checked, setChecked] = React.useState(false); + + React.useEffect(() => { + const id = setInterval(() => { + setChecked((prev) => !prev); + }, 500); + + return () => { + clearInterval(id); + }; + }, []); + + const nodes = ( + + Checkbox + Radio + + + ); + + return ( + + {nodes} + + + + {nodes} + + + + ); +};