CmTabs
Navegação local por abas com variantes e controle opcional.
Import
Caminho público recomendado para este componente.
import { CmTabs, CmTabsList, CmTabsTrigger, CmTabsContent } from "cosmemilton-ui";Use defaultValue para modo não controlado ou value/onValueChange para controlar a aba ativa no consumidor.
variant aceita default, modal ou folder; cada opção aplica uma aparência pronta sem depender de CSS externo.
folder usa abas claras sobrepostas com uma faixa colorida no topo; modal usa abas segmentadas para formulários e diálogos.
CmTabsTrigger aceita disabled; CmTabsContent mantém painéis inativos montados com hidden e pode desmontá-los com unmountOnHide.
Básico
A navegação mais simples usa defaultValue para definir a aba inicial.
Conteúdo da primeira aba.
Conteúdo da segunda aba.
Variantes
Use modal para layouts compactos e folder quando a navegação precisa parecer uma pasta com abas sobrepostas e faixa colorida.
Default
Estilo base para abas locais.
Dados principais do cadastro.
Informações complementares do registro.
Endereço e contatos relacionados.
Histórico e médias escolares.
Modal
Segmentado, compacto e adequado para formulários em modal.
Dados principais do cadastro.
Informações complementares do registro.
Endereço e contatos relacionados.
Histórico e médias escolares.
Pasta
Abas sobrepostas com faixa colorida no topo.
Dados principais do cadastro.
Informações complementares do registro.
Endereço e contatos relacionados.
Histórico e médias escolares.
Controlado
Use value/onValueChange para sincronizar a aba ativa; disabled bloqueia triggers e unmountOnHide remove painéis inativos.
Aba ativa: dados