浮层与反馈 / COMPONENT ATLAS

交互浮层Popover

在触发位置旁容纳轻量确认或小表单,用受控状态管理浮层的显示与关闭。

亲手试一试。

01 / LIVE PREVIEW
● Popover

STATES / 示例状态

确认关闭
在左侧预览中体验这枚组件。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

RUST · DIOXUS RSX
let mut open = use_signal(|| false);
let mut anchor_x = use_signal(|| 0i32);
let mut anchor_y = use_signal(|| 0i32);
rsx! {
    div {
        button {
            onclick: move |event: 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: open(),
            anchor_x: anchor_x(),
            anchor_y: anchor_y(),
            on_close: move |_| open.set(false),
            p { "保留这片灵感?" }
        }
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
openbool必填是否显示面板。
anchor_x / anchor_yi32必填视口内的锚点坐标。
childrenElement必填浮层内容。
on_closeEventHandler<()>必填请求关闭浮层。
placement&'static strtoptop 或 bottom。
align&'static strcentercenter、start 或 end。

操作方式

04 / INTERACTION
Escape关闭浮层
YGGDRASIL · 每一个细节,都有回应。src/components/ui.rs
© 2026 Yggdrasil