1.3.0 • Published 2 years ago

@illa-design/steps v1.3.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years ago

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

PropsDescTypeDefault
variantVariant of step"line" | "dot" | "navigation""line"
sizeSize of step"small" | "large""small"
directionLayout direction of nodes"vertical" | "horizontal""horizontal"
labelPlacementPlacement of label"vertical" | "horizontal""horizontal"
currentcurrent stepnumber1
statuscurrent step status"wait" | "process" | "finish" | "error""process"
customDotCustomize node(IconDot: React.ReactNode, stepConfig: CustomDotRecord) => React.ReactNode-

Steps Events

PropsDescTypeDefault
onChangeCallback when current step is changed(current: number, id: any)=> void-

Step Basic Properties

PropsDescTypeDefault
idId of stepany-
titletitle of stepstring | ReactNode-
descriptiondescription of stepstring | ReactNode-
statusstatus of step"wait" | "process" | "finish" | "error"-
disabledwhether step is disabledboolean-

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>
1.2.0

2 years ago

1.3.0

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.30

2 years ago

1.1.0

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.20

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.13

2 years ago

1.0.12

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.0.15

3 years ago

0.0.9

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago