@uiw/react-steps

Steps 步骤条
===


引导用户按照流程完成任务的导航条。当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

``jsx
import { Steps } from 'uiw';
// or
import Steps from '@uiw/react-steps';
`

$3

简单的步骤条。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Steps } from 'uiw';

export default function Demo() {
return (






)
}
`

$3

简单的步骤条。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Steps } from 'uiw';

export default function Demo() {
return (






)
}
`

$3

通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Steps, Icon } from 'uiw';

export default function Demo() {
return (

} title="注册" description="这里是步骤一的说明，可以很长很长哦。" />
} title="上传头像" description="这里是步骤一的说明，可以很长很长哦。" />


)
}
`

$3

使用 Steps 的 status 属性来指定当前步骤的状态。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Steps } from 'uiw';

export default function Demo() {
return (






)
}
`

$3

包含步骤点的进度条。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Steps } from 'uiw';

export default function Demo() {
return (






)
}
`

$3

通常配合内容及按钮使用，表示一个流程的处理进度。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Steps, Button, Notify } from 'uiw';

const conStyle = { minHeight: 200, backgroundColor: '#fafafa',textAlign: 'center', borderRadius: 6, paddingTop: 80, marginTop: 15 }
const steps = [
{
title: '第一步',
content: '注册一个账号',
}, {
title: '第二步',
content: '填写个人信息。',
}, {
title: '第三步',
content: '验证邮箱',
}
]

export default function Demo() {
const [current, setCurrent] = React.useState(0);
return (


`jsx mdx:preview&bg=#fff
import React from 'react';
import { Steps, Row, Col, Icon } from 'uiw';

export default function Demo() {
return (














} title="步骤四" description="这里是步骤一的说明，可以很长很长哦。" />



)
}
`

Props

$3

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |---------- |-------- |
| current | 指定当前步骤，从 0 开始记数。| Number | 0 |
| status | 当前步骤的状态，可选值为wait、process、finish、error | String | process |
| direction | 指定步骤条方向，支持水平vertical、horizontal | | horizontal |
| progressDot | 点状步骤条| | horizontal |

$3

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |---------- |-------- |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait process finish error | String | wait |
| title | 指定每个步骤标题 | String/ReactNode | - |
| description | 步骤的详情描述，可选 | String/ReactNode | - |
| icon | 步骤的图标，字符串类型从`组件中找，可选 | String/ReactNode | - |