浮层与反馈 / COMPONENT ATLAS
交互浮层Popover
在触发位置旁容纳轻量确认或小表单,用受控状态管理浮层的显示与关闭。
亲手试一试。
01 / LIVE PREVIEWSTATES / 示例状态
确认关闭
在左侧预览中体验这枚组件。INTERACTIVE SPECIMEN · 跟随全站主题
用法
02 / USAGE下方展示组件的调用方式。
let mut open = use_signal(|| false);
let mut anchor_x = use_signal(|| 0i32);
let mut anchor_y = use_signal(|| 0i32);
rsx! {
div {
button {
: move |: MouseEvent| {
#[cfg(target_arch = "wasm32")]
{
use dioxus::html::InteractionLocation;
let point = event.client_coordinates();
anchor_x.set(point.x as i32);
anchor_y.set(point.y as i32);
}
open.set(true);
},
"打开浮层"
}
Popover {
: open(),
: anchor_x(),
: anchor_y(),
: move |_| open.set(false),
p { "保留这片灵感?" }
}
}
}主要属性
03 / PROPERTIES| 属性 / 类型 | 默认值 | 说明 |
|---|---|---|
openbool | 必填 | 是否显示面板。 |
anchor_x / anchor_yi32 | 必填 | 视口内的锚点坐标。 |
childrenElement | 必填 | 浮层内容。 |
on_closeEventHandler<()> | 必填 | 请求关闭浮层。 |
placement&'static str | top | top 或 bottom。 |
align&'static str | center | center、start 或 end。 |
操作方式
04 / INTERACTIONEscape关闭浮层