交互浮层

Popover浮层与反馈

点击触发的浮层，承载确认框或轻量表单。以弹簧从 0.98 放大淡入；点外部、按 Esc 或面板内按钮关闭。

属性

名称	类型	默认值	说明
`open`	`Signal<bool>`	必填	是否显示面板。
`anchor_x / anchor_y`	`Signal<i32>`	必填	视口内的锚点坐标。
`children`	`ChildrenFn`	必填	浮层内容。
`on_close`	`Callback<()>`	必填	请求关闭浮层。
`placement`	`String`	`top`	top 或 bottom。
`align`	`String`	`center`	center、start 或 end。

键盘

Escape: 关闭浮层

用法

src/components/ui.rs

let open = RwSignal::new(false);
let anchor_x = RwSignal::new(0_i32);
let anchor_y = RwSignal::new(0_i32);

view! {
    <div>
        <button on:click=move |event: leptos::ev::MouseEvent| {
            anchor_x.set(event.client_x());
            anchor_y.set(event.client_y());
            open.set(true);
        }>"\u6253\u5F00\u6D6E\u5C42"</button>
        <Popover
            open=open
            anchor_x=anchor_x
            anchor_y=anchor_y
            on_close=move |_| open.set(false)
        >
            <p>"\u4FDD\u7559\u8FD9\u7247\u7075\u611F\uFF1F"</p>
        </Popover>
    </div>
}

预览

属性

键盘

用法