Tabs
Abas para organizar conteudo em secoes navegaveis. Suporte a estado ativo, icones e paineis de conteudo.
Tabs Padrao
Preview
Conteudo da aba Geral. Aqui ficam as informacoes principais.
HTML
<div class="canta-tabs">
<div class="canta-tabs__list">
<button class="canta-tabs__tab canta-tabs__tab--active">Geral</button>
<button class="canta-tabs__tab">Configuracoes</button>
<button class="canta-tabs__tab">Permissoes</button>
</div>
<div class="canta-tabs__content">
<p>Conteudo da aba Geral.</p>
</div>
</div>Estado Ativo
A aba ativa recebe --active
Conteudo da aba Relatorios selecionada.
HTML
<button class="canta-tabs__tab">Dashboard</button>
<button class="canta-tabs__tab canta-tabs__tab--active">Relatorios</button>
<button class="canta-tabs__tab">Exportar</button>Com Icones
Icone + Texto
Gerencie suas informacoes de perfil.
HTML
<button class="canta-tabs__tab canta-tabs__tab--active">
<span class="material-symbols-rounded">person</span>
Perfil
</button>
<button class="canta-tabs__tab">
<span class="material-symbols-rounded">security</span>
Seguranca
</button>Demo Interativa
Clique nas abas
Conteudo da primeira aba.
API
| Classe | Descricao |
|---|---|
.canta-tabs | Container principal das abas |
.canta-tabs__list | Lista de botoes de aba |
.canta-tabs__tab | Botao individual de aba |
.canta-tabs__tab--active | Estado ativo da aba selecionada |
.canta-tabs__content | Painel de conteudo da aba |