mad-steps

Indicador de progresso em etapas. 4 variantes visuais, filhos declarativos via <mad-step>.

Props do <mad-steps>#

Prop	Tipo	Default	Descricao
variant	string	'dots'	arrows, dots, numbers, progress
current	int/string	1	Step ativo (1-based)
clickable	bool	false	Steps completos sao clicaveis
size	string	''	sm, '' (normal), lg
class	string	''	Classes CSS extras
mad:click	string	''	Metodo PHP chamado ao clicar step

Props do <mad-step> (filho)#

Prop	Tipo	Default	Descricao
key	string	auto (index)	Identificador unico
label	string	''	Texto do step (obrigatorio)
description	string	''	Texto secundario (dots e numbers)
icon	string	''	Icone Lucide
color	string	''	Cor customizada (CSS) aplicada quando o step esta completed ou active
status	string	auto	completed, active, pending, error

Comportamento automatico de status#

Com current="2":

• Steps 1..current-1 → completed (mostra checkmark)
• Step current → active
• Steps current+1..n → pending
• Step com status="error" explicito mantem error

Variantes#

Dots (padrao)#

<mad-steps variant="dots" current="2">
    <mad-step icon="user" label="Dados" description="Informacoes pessoais" />
    <mad-step icon="credit-card" label="Pagamento" />
    <mad-step icon="check" label="Confirmacao" />
</mad-steps>

Arrows#

<mad-steps variant="arrows" current="3">
    <mad-step label="Rascunho" />
    <mad-step label="Analise" />
    <mad-step label="Aprovado" />
    <mad-step label="Publicado" />
</mad-steps>

Numbers#

<mad-steps variant="numbers" current="2">
    <mad-step label="Identificacao" />
    <mad-step label="Documentos" />
    <mad-step label="Assinatura" />
</mad-steps>

Progress#

<mad-steps variant="progress" current="2">
    <mad-step label="Upload" />
    <mad-step label="Processando" />
    <mad-step label="Concluido" />
</mad-steps>

Steps clicaveis#

<mad-steps variant="dots" current="3" clickable mad:click="onStepClick">
    <mad-step key="dados" label="Dados" />
    <mad-step key="pagamento" label="Pagamento" />
    <mad-step key="confirma" label="Confirmacao" />
</mad-steps>

public function onStepClick(string $key): MadResponse
{
    return MadToast::info("Step: {$key}");
}

Step com erro#

<mad-steps variant="dots" current="3">
    <mad-step label="Dados" />
    <mad-step label="Pagamento" status="error" />
    <mad-step label="Confirmacao" />
</mad-steps>

Steps do banco — <mad-db-steps>#

Quando as etapas sao registros (funil, workflow, status), use a variante DB: ela carrega os steps no render e calcula o current pelo value.

Prop	Default	Descricao
model	''	Classe do model Eloquent (obrigatorio)
database	MAIN_DATABASE	Conexao
key	'id'	Campo PK (vira o key do step)
display	'nome'	Campo do label
color-field	''	Campo da cor — aplica cor customizada por step
order-by	'id asc'	Ordenacao
filters	[]	[['campo','op','val'], ...]
value	''	Valor atual (ID do step ativo)
variant	'arrows'	arrows, dots, numbers, progress
clickable	false	Steps completos sao clicaveis
size	''	sm, '', lg
class	''	Classes CSS extras
mad:click	''	Metodo PHP ao clicar

Atencao ao default: no <mad-db-steps> a variante padrao e arrows (no <mad-steps> e dots).

<mad-db-steps model="EtapaNegociacao" display="nome" color-field="cor"
    order-by="ordem asc" :value="$negociacao->etapa_id"
    variant="arrows" clickable mad:click="onMudaEtapa" />

Current dinamico via PHP#

<mad-steps variant="dots" :current="$pedido->etapa_atual">
    <mad-step label="Criado" />
    <mad-step label="Pago" />
    <mad-step label="Enviado" />
    <mad-step label="Entregue" />
</mad-steps>

NUNCA fazer#

{{-- ERRADO: montar steps manualmente com HTML/CSS --}}
<div class="steps">
    <div class="step active">1. Dados</div>
    <div class="step">2. Pagamento</div>
</div>

{{-- CERTO: usar mad-steps --}}
<mad-steps variant="dots" current="1">
    <mad-step label="Dados" />
    <mad-step label="Pagamento" />
</mad-steps>

{{-- ERRADO: montar wizard de etapas com biblioteca JS externa --}}
<div id="custom-wizard"></div>
<script>new CustomStepper('#custom-wizard', { steps: [...] });</script>

{{-- CERTO: usar mad-steps no Blade --}}
<mad-steps variant="arrows" current="2">...</mad-steps>