抽屉与侧边面板
Drawer / Sheet
从屏幕边缘展开任务或对象详情。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'drawer'
);
view.element.addEventListener('ui:open', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
保留列表上下文，同时查看或编辑一个对象。
什么时候不用
需要长期并排工作时优先稳定布局或 Splitter。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "打开侧边抽屉" |
title | "组件详情抽屉" |
content | "当前页面保留在背景中。这个抽屉只展示本地示例内容。" |
closeLabel | "关闭" |
事件
ui:open
INTERACTION NOTES
交互与可访问性
- 明确是否模态，不只靠视觉位置判断。
- 关闭后把焦点还给触发项。
和相似组件的区别
Drawer 描述展开位置；Sidebar 通常是布局中持续存在的区域。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验