Skip to content

Commit 010d3e6

Browse files
committed
docs(Popover): add PopoverAnchor component and usage example
1 parent b3852a8 commit 010d3e6

File tree

1 file changed

+54
-0
lines changed

1 file changed

+54
-0
lines changed

website/src/routes/docs/_mdx/components/popover.mdx

+54
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ description: 鼠标点击在某个组件时,弹出的气泡式的卡片浮层
88
```js
99
import {
1010
Popover,
11+
PopoverAnchor,
1112
PopoverTrigger,
1213
PopoverContent,
1314
PopoverArrow,
@@ -19,6 +20,7 @@ import {
1920

2021
- `Popover`: 包含弹出框的所有部分。
2122
- `PopoverTrigger`: 包装将打开弹出框的控件。
23+
- `PopoverAnchor`: 用于包装位置的可选引用元素。
2224
- `PopoverContent`: 包含弹出框打开时要呈现的内容。
2325
- `PopoverArrow`: 一个可选的箭头元素,与弹出框一起渲染。
2426
- `PopoverTitle`: 打开弹出框时要宣布的可访问标题。
@@ -171,6 +173,58 @@ export default function App() {
171173
}
172174
```
173175

176+
### 自定锚点
177+
178+
如果您不想将触发器用作锚点,请使用 `PopoverAnchor` 组件将内容锚定在另一个元素上。
179+
180+
```jsx demo
181+
import {
182+
Button,
183+
CloseButton,
184+
Popover,
185+
PopoverAnchor,
186+
PopoverArrow,
187+
PopoverClose,
188+
PopoverContent,
189+
PopoverDescription,
190+
PopoverTitle,
191+
PopoverTrigger,
192+
} from "@resolid/react-ui";
193+
194+
export default function App() {
195+
return (
196+
<div className={"flex flex-row justify-center gap-3"}>
197+
<Popover placement={"bottom"}>
198+
<PopoverAnchor className={"bg-bg-subtlest rounded-md p-3"}>
199+
<p className={"flex items-center"}>
200+
单击&nbsp;
201+
<PopoverTrigger
202+
render={(props) => (
203+
<Button {...props} size={"xs"} color={"neutral"} variant={"subtle"} />
204+
)}
205+
>
206+
打开弹出框
207+
</PopoverTrigger>
208+
&nbsp;时,弹出窗口将打开。
209+
</p>
210+
<p>但是它固定在整个 Div 上。</p>
211+
</PopoverAnchor>
212+
<PopoverContent className="max-w-96">
213+
<PopoverArrow />
214+
<PopoverTitle className={"p-4"}>弹出框标题</PopoverTitle>
215+
<PopoverDescription className={"p-4 pt-1"}>
216+
这是一个弹出框示例,你可以在这里放置相关的提示信息、确认内容或者操作说明。内容可以根据需求进行修改,以适应不同的业务场景。
217+
</PopoverDescription>
218+
<PopoverClose
219+
render={(props) => <CloseButton className={"absolute end-2 top-2"} {...props} />}
220+
/>
221+
</PopoverContent>
222+
</Popover>
223+
</div>
224+
);
225+
}
226+
```
227+
174228
### 放置位置
175229

176230
通过传递 `placement` 属性来更改弹出框的放置位置。

0 commit comments

Comments
 (0)