锚定浮层
Popover
在触发控件附近打开一块补充内容。
点击打开，点外部或 Esc 关闭
组件语义
描述用户任务，并映射不同实现。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'popover'
);
view.element.addEventListener('ui:open', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
轻量设置、帮助内容或局部编辑。
什么时候不用
必须阻隔背景的决定使用 Dialog。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "查看条目说明" |
title | "组件语义" |
content | "描述用户任务，并映射不同实现。" |
closeLabel | "关闭" |
help | "点击打开，点外部或 Esc 关闭" |
事件
ui:open
INTERACTION NOTES
交互与可访问性
- 触发器表达展开状态。
- 有可交互内容时管理焦点和关闭后的返回位置。
和相似组件的区别
Popover 锚定到控件；Dialog 建立独立的任务上下文。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验