4.3 KiB
4.3 KiB
rc-steps
React steps component.
Usage
npm install rc-steps
<Steps current={1}>
<Steps.Step title="first" />
<Steps.Step title="second" />
<Steps.Step title="third" />
</Steps>
Example
https://react-component.github.io/steps/
API
name | type | default | description |
---|---|---|---|
type | string | default | diretypetion of Steps, could be `default` `navigation` `inline` |
direction | string | horizontal | direction of Steps, enum: `horizontal` or `vertical` |
current | number | 0 | index of current step |
initial | number | 0 | index initial |
size | string | size of Steps, could be `small` | |
labelPlacement | string | placement of step title, could be `vertical` | |
status | string | wait | status of current Steps, could be `error` `process` `finish` `wait` |
icons | { finish: ReactNode, error: ReactNode } | specify the default finish icon and error icon | |
itemRender | (item: StepProps, stepItem: React.ReactNode) => React.ReactNode | custom step item renderer | |
onChange | (current: number) => void | Trigger when Step changed |
Steps.Step
name | type | default | description |
---|---|---|---|
title | ReactNode | title of step item | |
subTitle | ReactNode | subTitle of step item | |
description | ReactNode | description of step item | |
icon | ReactNode | set icon of step item | |
status | string | status of current Steps, could be `error` `process` `finish` `wait` | |
tailContent | ReactNode | content above tail | |
disabled | bool | false | disabled step when onChange exist |
render | (stepItem: React.ReactNode) => React.ReactNode | custom step item renderer |
Development
npm install
npm start
License
rc-steps is released under the MIT license.