cosmemilton-ui/clientFeedback & overlays

CmWizard

Use para cadastros e processos em que a sequencia de passos precisa ficar visivel.

Import

tsx
import { CmWizard } from "cosmemilton-ui/client";

Cadastro em etapas

Etapa 1 de 3

Empresa

Dados cadastrais

Informe razao social, documento e segmento.

tsx
import { CmWizard } from "cosmemilton-ui/client";
import { CmText } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmWizard
      defaultStep="company"
      allowStepSelect
      steps={[
        {
          id: "company",
          title: "Empresa",
          description: "Dados cadastrais",
          content: <CmText tone="muted">Informe razao social, documento e segmento.</CmText>,
        },
        {
          id: "billing",
          title: "Financeiro",
          description: "Limites e cobranca",
          content: <CmText tone="muted">Configure limite, prazo e forma de pagamento.</CmText>,
        },
        {
          id: "review",
          title: "Revisao",
          description: "Conferencia final",
          content: <CmText tone="muted">Revise os dados antes de concluir.</CmText>,
        },
      ]}
    />
  );
}

API rapida

CmWizard

stepscurrentStep/defaultSteponStepChangeorientationpresentationallowStepSelect