Skip to main content

Popover

yggdrasil::components::ui

Function Popover 

Source 
pub fn Popover(_: PopoverProps) -> Element
Expand description

受控式通用 Popover(浮层)组件。

与 Tooltip 对称——但 Tooltip 是纯 CSS hover、无状态;Popover 是点击触发、 受控开关,用于承载确认框、轻量表单等交互内容。

§定位策略

父容器常有 overflow-hidden(如 ADMIN_TABLE_CLASS),position:absolute 子节点 会被裁掉,故面板用 position:fixed,以触发点击的视口坐标(MouseEvent:: client_coordinates())作为锚点(参照 theme.rs 圆形展开动画的坐标用法)。无需 getBoundingClientRect/node_ref。

  • placement: "top"(默认):面板底边贴点击点上方(bottom: 100vh - y + gap)。
  • placement: "bottom":面板顶边贴点击点下方(top: y + gap)。
  • 水平:面板中心对齐点击点(left: x + -translate-x-1/2)。

§关闭路径(三条)

  1. 点遮罩(透明,仅作点击兜底)→ on_close。
  2. Escape 键 → on_close(组件内 use_effect 注册全局 keydown 监听,use_drop 清理)。
  3. 面板内确认/取消按钮调用 on_close。

§Props

  • open:受控开关;false 时组件不渲染任何内容(SSR 安全)。
  • anchor_x / anchor_y:触发点击的视口坐标。
  • placement:"top"(默认)/ "bottom"。
  • children:面板内容(确认框等)。
  • on_close:任一关闭路径触发。

§Props

For details, see the props struct definition.