Tabs [sw-tabs]
Abas com navegação por teclado, rolagem com setas quando não cabem, e variantes pill/vertical.
1. Padrão
Conteúdo da aba Perfil.
Conteúdo da aba Segurança.
Conteúdo da aba Notificações.
2. Pill
Plano mensal.
Plano anual — 2 meses grátis.
3. Vertical
Com .is-vrt, a barra de abas vai pra esquerda em coluna.
Configurações gerais da conta.
Preferências de notificação.
Controles de privacidade.
4. Rolagem com Setas (muitas abas)
Quando as abas não cabem na largura disponível, setas de rolagem aparecem nas pontas automaticamente. Redimensione a janela ou veja num container estreito:
Visão geral da conta.
Relatórios detalhados.
Faturas e cobrança.
Integrações conectadas.
Configurações de segurança.
Membros da equipe.
Chaves de API.
Opções avançadas.
5. Slide (indicador deslizante)
Com .is-slide, uma barrinha com brilho desliza suavemente até a aba ativa.
6. Boxed (cápsula deslizante)
Com .is-boxed, um fundo em cápsula desliza atrás da aba ativa — estilo segmented control.
Dados do dia.
Dados da semana.
Dados do mês.
Dados do ano.
7. Glow (brilho neon)
Com .is-glow, a aba ativa ganha um brilho pulsante ao redor.
Conteúdo do painel.
Alertas recentes.
Configurações do sistema.
8. Gradiente (elevação)
Com .is-gradient, a aba ativa sobe com fundo em gradiente e sombra.
Página inicial.
Catálogo de produtos.
Sobre a empresa.
Referência
| Atributo/Classe | Descrição |
|---|---|
[sw-tabs] | Container raiz — inicializa o componente. |
.sw-tabs-nav | Barra de botões das abas. |
.sw-tabs-it | Botão de cada aba (ordem casa com os painéis). |
.sw-tabs-pnl | Painel de conteúdo de cada aba. |
.is-pill | Variante com abas em formato pílula. |
.is-vrt | Variante vertical — nav à esquerda. |
.is-slide | Indicador em barra desliza suavemente até a aba ativa. |
.is-boxed | Cápsula de fundo desliza atrás da aba ativa (segmented control). |
.is-glow | Aba ativa com brilho neon pulsante. |
.is-gradient | Aba ativa com fundo em gradiente e elevação. |
sw-tabs-idx (no botão) | Força o índice/id do painel associado. |
sw:tabs:change | Evento disparado ao trocar de aba — detail.key, detail.btn, detail.panel. |
SW.Tabs.show(container, key) | API — ativa uma aba programaticamente. |