树形浏览
Tree / Tree View
展示可展开的父子关系，并允许定位节点。
输入与选择
导航与布局
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'tree'
);
view.element.addEventListener('ui:select', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
目录、组织结构和嵌套资源。
什么时候不用
没有真实层级的平面列表不要强行用树。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "组件目录" |
items | [{"label":"输入与选择","children":[{"value":"text-input","label":"文本输入"},{"value":"checkbox","label":"复选框"}]},{"label":"导航与布局","open":false,"children":[{"v |
事件
ui:select
INTERACTION NOTES
交互与可访问性
- 展开与选择是两个不同动作。
- 提供层级、展开状态及方向键导航。
和相似组件的区别
Tree 表达父子关系；Accordion 主要展开独立内容区块。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Web Components、Solid · 来源核验