前端

树形控件Tree

你可能会说

文件夹那种一层层展开的,点小三角展开下一级。

把文件夹、部门或分类按父子关系排列,并让用户逐层展开或收起例如项目文件会显示“src”文件夹,展开后才能看到里面的页面文件。它主要帮助浏览层级;需要从中勾选并提交结果时,应使用 树选择 Tree Select。
林小hu
oil-oil
阿麦
前端组
后端组
组成结构 · Anatomy
设计部UI 组
整棵树的容器
有子节点才有,点击展开 / 收起
节点名称,可高亮选中
缩进一级,表示从属关系
常见变体 · Variants
可勾选Checkable
页面权限
查看
编辑
要在层级里批量选择,比如配权限
带连接线ShowLine
设计部
UI 组
用研组
需要加强父子节点归属辨识时
目录树Directory
📁 设计资源
📄 首页.sketch
📄 图标.sketch
展示文件目录,配文件夹图标更直观
典型使用场景
文件目录浏览
📁 vibe-ui-guide
📁 app
📄 globals.css
📄 page.tsx
📁 site
📁 public
组织架构选人
选择审批人
🏢 某某科技
设计部
林小hu
研发部
权限配置勾选
角色权限 · 运营已选 3 / 6 项
内容管理
发布文章
删除他人文章
数据看板
商品分类管理
商品分类
数码家电128 件编辑
耳机音箱46 件
智能穿戴32 件
家居生活96 件
延伸阅读 · 权威出处