Índice da vitrine

Ações

Formulários

Retorno

Retorno

Conteúdo

Navegação

Collapses, acordeão, árvore e menu suspenso: tudo sobre elementos nativos, com teclado de graça.

Collapses

O details nativo vestido de cartão plano: abre, fecha e é acessível sem uma linha de JS.

O que este componente usa por baixo?

O elemento details nativo do navegador. O template só troca o marcador padrão pelo chevron e veste o cartão plano do sistema.

Por que não um accordion com JS?

Porque o nativo já entrega teclado, leitor de tela e estado aberto/fechado de graça. JS entra só quando o comportamento pedir mais do que isso.

Posso deixar um item aberto por padrão?

Sim: o atributo open no details, como o primeiro item desta lista demonstra.

Acordeão

Os mesmos blocos com o atributo name igual: o navegador fecha o aberto ao abrir outro, sem uma linha de JS.

O que difere um acordeão de um collapse?

O acordeão mantém um só bloco aberto por vez. Aqui isso vem do atributo name do details nativo, e não de estado guardado em script.

Preciso de JavaScript para isso?

Não. O agrupamento é do próprio elemento; onde o navegador ainda não o implementou, os blocos abrem juntos, que é degradação e não quebra.

Posso deixar um aberto no começo?

Sim, o atributo open no primeiro bloco, como esta lista demonstra.

Árvore

Hierarquia com details aninhados: teclado e estado vêm do disclosure nativo, e a linha-guia desenha os níveis sem imagem.

app/
- assets/css/
  - main.css
- components/
  - echo/
    Modal.vue
    Button.vue
  - layout/
- pages/
  - index.vue
  - componentes/
i18n/locales/
- es.json
- pt-BR.json
- en.json
shared/
nuxt.config.ts

Menu suspenso

O menu de página na superfície do tema, com clique fora, Escape, Tab para fora e retorno de foco ao gatilho.

Divisores

A linha que corta a página, com ou sem rótulo. Sem texto sai um hr de verdade, que é o elemento que significa quebra temática; com texto vira um div, porque hr é vazio por definição.

align

start

start-center

center

end-center

end

style

solid

dotted

dashed

.es-i--*

primary

success

danger

warning

info

dark

vertical

Esquerda

Meio

Direita

Paginação e trilha

A janela de páginas é calculada, e não uma lista inteira: com cem páginas, cem botões seriam cem paradas do Tab antes do conteúdo. A atual leva aria-current, porque cor sozinha não diz onde a pessoa está.

.es-pagination

.es-breadcrumb

Abas

Tablist da ARIA de verdade: setas do teclado percorrem as abas e só a ativa fica no fluxo do Tab. Sem esse foco roving, o Tab pararia em cada aba antes de chegar ao conteúdo.

O painel da primeira aba. O par aba/painel é ligado por aria-controls e aria-labelledby.

Linha do tempo

Uma lista ordenada, porque a ordem é o conteúdo. O trilho é borda e o marcador é pseudo-elemento: nenhum pixel de imagem.

Componentes novos2026-08-06
Paginação, abas, linha do tempo, gaveta e etiquetas entraram no sistema.
Cartões avançados2026-08-05
Barra, anel e estatística viraram primitivos, e os cartões de painel viraram composição.
Vitrine dividida2026-07-28
A página única virou seis, com menu lateral e uma rota por assunto.

<echo-drawer>

Um dialog nativo posicionado na borda: foco preso, Escape e fundo inerte vêm do elemento. Aqui o clique fora fecha, ao contrário do modal, porque gaveta é navegação e não decisão.