Wizard

Wizards são componentes utilizados para um processo passo a passo que permite ao usuário inserir informações em uma ordem prescrita e na qual as etapas subsequentes podem depender das informações inseridas nas etapas anteriores.

---

Quando usar:

• Quando precisar completar etapas em uma determinada sequência.
• For necessário exibir informações em blocos para simplificar o fluxo.

Quando não usar:

• Quando o processo não for tão complexo, não havendo necessidade de divisão em etapas.
• Quando houver mais de três etapas, deve se considerar dividir em mais processos.
• Quando não houver necessidade de guiar o usuário numa sequência.

---

Uso

<CdsWizard
	variant="green"
	size="md"
	text="Lorem Ipsum"
	@click="wizardClick = true"
/>

---

Preview

{
  "steps": [
    {
      "title": "Informações gerais",
      "subtitle": "Insira as informações de identificação"
    },
    {
      "title": "Endereço de entrega"
    },
    {
      "title": "Informações complementares",
      "subtitle": "Adicione informações complementares para triagem",
      "image": "https://static.vecteezy.com/system/resources/previews/011/537/753/non_2x/box-empty-state-single-isolated-icon-with-flat-style-free-vector.jpg"
    }
  ],
  "activeStep": 0,
  "nextButtonVariant": "blue"
}

Informações gerais

Insira as informações de identificação

Nome

Sobrenome

Nome da mãe

Endereço de entrega

Preencha todos os campos obrigatórios da etapa anterior para liberar a seção de endereço de entrega

Informações complementares

Preencha todos os campos obrigatórios da etapa anterior para liberar a seção de informações complementares

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
* steps (required)	array	[]	--	Um array com objetos com as propriedades 'title' (obrigatório), 'subtitle' e 'image'. O 'title' e 'subtitle' são textos que descrevem a etapa, a 'imagem' é o caminho para a imagem do empty-state;
activeStep	number	0	--	O índice da etapa atual (0, 1 ou 2)
clickable	boolean	false	--	Ativa ou desativa o clique no passo (etapa) para ir para esta etapa
nextButtonText	string	'Próximo'	--	O texto do botão de avançar (ação principal).
cancelButtonText	string	'Anterior'	--	O texto do botão de voltar (ação secundária).
nextButtonVariant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante de cor. São 10 variantes:
disableNextButton	boolean	false	--	Controla a disponibilidade do botão de ação principal.

Eventos

Nome	Descrição
@step-change	Evento emitido quando a etapa ativa é alterada
@cancel-action	Evento que indica que a ação de cancelar foi acionada. Emitido ao clicar no botão de voltar na primeira etapa.
@next-action	Evento que indica que ação de avançar foi acionada

Slots

Nome	Descrição
#`step-${index + 1}-header`
#`step-${index + 1}`