Tabs

Navegação horizontal (ou vertical) entre painéis irmãos. Cinco variantes — underline, underline-blue, segmented, block, pill — mais layout vertical.

Regras de design: cantos retos, indicador é linha sólida ou preenchimento total, máx. 7 tabs antes de virar scroll ou Select.

Uso básico

<script setup lang="ts">
import { Tabs } from '@halfbyte-labs/maka'

const tabs = [
  { value: 'resumo',  label: 'Resumo' },
  { value: 'equipe',  label: 'Equipe' },
  { value: 'faturas', label: 'Faturas', count: 3 },
  { value: 'logs',    label: 'Logs', disabled: true },
]
</script>

<template>
  <Tabs :tabs="tabs">
    <template #resumo>Visão geral do projeto.</template>
    <template #equipe>8 membros ativos.</template>
    <template #faturas>3 faturas em aberto.</template>
    <template #logs>Logs de auditoria.</template>
  </Tabs>
</template>

---

Variantes

underline DEFAULT

Indicador preto sólido de 3px. Padrão para a maioria das telas internas.

<Tabs variant="underline" :tabs="tabs">…</Tabs>

---

underline-blue

Indicador azul + label azul no ativo. Use quando a tab é a navegação primária da view.

<Tabs variant="underline-blue" :tabs="tabs">…</Tabs>

---

segmented TOGGLE

Caixa com borda preta 2px. Ativo = fundo preto + texto lime. Ideal para alternar visualizações do mesmo dado (lista/kanban).

<Tabs variant="segmented" :tabs="tabs">…</Tabs>

---

block PASTA

Tab levanta como aba de pasta. Funciona melhor com 2–4 abas de tema bem distinto.

<Tabs variant="block" :tabs="tabs">…</Tabs>

---

pill GHOST

Mais leve, mais "filtro". Use em controles auxiliares de gráficos e dashboards.

<Tabs variant="pill" :tabs="tabs">…</Tabs>

---

vertical

Layout em grade com sidebar. Navegação por teclado vira ↑/↓.

<Tabs variant="vertical" :tabs="tabs">…</Tabs>

---

Tamanhos

<!-- SM · 32px — tabelas e filtros -->
<Tabs variant="segmented" size="sm" :tabs="tabs">…</Tabs>

<!-- MD · 40px — padrão (default) -->
<Tabs variant="underline" size="md" :tabs="tabs">…</Tabs>

<!-- LG · 52px — landing/hero com display -->
<Tabs variant="underline" size="lg" :display="true" :tabs="tabs">…</Tabs>

---

Modificador display

Space Grotesk uppercase — reservar para tabs em marketing site e landing pages.

<Tabs variant="underline" :display="true" :tabs="tabs">…</Tabs>

---

Counter badge e status dot

Cada TabItem aceita count (número/string) e dot (indicador de status azul).

const tabs = [
  { value: 'overview',   label: 'Overview' },
  { value: 'pipeline',   label: 'Pipeline',  count: 7 },
  { value: 'seguranca',  label: 'Segurança', dot: true },
]

---

Props

Prop	Tipo	Padrão	Descrição
tabs	TabItem[]	obrigatório	Lista de tabs
variant	TabsVariant	underline	Estilo visual
size	TabsSize	md	Tamanho (sm · md · lg)
display	boolean	false	Uppercase Space Grotesk (marketing)
modelValue	string	—	Tab ativa (controlled)
defaultValue	string	Primeiro tab	Tab ativa inicial (uncontrolled)

TabItem

Campo	Tipo	Descrição
value	string	Identificador único
label	string	Texto exibido no gatilho
count	number|string	Badge numérico à direita do label
dot	boolean	Ponto azul de status (atualização disponível)
icon	Component	Componente Vue (ícone SVG)
disabled	boolean	Desabilita o tab

Slots

Cada tab tem um slot nomeado com seu value:

<template #meu-tab>Conteúdo do tab</template>

Events

Evento	Payload	Descrição
update:modelValue	string	Emitido ao trocar de tab

Tipos exportados

import type { TabsVariant, TabsSize, TabItem, TabsProps } from '@halfbyte-labs/maka'

type TabsVariant = 'underline' | 'underline-blue' | 'segmented' | 'block' | 'pill' | 'vertical'
type TabsSize    = 'sm' | 'md' | 'lg'