Tree

Componente de arvore hierarquica com suporte a checkboxes, expand/collapse, multiplos modos de selecao e icones customizaveis. Substitui FancyTree por implementacao nativa com acessibilidade WCAG 2.1 AA, dark mode automatico e scrollbar customizada.

components/tree.cssAbrir no Figma

Uso

Quando e como utilizar o componente tree para exibir dados hierarquicos.

• Com checkbox -- Selecao multipla de nos com estado indeterminate para pais parcialmente selecionados.
• Sem checkbox -- Navegacao hierarquica sem selecao. Use .ds-tree--no-checkbox.
• Compacta -- Versao com menor espacamento para areas restritas. Use .ds-tree--compact.
• Altura configuravel -- Controle a altura maxima com .ds-tree--height-sm/md/lg/xl/auto.

Use o componente tree para representar estruturas hierarquicas como organogramas, categorias aninhadas ou arvores de localizacao. Para listas simples, prefira checkboxes ou selects.

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descricao
Container	.ds-tree	Wrapper com borda, border-radius e overflow
Scroll	.ds-tree-scroll	Area com scroll interno e scrollbar customizada
Header	.ds-tree-header	Barra superior com titulo e acoes
Titulo	.ds-tree-title	Texto do header, Inter 14px w500
Acoes	.ds-tree-actions	Botoes de acao (expandir/recolher tudo)
No	.ds-tree-node	Elemento individual da arvore
Header do no	.ds-tree-node-header	Linha clicavel com hover
Toggle	.ds-tree-toggle	Seta triangular expand/collapse
Checkbox	.ds-tree-checkbox	Input com estados checked/indeterminate
Icone	.ds-tree-icon	Icone pasta/pagina via Ipe-Icons
Label	.ds-tree-label	Texto do no com ellipsis
Filhos	.ds-tree-children	Container aninhado com indent e borda

Propriedades

Classes disponiveis para configurar o componente tree.

Propriedade	Tipo	Default	Descrição
.ds-tree	classe	—	Container principal da arvore com borda e border-radius.
.ds-tree-scroll	classe	—	Container com scroll interno (max-height 250px padrao).
.ds-tree--height-sm	classe	—	Altura maxima 150px.
.ds-tree--height-md	classe	—	Altura maxima 250px (padrao).
.ds-tree--height-lg	classe	—	Altura maxima 400px.
.ds-tree--height-xl	classe	—	Altura maxima 600px.
.ds-tree--height-auto	classe	—	Sem limite de altura (cresce com o conteudo).
.ds-tree-header	classe	—	Header opcional com titulo e acoes.
.ds-tree-title	classe	—	Titulo do header (14px w500).
.ds-tree-actions	classe	—	Container de botoes de acao no header.
.ds-tree-action	classe	—	Botao de acao individual (expandir tudo, etc.).
.ds-tree-node	classe	—	No individual da arvore.
.ds-tree-node-header	classe	—	Linha clicavel do no (toggle + checkbox + icon + label).
.ds-tree-node--expanded	classe	—	No com filhos visiveis.
.ds-tree-node--leaf	classe	—	No folha (sem filhos). Oculta o toggle.
.ds-tree-node--folder	classe	—	No pasta (com filhos). Exibe icone de pasta.
.ds-tree-node--disabled	classe	—	No desabilitado (opacidade 0.5, sem interacao).
.ds-tree-node--loading	classe	—	No com spinner no toggle (carregamento lazy).
.ds-tree-toggle	classe	—	Seta de expand/collapse (20x20). Rotaciona 90deg quando expandido.
.ds-tree-checkbox	classe	—	Checkbox do no com estados checked e indeterminate.
.ds-tree-icon	classe	—	Icone do no (18x18). Desabilitado por padrao, usa Ipe-Icons.
.ds-tree-label	classe	—	Texto do no (14px w400) com text-overflow ellipsis.
.ds-tree-children	classe	—	Container de nos filhos com indent e borda lateral.
.ds-tree--no-checkbox	classe	—	Variante sem checkboxes (apenas navegacao).
.ds-tree--compact	classe	—	Variante compacta com padding e fonte reduzidos.

Codigo

Snippets prontos para copiar e usar no seu projeto.

Arvore basica com checkbox

<div class="ds-tree">
  <div class="ds-tree-header">
    <span class="ds-tree-title">Localizacoes</span>
    <div class="ds-tree-actions">
      <button class="ds-tree-action">Expandir tudo</button>
      <button class="ds-tree-action">Recolher tudo</button>
    </div>
  </div>
  <div class="ds-tree-scroll">
    <!-- No pai (pasta) -->
    <div class="ds-tree-node ds-tree-node--folder ds-tree-node--expanded">
      <div class="ds-tree-node-header" tabindex="0" role="treeitem" aria-expanded="true">
        <span class="ds-tree-toggle"></span>
        <label class="ds-tree-checkbox">
          <input type="checkbox" indeterminate>
          <span class="ds-tree-checkbox-box">
            <span class="ds-tree-checkbox-icon"></span>
          </span>
        </label>
        <span class="ds-tree-label">Parana</span>
      </div>
      <div class="ds-tree-children" role="group">
        <!-- No folha -->
        <div class="ds-tree-node ds-tree-node--leaf">
          <div class="ds-tree-node-header" tabindex="0" role="treeitem">
            <span class="ds-tree-toggle"></span>
            <label class="ds-tree-checkbox">
              <input type="checkbox" checked>
              <span class="ds-tree-checkbox-box">
                <span class="ds-tree-checkbox-icon"></span>
              </span>
            </label>
            <span class="ds-tree-label">Curitiba</span>
          </div>
        </div>
        <div class="ds-tree-node ds-tree-node--leaf">
          <div class="ds-tree-node-header" tabindex="0" role="treeitem">
            <span class="ds-tree-toggle"></span>
            <label class="ds-tree-checkbox">
              <input type="checkbox">
              <span class="ds-tree-checkbox-box">
                <span class="ds-tree-checkbox-icon"></span>
              </span>
            </label>
            <span class="ds-tree-label">Londrina</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Arvore sem checkbox

<div class="ds-tree ds-tree--no-checkbox">
  <div class="ds-tree-scroll">
    <div class="ds-tree-node ds-tree-node--folder ds-tree-node--expanded">
      <div class="ds-tree-node-header" tabindex="0" role="treeitem" aria-expanded="true">
        <span class="ds-tree-toggle"></span>
        <label class="ds-tree-checkbox">
          <input type="checkbox">
          <span class="ds-tree-checkbox-box">
            <span class="ds-tree-checkbox-icon"></span>
          </span>
        </label>
        <span class="ds-tree-label">Documentos</span>
      </div>
      <div class="ds-tree-children" role="group">
        <div class="ds-tree-node ds-tree-node--leaf">
          <div class="ds-tree-node-header" tabindex="0" role="treeitem">
            <span class="ds-tree-toggle"></span>
            <label class="ds-tree-checkbox">
              <input type="checkbox">
              <span class="ds-tree-checkbox-box">
                <span class="ds-tree-checkbox-icon"></span>
              </span>
            </label>
            <span class="ds-tree-label">Relatorio_2025.pdf</span>
          </div>
        </div>
        <div class="ds-tree-node ds-tree-node--leaf">
          <div class="ds-tree-node-header" tabindex="0" role="treeitem">
            <span class="ds-tree-toggle"></span>
            <label class="ds-tree-checkbox">
              <input type="checkbox">
              <span class="ds-tree-checkbox-box">
                <span class="ds-tree-checkbox-icon"></span>
              </span>
            </label>
            <span class="ds-tree-label">Planilha_dados.xlsx</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Arvore compacta com altura customizada

<div class="ds-tree ds-tree--compact ds-tree--height-sm">
  <div class="ds-tree-header">
    <span class="ds-tree-title">Categorias</span>
  </div>
  <div class="ds-tree-scroll">
    <div class="ds-tree-node ds-tree-node--folder ds-tree-node--expanded">
      <div class="ds-tree-node-header" tabindex="0" role="treeitem" aria-expanded="true">
        <span class="ds-tree-toggle"></span>
        <label class="ds-tree-checkbox">
          <input type="checkbox" checked>
          <span class="ds-tree-checkbox-box">
            <span class="ds-tree-checkbox-icon"></span>
          </span>
        </label>
        <span class="ds-tree-label">Bovinos</span>
      </div>
      <div class="ds-tree-children" role="group">
        <div class="ds-tree-node ds-tree-node--leaf">
          <div class="ds-tree-node-header" tabindex="0" role="treeitem">
            <span class="ds-tree-toggle"></span>
            <label class="ds-tree-checkbox">
              <input type="checkbox" checked>
              <span class="ds-tree-checkbox-box">
                <span class="ds-tree-checkbox-icon"></span>
              </span>
            </label>
            <span class="ds-tree-label">Nelore</span>
          </div>
        </div>
        <div class="ds-tree-node ds-tree-node--leaf">
          <div class="ds-tree-node-header" tabindex="0" role="treeitem">
            <span class="ds-tree-toggle"></span>
            <label class="ds-tree-checkbox">
              <input type="checkbox" checked>
              <span class="ds-tree-checkbox-box">
                <span class="ds-tree-checkbox-icon"></span>
              </span>
            </label>
            <span class="ds-tree-label">Angus</span>
          </div>
        </div>
      </div>
    </div>
    <div class="ds-tree-node ds-tree-node--folder">
      <div class="ds-tree-node-header" tabindex="0" role="treeitem" aria-expanded="false">
        <span class="ds-tree-toggle"></span>
        <label class="ds-tree-checkbox">
          <input type="checkbox">
          <span class="ds-tree-checkbox-box">
            <span class="ds-tree-checkbox-icon"></span>
          </span>
        </label>
        <span class="ds-tree-label">Suinos</span>
      </div>
      <div class="ds-tree-children" role="group">
        <!-- filhos ocultos -->
      </div>
    </div>
  </div>
</div>

No com estados especiais

<!-- No desabilitado -->
<div class="ds-tree-node ds-tree-node--leaf ds-tree-node--disabled">
  <div class="ds-tree-node-header" tabindex="-1" role="treeitem" aria-disabled="true">
    <span class="ds-tree-toggle"></span>
    <label class="ds-tree-checkbox">
      <input type="checkbox" disabled>
      <span class="ds-tree-checkbox-box">
        <span class="ds-tree-checkbox-icon"></span>
      </span>
    </label>
    <span class="ds-tree-label">Item indisponivel</span>
  </div>
</div>

<!-- No carregando -->
<div class="ds-tree-node ds-tree-node--folder ds-tree-node--loading">
  <div class="ds-tree-node-header" tabindex="0" role="treeitem">
    <span class="ds-tree-toggle"></span>
    <label class="ds-tree-checkbox">
      <input type="checkbox">
      <span class="ds-tree-checkbox-box">
        <span class="ds-tree-checkbox-icon"></span>
      </span>
    </label>
    <span class="ds-tree-label">Carregando subitens...</span>
  </div>
</div>

Design

Especificacoes visuais e tokens utilizados no componente.

Especificacoes

Propriedade	Default	Compacta
Padding (scroll)	8px	8px
Padding (node header)	4px 8px	2px 4px
Gap (node header)	4px	4px
Checkbox	18x18	16x16
Icone	18x18	16x16
Fonte label	14px w400	12px w400
Indent filhos	20px + 9px margin	16px + 7px margin
Toggle	20x20	20x20
Border-radius	8px (container), 4px (nodes)	8px (container), 4px (nodes)
Scrollbar	6px width	6px width

Variantes de altura

Classe	Max-height
.ds-tree--height-sm	150px
.ds-tree--height-md	250px
.ds-tree--height-lg	400px
.ds-tree--height-xl	600px
.ds-tree--height-auto	sem limite

Tokens utilizados

Elemento	Background	Borda	Texto
Container	--color-bg-secondary	--color-border	--color-text-primary
Header	--color-bg-tertiary	--color-border	--color-text-primary
Node hover	--color-bg-tertiary	--	--
Checkbox default	--color-bg-secondary	--color-border	--
Checkbox checked	--color-primary	--color-primary	white
Toggle/Icone	--	--	--color-text-secondary
Label	--	--	--color-text-primary
Children border	--	--color-border-light	--
Acao (action)	transparent	--	--color-primary

Versão0.1.0

Última atualização13 mar 2025

Caminhosrc/components/tree.css