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)。
  • 水平由 align 决定:"center"(默认)面板中心对齐点击点(left: x + -translate-x-1/2);"start" 面板左缘贴点向右延伸(left: x); "end" 面板右缘贴点向左延伸(right: 100vw - x)。

触发器贴近视口边缘时(如表格最右列的按钮),居中的宽面板会越出视口—— 此时用 align 让面板朝视口内侧延伸(与 Tooltip 的 align 同款约定, 见 issue #14)。end 用 right 锚定右缘,与面板内容宽度无关,天然不越右缘。

§关闭路径(三条)

  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"。
  • align:"center"(默认)/ "start" / "end"(水平对齐,见上)。
  • children:面板内容(确认框等)。
  • on_close:任一关闭路径触发。

§Props

For details, see the props struct definition.