tabs · Casa Hacker DS

overview

01

conteúdo do overview.

variantes

02

Variante única.

comportamentos

03

Click no tab ativa o panel correspondente
← / → movem foco entre tabs
Home / End vão pro primeiro / último tab
Enter / Space ativam o tab focado
Auto-init pelo components.js em qualquer [role='tablist']

modifiers · api

04

prop	tipo	default	descrição
role="tablist"	attr	—	container
role="tab"	attr	—	botão tab
role="tabpanel"	attr	—	painel de conteúdo
aria-controls	attr	—	id do panel correspondente
.active	class	—	tab ativo
hidden	attr no panel	—	escondido (não-ativo)

quando usar

05

use

Conteúdo relacionado dividido em poucas seções (2-6)
Quando comparação rápida entre seções é útil
Configurações agrupadas por categoria

não use

Conteúdo sequencial — usa wizard
Mais de 7 tabs — usa sidebar ou accordion
Tabs aninhadas — fluxo confuso

acessibilidade

06 · wcag aa

role="tablist", role="tab", role="tabpanel"
aria-selected reflete estado
aria-controls aponta pro id do panel
Tab navigation pula tabs não-ativos (tabindex -1)
Setas implementadas (✓ no components.js)

código

07 · html

<div role="tablist" class="tabs">
  <button role="tab" aria-controls="p1" class="tab active">um</button>
  <button role="tab" aria-controls="p2" class="tab">dois</button>
</div>
<div role="tabpanel" id="p1" class="tab-panel">conteúdo um</div>
<div role="tabpanel" id="p2" class="tab-panel" hidden>conteúdo dois</div>