模态对话框
Dialog / Modal
在当前页面上完成聚焦任务或查看补充内容。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'dialog'
);
view.element.addEventListener('ui:open', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
一个短任务需要暂时独立的注意力和操作空间。
什么时候不用
能在原位展示的小提示优先就地呈现。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
title | "离开这份草稿？" |
content | "当前演示不会修改任何真实内容。" |
triggerLabel | "打开示例弹层" |
closeLabel | "返回编辑" |
事件
ui:open ui:close
INTERACTION NOTES
交互与可访问性
- 对话框有标题，管理进入与退出的焦点。
- 明确关闭方式，避免键盘陷阱。
和相似组件的区别
模态 Dialog 阻隔背景交互；Popover 通常是锚定控件的轻量内容。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Angular、Web Components · 来源核验