Commit 010d3e6 1 parent b3852a8 commit 010d3e6 Copy full SHA for 010d3e6
File tree 1 file changed +54
-0
lines changed
website/src/routes/docs/_mdx/components
1 file changed +54
-0
lines changed Original file line number Diff line number Diff line change @@ -8,6 +8,7 @@ description: 鼠标点击在某个组件时,弹出的气泡式的卡片浮层
8
8
``` js
9
9
import {
10
10
Popover ,
11
+ PopoverAnchor ,
11
12
PopoverTrigger ,
12
13
PopoverContent ,
13
14
PopoverArrow ,
@@ -19,6 +20,7 @@ import {
19
20
20
21
- ` Popover ` : 包含弹出框的所有部分。
21
22
- ` PopoverTrigger ` : 包装将打开弹出框的控件。
23
+ - ` PopoverAnchor ` : 用于包装位置的可选引用元素。
22
24
- ` PopoverContent ` : 包含弹出框打开时要呈现的内容。
23
25
- ` PopoverArrow ` : 一个可选的箭头元素,与弹出框一起渲染。
24
26
- ` PopoverTitle ` : 打开弹出框时要宣布的可访问标题。
@@ -171,6 +173,58 @@ export default function App() {
171
173
}
172
174
```
173
175
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
+
174
228
### 放置位置
175
229
176
230
通过传递 ` placement ` 属性来更改弹出框的放置位置。
You can’t perform that action at this time.
0 commit comments