@illa-design/steps v1.3.0

Steps

It used for lead in user complete tasks step by step.

Installation

yarn add @illa-design/steps

Import component

import { Steps } from "@illa-design/steps"

API

Steps Basic Properties

Steps Events

Step Basic Properties

Example

Basic usage

<Steps current={2} variant="dot">
  <Step title="Succeeded" />
  <Step title="Processing" />
  <Step title="Pending" />
</Steps>

Set step's description

<Steps current={2}>
  <Step title="Succeeded" description="This is a description." />
  <Step title="Processing" description="This is a description." />
  <Step title="Pending" description="This is a description." />
</Steps>

Set step's status

<Steps current={2}>
  <Step title="Succeeded" description="This is a description." status="finish" />
  <Step title="Processing" description="This is a description." status="process" />
  <Step title="Pending" description="This is a description." status="wait" />
</Steps>

Set steps' layout direction

<Steps current={2} direction="vertical">
  <Step title="Succeeded" description="This is a description." status="finish" />
  <Step title="Processing" description="This is a description." status="process" />
  <Step title="Pending" description="This is a description." status="wait" />
</Steps>

Set the step's label position

<Steps current={2} labelPlacement="vertical" >
  <Step title="Succeeded" description="This is a description." status="finish" />
  <Step title="Processing" description="This is a description." status="process" />
  <Step title="Pending" description="This is a description." status="wait" />
</Steps>

Customize node style

const customDot = (iconNode, { index }) => {
  return <Tooltip content={index}>{iconNode}</Tooltip>
}
<Steps customDot={customDot} >
  <Step title="Succeeded" description="This is a description." status="finish" />
  <Step title="Processing" description="This is a description." status="process" />
  <Step title="Pending" description="This is a description." status="wait" />
</Steps>

Set change step by click

const [current, setCurrent] = useState(1)
  const onChange = (index: number) => {
    setCurrent(index)
  }
<Steps 
  onChange={onChange}
  current={current} 
>
  <Step title="Succeeded" description="This is a description." status="finish" />
  <Step title="Processing" description="This is a description." status="process" />
  <Step title="Pending" description="This is a description." status="wait" />
</Steps>