Visualização em árvore

Um modo de visualização em árvore apresentando uma lista hierárquica.

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

Modo básico de visualização em árvore

Seleção múltipla

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

Visualização em árvore controlada

A visualização em árvore também oferece uma API para controle.

Objeto complexo

Enquanto o componente TreeView/TreeItem maximiza a flexibilidade, um passo extra é necessário para lidar com um objetos complexos.

Vamos considerar uma variável de dados com a seguinte estrutura, a recursão pode ser usada para lidar com este cenário.

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

Visualização em árvore customizada

Ícones customizados, borda e animação

Clone do Gmail

Acessibilidade

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

O componente segue as práticas de autoria da WAI-ARIA.

API

• <TreeItem />
• <TreeView />