Tree View 树视图

用树视图，展现出层级关系。

树视图可用来代表文件系统，显示文件夹和文件。每一层可以用来代表文件夹的层次，以显示文件夹的内容。这些层次中的每一层，可以是文件，也可以文件夹。

Basic tree view

Multi selection

Tree views also support multi selection.

Controlled tree view

The tree view also offers a controlled API.

Rich object

While the TreeView/TreeItem component API maximizes flexibility, an extra step is needed to handle a rich object.

Let's consider a data variable with the following shape, recursion can be used to handle it.

const data = {
  id: 'root',
  name: 'Parent',
  children: [
    {
      id: '1',
      name: 'Child - 1',
    },
    // …
  ],
};

Customized tree view

Custom icons, border and animation

Gmail clone

可访问性

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)

The component follows the WAI-ARIA authoring practices.

API

• <TreeItem />
• <TreeView />