← 返回 Web 词条

树状列表

Web需自己实现

Web 原生没有这个

网页没有原生树状列表,需要自行实现层级、方向键、展开状态和焦点移动。

通常怎么做:简单层级可用嵌套列表和 disclosure;桌面应用式树按 APG Treeview 模式实现。

适用范围:桌面与移动端现代浏览器

社区一般叫它 Tree View · Tree

它用缩进和展开状态显示父子层级,用户可以逐层打开或收起分支。

  • 像文件夹一样一层层展开的列表
  • 前面有小箭头能打开子项的目录
  • 有父项子项缩进排列的树
  • 树形视图
  • 层级树
  • 可展开目录树

其他平台的相似实现

Android需自己实现
该平台没有原生实现

Android 和通用 Material 3 没有树状列表组件,需要用列表状态自行维护层级、缩进和展开。

看 Android 视角 →

使用规范

什么时候用

  • 文件、组织或分类本身有多层父子关系,且需要在同一视图中展开浏览

什么时候别用

  • 移动端层级很深、节点很多,逐层进入页面通常更容易操作

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →