Stepper

Indicador de progresso em etapas para fluxos multi-step.

Uso

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

const etapa = ref(0)

const steps = [
  { label: 'Dados pessoais' },
  { label: 'Endereço' },
  { label: 'Revisão' },
]
</script>

<template>
  <Stepper v-model="etapa" :steps="steps">
    <template #step-0>
      <p>Formulário de dados pessoais.</p>
    </template>
    <template #step-1>
      <p>Formulário de endereço.</p>
    </template>
    <template #step-2>
      <p>Revise suas informações.</p>
    </template>
  </Stepper>
</template>

Props

Prop	Tipo	Padrão
steps	StepperStep[]	obrigatório
modelValue	number	0
linear	boolean	false

StepperStep

Campo	Tipo	Descrição
label	string	Título da etapa
description	string	Descrição opcional da etapa

Slots

Slot	Descrição
step-{i}	Conteúdo da etapa de índice i
completed	Conteúdo exibido ao concluir todas as etapas
prev-trigger	Botão "Anterior" customizado
next-trigger	Botão "Próximo" customizado
actions	Área de ações totalmente customizada

Events

Evento	Payload	Descrição
update:modelValue	number	Emitido ao avançar/retroceder