Visualização em árvore

Um widget de exibição em árvore apresentando uma lista hierárquica.

As visualizações em árvore podem ser usadas para representar um navegador do sistema de arquivos que exibe pastas e arquivos, um item que representa uma pasta pode ser expandido para revelar o conteúdo da pasta, que pode ser arquivos, pastas ou ambos.

Modo básico de exibição de árvore

Seleção múltipla

Visualizações de árvore também suportam seleção múltipla.

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

Acessibilidade

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

The component follows the WAI-ARIA authoring practices.

API

• <TreeItem />
• <TreeView />