Pular para o conteúdo
Ajude a traduzir esta página

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

<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>

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',
    },
    // …
  ],
};
  • Parent
    • Child - 1

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:

Ou aumentando a largura do indicador de estado:

Visualização em árvore customizada

Ícones customizados, borda e animação

  • Main
    • Hello
    • World
    • Something something

Clone do Gmail

  • All Mail

  • Trash

  • Categories

    • Social

      90

    • Updates

      2,294

    • Forums

      3,566

    • Promotions

      733

  • History

Itens desabilitados na árvore

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/TR/wai-aria-practices/#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.

API