Navegação por abas com indicador deslizante fluido e animação moderna de transição. Suporta sw-tab.
Alterna entre painéis de conteúdo de forma instantânea e fluida. O indicador deslizante inteligente acompanha a aba ativa e os painéis entram com animação suave de fade e elevação.
Cada aba .sw-tabs-it controla um painel .sw-tabs-pnl correspondente. O indicador .sw-tabs-ind desliza com física suave e o conteúdo ativo recebe a animação sw-tab-enter.
Componentes responsivos e leves com foco em performance e elegância visual no ecossistema Nill.
Animações fluidas no scroll, 8 cores semânticas completas e total compatibilidade com Tailwind CSS v4.
API acessível via teclado, eventos customizados e transição suave por padrão.
<div sw-tab>
<div class="sw-tabs-nav">
<button class="sw-tabs-it is-act" sw-tabs-idx="0">Visão Geral</button>
<button class="sw-tabs-it" sw-tabs-idx="1">Recursos</button>
<button class="sw-tabs-it" sw-tabs-idx="2">Código & API</button>
</div>
<div class="sw-tabs-pnl is-act">Conteúdo do painel Visão Geral.</div>
<div class="sw-tabs-pnl">Conteúdo do painel Recursos.</div>
<div class="sw-tabs-pnl">Conteúdo do painel Código & API.</div>
</div>Total de 98.400 acessos únicos consolidados nos últimos 7 dias.
Relatório mensal com crescimento acumulado de +34.8% no período.
<div sw-tab class="is-boxed">
<div class="sw-tabs-nav">
<button class="sw-tabs-it is-act" sw-tabs-idx="0">Métricas Diárias</button>
<button class="sw-tabs-it" sw-tabs-idx="1">Semanal</button>
<button class="sw-tabs-it" sw-tabs-idx="2">Mensal</button>
</div>
<div class="sw-tabs-pnl is-act">Conteúdo das métricas diárias.</div>
<div class="sw-tabs-pnl">Conteúdo semanal acumulado.</div>
<div class="sw-tabs-pnl">Relatório mensal consolidado.</div>
</div><div sw-tab class="is-pill">
<div class="sw-tabs-nav">
<button class="sw-tabs-it is-act" sw-tabs-idx="0">Todos os Itens</button>
<button class="sw-tabs-it" sw-tabs-idx="1">Aprovados</button>
<button class="sw-tabs-it" sw-tabs-idx="2">Pendentes</button>
</div>
<div class="sw-tabs-pnl is-act">Exibindo todos os registros.</div>
<div class="sw-tabs-pnl">Exibindo itens aprovados.</div>
<div class="sw-tabs-pnl">Exibindo itens pendentes.</div>
</div>Gerencie seus dados pessoais, avatar e bio pública no sistema SWCore.
Proteja sua conta com autenticação de dois fatores e tokens com expiração rápida.
Receba notificações instantâneas sobre deploys, webhooks e erros de execução.
Plano Pro Ativo — Próxima renovação automática em 01/09/2026.
<div sw-tab class="is-vrt">
<div class="sw-tabs-nav">
<button class="sw-tabs-it is-act" sw-tabs-idx="0">Perfil & Conta</button>
<button class="sw-tabs-it" sw-tabs-idx="1">Segurança & 2FA</button>
<button class="sw-tabs-it" sw-tabs-idx="2">Notificações</button>
<button class="sw-tabs-it" sw-tabs-idx="3">Faturamento</button>
</div>
<div class="sw-tabs-pnl is-act">Painel de configurações de perfil.</div>
<div class="sw-tabs-pnl">Opções de segurança e chaves de acesso.</div>
<div class="sw-tabs-pnl">Preferências de notificações e alertas.</div>
<div class="sw-tabs-pnl">Faturas e plano atual.</div>
</div>3 clusters ativos com balanceamento de carga e 99.98% de disponibilidade.
Réplicas de leitura sincronizadas e snapshots automáticos a cada 6 horas.
Regras de WAF e certificados TLS renovados automaticamente.
<div sw-tab class="is-vrt is-rgt">
<div class="sw-tabs-nav">
<button class="sw-tabs-it is-act" sw-tabs-idx="0">Servidores Cloud</button>
<button class="sw-tabs-it" sw-tabs-idx="1">Bancos de Dados</button>
<button class="sw-tabs-it" sw-tabs-idx="2">Firewall & SSL</button>
</div>
<div class="sw-tabs-pnl is-act">Instâncias e servidores ativos.</div>
<div class="sw-tabs-pnl">Clusters e réplicas de banco de dados.</div>
<div class="sw-tabs-pnl">Regras de segurança e certificados SSL.</div>
</div>sw-tab / sw-tabssw-tabs-idxPadrãois-boxedis-pillis-vrtis-slideis-btmsw:tabs:changeSW.Tabs.show(container, key)Nenhuma.
sw-tabs-idx precisa bater exatamente com a ordem dos .sw-tabs-pnl.