可调分栏
Splitter / Resizable Panels
允许用户调节相邻工作区域的空间分配。
目录：输入组件、导航组件
内容：保留两侧上下文
拖动或使用左右方向键调整
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'splitter'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
编辑器与预览、目录与详情等长期并排工作。
什么时候不用
小屏幕同时展示会挤压内容时，应切换为单区导航。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "调整两侧宽度" |
start | "目录：输入组件、导航组件" |
end | "内容：保留两侧上下文" |
value | 42 |
min | 15 |
max | 85 |
help | "拖动或使用左右方向键调整" |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 拖动分隔线也应支持键盘调节。
- 限制最小尺寸，避免内容区被缩到不可操作。
和相似组件的区别
Splitter 调整稳定布局；Drawer 临时展开覆盖或推开内容。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验