Tree view

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

Applications
Documents

<TreeView
  aria-label="file system navigator"
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
  sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
>
  <TreeItem nodeId="1" label="Applications">
    <TreeItem nodeId="2" label="Calendar" />
  </TreeItem>
  <TreeItem nodeId="5" label="Documents">
    <TreeItem nodeId="10" label="OSS" />
    <TreeItem nodeId="6" label="MUI">
      <TreeItem nodeId="8" label="index.js" />
    </TreeItem>
  </TreeItem>
</TreeView>

<TreeView
  aria-label="file system navigator"
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
  sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
>
  <TreeItem nodeId="1" label="Applications">
    <TreeItem nodeId="2" label="Calendar" />
  </TreeItem>
  <TreeItem nodeId="5" label="Documents">
    <TreeItem nodeId="10" label="OSS" />
    <TreeItem nodeId="6" label="MUI">
      <TreeItem nodeId="8" label="index.js" />
    </TreeItem>
  </TreeItem>
</TreeView>

Press Enter to start editing

Seleção múltipla

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

Applications
Documents

Visualização em árvore controlada

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

Applications
Documents

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',
    },
    // …
  ],
};

Parent

Propriedade ContentComponent

Você pode usar a propriedade ContentComponent e o hook useTreeItem para customizar ainda mais o comportamento do TreeItem.

Como limitar a expansão para clicar no ícone:

Applications
Documents

Ou aumentando a largura do indicador de estado:

Applications
Documents

Visualização em árvore customizada

Ícones customizados, borda e animação

Main

Clone do Gmail

All Mail
Trash
Categories
History

Itens desabilitados na árvore

Focus disabled items

One
Five
Seven

O comportamento dos itens desabilitados da árvore depende da propriedade disabledItemsFocusable.

Se é falsa:

As teclas de setas não focarão nos itens desabilitados e o próximo item não desabilitado será focado.
Digitar o primeiro caractere do rótulo de um item desabilitado não focará no item.
Interação do mouse ou teclado não irá expandir/recolher itens desabilitados.
Interação do mouse ou teclado não selecionará itens desabilitados.
Shift + teclas de setas irão pular itens desabilitados e o próximo item não desabilitado será selecionado.
Foco programático não focará itens desabilitados.

Se é verdadeira:

As teclas de setas focarão em itens desabilitados.
Digitar o primeiro caractere do rótulo de um item desabilitado focará no item.
Interação do mouse ou teclado não irá expandir/recolher itens desabilitados.
Interação do mouse ou teclado não selecionará itens desabilitados.
Shift + teclas de setas não irão pular itens desabilitados, mas o item desabilitado não será selecionado.
Foco programático focará itens desabilitados.

Acessibilidade

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)

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

Para ter uma exibição em árvore acessível, você deve usar aria-labelledby ou aria-label para fazer referência ou fornecer um rótulo na TreeView, caso contrário, os leitores de tela irão anunciá-lo como "tree", tornando difícil entender o contexto de um item específico da árvore.