Pular para o conteúdo principal
Lemonade

Stepper

O componente é uma indicação visual do progresso do usuário através de um conjunto de passos. Serve para guiar o usuário através de um conjunto de etapas para completar um processo específico, geralmente um Wizzard.

Boas práticas

  • Apresente os itens sequenciais da esquerda para a direita.
  • Permita que o usuário volte em algum passo caso necessite revisar uma etapa.
  • Sempre que possível utilize alguma indicação do status dos passos do wizard, como quando está completo/validado, se está incompleto/inválido.

Situação dos Steps

CompletoApresentado quando o usuário atingiu o requisito mínimo para prosseguir ao próximo passo.
AtivoApresentado quando as informações ainda não foram preenchidas e o passo ainda não foi validado.
IncompletoEtapas ainda não atingidas.

Exemplos

Estados controlados manualmente

O estado do stepper é controlado manualmente através das propriedades do componente Step.

import { Step, Stepper } from '@lemonade/ui'
import React from 'react'

function StepperDefaultDemo() {
  return (
    <Stepper>
      <Step status='completed' title='Completed step' />
      <Step status='active' title='Second and active step' />
      <Step title='Some incompleted step' />
      <Step title='Last and incompleted step' />
    </Stepper>
  )
}

export default StepperDefaultDemo

Controlando o estado com o hook useStepperState

Opcionalmente, o hook useStepperState pode ser usado para controlar o estado do stepper.

import { Button, HFlow, Step, Stepper, useStepperState, VFlow } from '@lemonade/ui'
import React from 'react'

function StepperHookDemo() {
  const { getStepStatus, nextStep, previousStep } = useStepperState(1)

  return (
    <VFlow>
      <Stepper>
        <Step status={getStepStatus(0)} title='Step 1' />
        <Step status={getStepStatus(1)} title='Step 2' />
        <Step status={getStepStatus(2)} title='Step 3' />
        <Step status={getStepStatus(3)} title='Step 4' />
      </Stepper>

      <HFlow justifyContent='center'>
        <Button size='small' onClick={previousStep}>
          Previous
        </Button>
        <Button size='small' kind='primary' onClick={nextStep}>
          Next
        </Button>
      </HFlow>
    </VFlow>
  )
}

export default StepperHookDemo