Tabs Y2Tabs
Navegação em abas - 6 estilos visuais, navegação por teclado, ARIA completo, vertical ou horizontal.
1. Básico
Conteúdo da aba Visão Geral. Use as setas do teclado para navegar.
Conteúdo da aba Instalação.
Conteúdo da aba Configuração.
2. Muitas Abas - Scroll Horizontal
Quando as abas não cabem na tela o nav rola horizontalmente. Os itens nunca quebram linha.
Role o nav na horizontal para ver todas as abas - funciona com toque e mouse.
Visão Geral
Relatórios
Usuários
Configurações
Integrações
Faturamento
Suporte
Logs
3. Estilos Clássicos
PILL (.is-pil)
Pill ativo com cor primaria.
Profile
Settings
CARD (.is-crd)
Card com borda no painel de conteudo.
Tab 2
Tab 3
UNDERLINE (.is-und)
Linha fina abaixo do item ativo.
Reviews
FAQ
4. Estilos Modernos
SEGMENTED CONTROL (.is-seg)
Estilo iOS com pill flutuante sobre fundo cinza.
Semanal
Mensal
BUTTON GROUP (.is-brd)
Grupo de botoes conectados, ideal para alternar visualizacoes.
Grid
Mapa
DOT INDICATOR (.is-dot)
Ponto colorido abaixo do ativo. Minimalista e elegante.
Atividade
Relatorio
NEON GLOW (.is-neon)
Dark com glow colorido no item ativo.
Analytics
Logs
5. Posição: Topo Centralizado .is-ctr
Abas centralizadas horizontalmente no topo.
Explorar
Favoritos
6. Posição: Esquerda .is-vrt
Navegação lateral esquerda. Ideal para dashboards e painéis de controle.
Relatórios
Usuarios
7. Posição: Direita .is-vrt.is-end
Navegação lateral direita. Combina bem com painéis de configurações.
Seguranca
Notificacoes
8. Posição: Embaixo .is-btm
Quick Reference
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
y2tabs |
div | Ativa Y2Tabs no container |
.y2tabs-nav |
div | Lista de botões de aba |
.y2tabs-it |
button | Botão individual de aba |
.y2tabs-it.is-act |
button | Aba ativa (inicial) |
.y2tabs-cnt |
div | Container dos painéis de conteúdo |
.y2tabs-pnl |
div | Painel de conteúdo individual |
.is-pil |
[y2tabs] | Estilo pill - fundo arredondado no ativo |
.is-crd |
[y2tabs] | Estilo card - borda no painel de conte�do |
.is-und |
[y2tabs] | Estilo underline - linha abaixo do ativo |
.is-seg |
[y2tabs] | Segmented Control - estilo iOS com pill flutuante |
.is-brd |
[y2tabs] | Button Group - botões conectados em grupo |
.is-dot |
[y2tabs] | Dot Indicator - ponto colorido abaixo do ativo |
.is-neon |
[y2tabs] | Neon Glow - dark mode com glow colorido |
.is-vrt |
[y2tabs] | Navegação lateral esquerda (vertical) |
.is-vrt.is-end |
[y2tabs] | Navegação lateral direita |
.is-ctr |
[y2tabs] | Abas centralizadas horizontalmente |
.is-btm |
[y2tabs] | Navegação fixo embaixo - mobile tab bar |
.is-fl |
[y2tabs] | Abas ocupam 100% da largura |
.is-sm / .is-lg |
[y2tabs] | Tamanhos dos botões de aba |