Tabs

Organiza conteúdo em painéis alternáveis.

Exemplos

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

const tabs = [
  { value: 'geral', label: 'Geral' },
  { value: 'seguranca', label: 'Segurança' },
  { value: 'notif', label: 'Notificações' },
]
</script>

<template>
  <Tabs :tabs="tabs">
    <template #geral>
      <p>Configurações gerais da conta.</p>
    </template>
    <template #seguranca>
      <p>Senha e autenticação de dois fatores.</p>
    </template>
    <template #notif>
      <p>Preferências de e-mail e push.</p>
    </template>
  </Tabs>
</template>

Com tab desabilitada

<Tabs :tabs="[
  { value: 'ativo', label: 'Ativo' },
  { value: 'desabilitado', label: 'Desabilitado', disabled: true },
  { value: 'outro', label: 'Outro' },
]">
  <template #ativo>…</template>
  <template #outro>…</template>
</Tabs>

Props

Prop	Tipo	Padrão
tabs	TabItem[]	obrigatório
modelValue	string	—
defaultValue	string	Primeiro tab

TabItem

Campo	Tipo	Descrição
value	string	Identificador único do tab
label	string	Texto exibido no gatilho
disabled	boolean	Desabilita o tab (opcional)

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