diff --git a/src/popup/_example/popper-options.tsx b/src/popup/_example/popper-options.tsx new file mode 100644 index 0000000000..e6c238bfd9 --- /dev/null +++ b/src/popup/_example/popper-options.tsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import { Button, Input, Popup, Space } from 'tdesign-react'; + +export default function PopperOptions() { + const [offsetX, setOffsetX] = useState('0'); + const [offsetY, setOffsetY] = useState('0'); + + return ( + + + + 请输入横向偏移量: + setOffsetX(v)} + style={{ width: '130px', display: 'inline-block' }} + /> + + + 请输入纵向偏移量: + setOffsetY(v)} + style={{ width: '130px', display: 'inline-block' }} + /> + + + + + + + + + ); +} diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 2cacf5ccf1..5c0fe3aa55 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -9,6 +9,20 @@ Support functional calls `PopupPlugin` 。 {{ plugin }} +### Dynamic Adaptation + +When the trigger or popup display content changes dynamically, the position is adjusted adaptively + +{{ dynamic }} + +### popperOptions usage + +https://popper.js.org/docs/v2/constructors/#types + +- `popperOptions` = `Options` + +{{ popper-options }} + ## FAQ ### How to solve the problem of position offset when nesting `Popup` components? diff --git a/src/popup/popup.md b/src/popup/popup.md index 95df45f1b8..0c8afe1496 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -15,6 +15,14 @@ {{ dynamic }} +### popperOptions 使用 + +https://popper.js.org/docs/v2/constructors/#types + +- `popperOptions` = `Options` + +{{ popper-options }} + ## FAQ ### `Popup` 组件，嵌套使用可能出现位置偏移的情况，如何解决？ diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 355d3abef9..a98b95ad25 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -67312,6 +67312,122 @@ exports[`csr snapshot test > csr test src/popup/_example/plugin.tsx 1`] = ` `; +exports[`csr snapshot test > csr test src/popup/_example/popper-options.tsx 1`] = ` +
+
+
+
+
+
+
+ + 请输入横向偏移量: + +
+
+
+
+ +
+
+
+
+
+
+
+
+ + 请输入纵向偏移量: + +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+`; + exports[`csr snapshot test > csr test src/popup/_example/style.tsx 1`] = `
ssr test src/popup/_example/placement.tsx 1`] = `"< exports[`ssr snapshot test > ssr test src/popup/_example/plugin.tsx 1`] = `"
这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作点击此链接，会打开浮层进行跳转操作
"`; +exports[`ssr snapshot test > ssr test src/popup/_example/popper-options.tsx 1`] = `"
请输入横向偏移量:
请输入纵向偏移量:
"`; + exports[`ssr snapshot test > ssr test src/popup/_example/style.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/popup/_example/trigger.tsx 1`] = `"
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index f27a5b73ff..25d8a91ac1 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -724,6 +724,8 @@ exports[`ssr snapshot test > ssr test src/popup/_example/placement.tsx 1`] = `"< exports[`ssr snapshot test > ssr test src/popup/_example/plugin.tsx 1`] = `"
这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作点击此链接，会打开浮层进行跳转操作
"`; +exports[`ssr snapshot test > ssr test src/popup/_example/popper-options.tsx 1`] = `"
请输入横向偏移量:
请输入纵向偏移量:
"`; + exports[`ssr snapshot test > ssr test src/popup/_example/style.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/popup/_example/trigger.tsx 1`] = `"
"`;