Tabs Componentes

O que é

São as abas "Descrição / Medidas / Entrega" de uma página de produto, ou "Mensal / Anual" numa tabela de preços. Só um painel aparece por vez; clicar numa aba mostra o painel dela. Você monta com atributos: o grupo (sw-tabs), a barra de abas (sw-tabs-nav), cada aba (sw-tabs-it) e cada painel (sw-tabs-pnl). O visual se escolhe com uma palavra: sw-tabs="pill".

O JavaScript do SWCore liga cada aba ao painel da mesma posição (1ª aba → 1º painel), mede a aba ativa e desliza o marcador até ela — por isso ele acompanha o tamanho de cada texto. Também funciona no teclado (setas ← → trocam de aba) e, se as abas não couberem na tela do celular, aparecem setinhas ‹ › para rolar a barra. Funciona no tema claro e no escuro.

Quando usar

• Página de produto: Descrição, Medidas, Avaliações.
• Preços: Mensal / Anual (pill ou boxed ficam com cara de chave seletora).
• Painel administrativo: Perfil, Segurança, Faturamento — abas na vertical (vrt) economizam altura.
• Conteúdo parecido que a pessoa compara: cardápio do almoço / jantar, planos A / B.
• Se o conteúdo for longo e a pessoa precisar ver vários de uma vez, use o Accordion.

Comece aqui

1. 1

   Coloque o SWCore: o CSS no <head> e o JavaScript no fim do <body> (é ele que troca as abas).

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Escreva as abas dentro de sw-tabs-nav e os painéis logo depois, na mesma ordem. class="is-act" marca a aba e o painel que começam abertos.

   Descrição Medidas Entrega

   Camiseta 100% algodão, fio 30.1, costura reforçada.

   P 50×70 · M 53×72 · G 56×74 cm.

   Envio em 24h. Frete grátis acima de R$ 199.

   <div sw-tabs>
     <div sw-tabs-nav>
       <button sw-tabs-it class="is-act">Descrição</button>
       <button sw-tabs-it>Medidas</button>
       <button sw-tabs-it>Entrega</button>
     </div>
     <div sw-tabs-pnl class="is-act">Camiseta 100% algodão, fio 30.1, costura reforçada.</div>
     <div sw-tabs-pnl>P 50×70 · M 53×72 · G 56×74 cm.</div>
     <div sw-tabs-pnl>Envio em 24h. Frete grátis acima de R$ 199.</div>
   </div>

3. 3

   Para trocar o visual, escreva uma palavra no sw-tabs:

   Descrição Medidas Entrega

   Camiseta 100% algodão, fio 30.1, costura reforçada.

   P 50×70 · M 53×72 · G 56×74 cm.

   Envio em 24h. Frete grátis acima de R$ 199.

   <div sw-tabs="pill">
     ...as mesmas abas e painéis...
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div sw-tabs="boxed">
  <div sw-tabs-nav>
    <button sw-tabs-it class="is-act">Mensal</button>
    <button sw-tabs-it>Anual <span sw-badge="suc pp">-20%</span></button>
  </div>
  <div sw-tabs-pnl class="is-act"><strong>R$ 49/mês</strong> — cancele quando quiser.</div>
  <div sw-tabs-pnl><strong>R$ 470/ano</strong> — equivale a R$ 39/mês.</div>
</div>

<div sw-tabs="vrt">
  <div sw-tabs-nav>
    <button sw-tabs-it class="is-act">Perfil</button>
    <button sw-tabs-it>Segurança</button>
    <button sw-tabs-it>Notificações</button>
  </div>
  <div sw-tabs-pnl class="is-act">
    <div sw-fld><label for="rc-tb-nome">Nome</label><input sw-inp id="rc-tb-nome" value="Beatriz Rocha"></div>
  </div>
  <div sw-tabs-pnl>
    <button sw-btn="out p">Trocar senha</button>
  </div>
  <div sw-tabs-pnl>
    <label sw-chk><input type="checkbox" checked> Receber aviso de novo pedido</label>
  </div>
</div>

<button type="button" sw-btn="ghost p" id="ver-avaliacoes">Ver avaliações ↓</button>

<div sw-tabs id="produto">
  <div sw-tabs-nav>
    <button sw-tabs-it sw-tabs-idx="descricao" class="is-act">Descrição</button>
    <button sw-tabs-it sw-tabs-idx="avaliacoes">Avaliações</button>
  </div>
  <div sw-tabs-pnl="descricao" class="is-act">Tênis de corrida com amortecimento.</div>
  <div sw-tabs-pnl="avaliacoes">★★★★★ "Muito confortável!" — Carla</div>
</div>

<script>
  document.getElementById('ver-avaliacoes').addEventListener('click', () => {
    SW.Tabs.show('#produto', 'avaliacoes');
  });

  // saber qual aba a pessoa abriu
  document.getElementById('produto').addEventListener('sw:tabs:change', (e) => {
    console.log('aba:', e.detail.key);   // "avaliacoes"
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css — o visual.
• swcore.min.js — trocar as abas.
• swcore.compl.min.css — só se usar ícone swi-* nas abas.

Cuidados — erros comuns

• Número de abas diferente do número de painéis: a aba que sobrar não mostra nada (todos os painéis somem). Uma aba para cada painel, na mesma ordem.
• Esquecer o is-act: a primeira aba é marcada sozinha, mas escreva nas duas (aba e painel) para a página não "piscar" ao carregar.
• Dentro de um <form>, use <button type="button" sw-tabs-it> — senão clicar na aba envia o formulário.
• Uma palavra de visual por vez (pill, boxed, glow ou gradient); só o vrt combina com elas.

O que ele não faz

• Não troca de aba sozinha (sem autoplay) nem guarda a aba escolhida quando a página recarrega.
• Os painéis trocam sem animação de entrada.