Como ele é
Lembra a barra lateral de um editor de código. Cada linha tem um ícone pequeno e um nome em texto miúdo: pasta fechada, pasta aberta ou folha de arquivo. Ao clicar numa pasta, o conteúdo aparece logo abaixo, recuado, com uma linha vertical fina ligando os itens do mesmo nível. O arquivo selecionado ganha um fundo suave, e itens bloqueados ficam esmaecidos, com cursor de proibido. As cores vêm das variáveis de tema, então acompanham o modo claro e o escuro do projeto. Árvores longas rolam dentro da própria caixa, e há a opção de direção da direita para a esquerda.
Você pode estar procurando isto se pediu algo assim
- mostrar a estrutura de pastas do projeto na documentação
- árvore de arquivos igual à do editor de código
- lista de pastas que abre e fecha para um tutorial de programação
- explicar onde fica cada arquivo do meu template
- menu lateral com pastas e arquivos clicáveis
- mostrar diretórios num artigo técnico sem usar print da tela
Também chamado de
- árvore de arquivos
- file tree
- tree view
- explorador de arquivos
- file explorer
- árvore de diretórios
- folder tree
Quando usar
- Documentação técnica que explica a estrutura de um projeto
- Tutorial ou curso de programação com passo a passo por arquivo
- Página de template ou kit à venda, mostrando o que vem dentro
- Painel interno que lista documentos em pastas
Quando evitar
- Árvores enormes, com milhares de itens abertos: a lista não é virtualizada
- Quando a navegação só pelo teclado é obrigatória, sem antes transformar as pastas em botões
Como pedir para a sua IA
Crie uma árvore de pastas e arquivos para a documentação do projeto, com pastas que abrem e fecham, ícones, linhas-guia e destaque do arquivo selecionado. Use as cores e a tipografia do meu tema, garanta navegação completa pelo teclado e bom funcionamento no celular.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Gaveteiro
Gaveteiro funciona com teclado?
Em parte. Em Gaveteiro, os arquivos são botões nativos, então recebem foco e são selecionados com Enter ou Espaço. As pastas, porém, abrem só com clique ou toque, porque a linha da pasta não é um botão no código original. Se o teclado for essencial, peça à IA que troque essa linha por um botão com aria-expanded.
Como monto a estrutura de Gaveteiro?
Você monta Gaveteiro direto no template, aninhando componentes Folder e File, cada um com id e nome, dentro de um Tree. As props initialExpandedItems e initialSelectedId definem o que começa aberto e selecionado, e a lista elements serve para abrir o caminho até o item escolhido. Os ícones também podem ser trocados por props.
Gaveteiro segue o modo escuro?
Sim, desde que o projeto tenha as variáveis de tema. Gaveteiro usa as cores de fundo e de destaque do tema em vez de cores fixas, por isso acompanha o claro e o escuro. O prompt do THM Componentes orienta a IA a usar os tokens de cor e tipografia do seu projeto.
