Tabs
Um componente de navegação por abas com suporte a estilos, tamanhos e conteúdo dinâmico.
Geral
Informações gerais sobre o sistema.
Utilização
index.tsx
import {
Tabs,
TabsList,
TabsTrigger,
TabsContent
} from "@convertcompany/ui";
Exemplos
Variantes
Primary
Renderiza as abas com o estilo primário.
Informações resumidas...
Underline
Renderiza as abas com uma linha embaixo.
Informações resumidas...
Pill
Renderiza as abas com o estilo de badge.
Informações resumidas...
Tamanhos
Você pode definir o tamanho das abas utilizando a propriedade size. Os tamanhos disponíveis são sm, md e lg. O padrão é md.
sm
md
lg
Props
Esse componente extende a implementação do Radix UI, e por isso, possui as mesmas propriedades. Para mais detalhes, consulte a documentação oficial.
Tabs
| Propriedade | Tipo |
|---|---|
| defaultValueValor inicial da aba ativa. | string |
| valueValor controlado da aba ativa. | string |
| onValueChangeCallback ao trocar de aba. | (value: string) => void |
| variantEstilo do grupo de abas. | default underline |
| sizeTamanho das abas. | sm md lg |
TabsList, TabsTrigger, TabsContent
| Propriedade | Tipo |
|---|---|
| classNameClasse CSS adicional. | string |