Use etapas para exibir uma série de ações ou eventos sequenciais. Você pode adicionar quantas etapas forem necessárias.
1

Primeira etapa

Estas são instruções ou conteúdos que se aplicam apenas à primeira etapa.
2

Segunda etapa

Estas são instruções ou conteúdos que se aplicam apenas à segunda etapa.
3

Terceira etapa

Estas são instruções ou conteúdos que se aplicam apenas à terceira etapa.
Steps example
<Steps>
  <Step title="First Step">
    These are instructions or content that only pertain to the first step.
  </Step>
  <Step title="Second Step">
    These are instructions or content that only pertain to the second step.
  </Step>
  <Step title="Third Step">
    These are instructions or content that only pertain to the third step.
  </Step>
</Steps>

Propriedades de Steps

children
ReactElement<StepProps>[]
required
Uma lista de componentes Step.
titleSize
string
default:"p"
O tamanho dos títulos dos passos. Um entre p, h2 e h3.

Propriedades individuais da etapa

children
string | ReactNode
required
O conteúdo de uma etapa, seja como texto simples ou como componentes.
icon
string
O ícone a ser exibido.Opções:
  • nome do ícone do Font Awesome
  • nome do ícone do Lucide
  • código SVG compatível com JSX, entre chaves
  • URL para um ícone hospedado externamente
  • caminho para um arquivo de ícone no seu projeto
Para ícones SVG personalizados:
  1. Converta seu SVG usando o conversor SVGR.
  2. Cole seu código SVG no campo de entrada de SVG.
  3. Copie o elemento completo <svg>...</svg> do campo de saída JSX.
  4. Coloque o código SVG compatível com JSX entre chaves: icon={<svg ...> ... </svg>}.
  5. Ajuste height e width conforme necessário.
iconType
string
O estilo do ícone do Font Awesome. Usado apenas com ícones do Font Awesome.Opções: regular, solid, light, thin, sharp-solid, duotone, brands.
title
string
O título é o texto principal da etapa e aparece ao lado do indicador.
stepNumber
number
O número da etapa.
titleSize
string
default:"p"
O tamanho dos títulos das etapas. Um dentre p, h2 e h3.