FuelLabs/fuel-ui

Add Steps component

Closed this issue · 0 comments

  • This component will render a stepper with different styles
  • Need to have a hook to control stepper

Use case

function App() {
  const steps = useSteps()

  return (
    <Steps {...steps.providerProps}>
      <Steps.Dots>
        <Steps.Item value="1" />
        <Steps.Item value="2" />
      </Steps.Dots>
      <Steps.Content value="1">
        First step
      </Steps.Content>
      <Steps.Content value="2">
        Second step
      </Steps.Content>
    </Steps>
  )
}

Types

<Steps.Dots>: Render just small dots to indicate each step
<Steps.Navigation>: Render ordered items (dots with numbers inside) and a label for each icon