Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

基础用法

简单的步骤条。

设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置 space 属性即可，它接受 Number，单位为 px，如果不设置，则为自适应。设置 finish-status 属性可以改变已经完成的步骤的状态。

Step 1

Step 2

Step 3

export function StepsBasic() {  const [active, setActive] = useState(0);  const [interacted, setInteracted] = useState(false);  return (    <div>      <ElSteps active={interacted ? active : 3} finishStatus="success" style={stepsStyle}>        <ElStep title="Step 1" />        <ElStep title="Step 2" />        <ElStep title="Step 3" />      </ElSteps>      <ElButton        style={{ marginTop: 12 }}        onClick={() => {          setInteracted(true);          setActive((current) => (current > 2 ? 0 : current + 1));        }}      >        Next step      </ElButton>    </div>  );}

含状态的步骤条

每一步骤显示出该步骤的状态。

也可以使用 title 具名插槽，可以用 slot 的方式来取代属性的设置，在本文档最后的列表中有所有的插槽可供参考。

Done

Processing

Step 3

export function StepsWithStatus() {  return (    <ElSteps      active={3}      space={200}      finishStatus="success"      style={stepsStyle}    >      <ElStep title="Done" />      <ElStep title="Processing" />      <ElStep title="Step 3" />    </ElSteps>  );}

居中的步骤条

标题和描述可以居中。

Step 1

Some description

Step 2

Some description

Step 3

Some description

export function StepsCentered() {  return (    <ElSteps active={3} alignCenter style={stepsStyle}>      <ElStep title="Step 1" description="Some description" />      <ElStep title="Step 2" description="Some description" />      <ElStep title="Step 3" description="Some description" />    </ElSteps>  );}

带描述的步骤栏

每一步都有描述。

Step 1

Some description

Step 2

Some description

Step 3

Some description

export function StepsWithDescription() {  return (    <ElSteps active={3} style={stepsStyle}>      <ElStep title="Step 1" description="Some description" />      <ElStep title="Step 2" description="Some description" />      <ElStep title="Step 3" description="Some description" />    </ElSteps>  );}

带图标的步骤条

可以在步骤栏中使用各种自定义图标。

通过 icon 属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名 slot 来使用自定义的图标。

Step 1

Step 2

Step 3

export function StepsWithIcon() {  return (    <ElSteps active={3} style={stepsStyle}>      <ElStep title="Step 1" icon={<Edit />} />      <ElStep title="Step 2" icon={<Upload />} />      <ElStep title="Step 3" icon={<Picture />} />    </ElSteps>  );}

垂直的步骤条

垂直方向的步骤条。

只需要在 el-steps 元素中设置 direction 属性为 vertical 即可。

Step 1

Step 2

Step 3

export function StepsVertical() {  return (    <div style={{ height: 300, maxWidth: 600 }}>      <ElSteps active={3} direction="vertical">        <ElStep title="Step 1" />        <ElStep title="Step 2" />        <ElStep title="Step 3" />      </ElSteps>    </div>  );}

简洁风格的步骤条

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

Step 1

Step 2

Step 3

Step 1

Step 2

Step 3

export function StepsSimple() {  return (    <div>      <ElSteps active={3} simple style={{ ...stepsStyle, marginBottom: 16 }}>        <ElStep title="Step 1" icon={<Edit />} />        <ElStep title="Step 2" icon={<UploadFilled />} />        <ElStep title="Step 3" icon={<Picture />} />      </ElSteps>      <ElSteps active={3} simple finishStatus="success" style={stepsStyle}>        <ElStep title="Step 1" />        <ElStep title="Step 2" />        <ElStep title="Step 3" />      </ElSteps>    </div>  );}

Steps API

Steps Attributes

属性名	说明	类型	默认值
active	当前激活步骤的下标	`number`	0
space	每个步骤的间距，省略时自适应，支持百分比	`number` / `string`	—
direction	显示方向	`enum`	horizontal
alignCenter	是否居中对齐（横向有效）	`boolean`	false
simple	是否简洁模式	`boolean`	false
processStatus	当前步骤的状态	`enum`	process
finishStatus	已完成步骤的状态	`enum`	finish
className / style	根节点类名与样式	`string` / `CSSProperties`	—

Steps Events

事件名	说明	参数
onChange	当前激活步骤变化，等价官方 `change`	`Function`

Steps Slots

插槽名	说明	React 写法
default	步骤子项	children

Step Attributes

属性名	说明	类型	默认值
title	标题	`ReactNode`	—
description	描述	`ReactNode`	—
icon	自定义图标	`ReactNode`	—
status	当前步骤状态，传入后覆盖自动推导	`enum`	—
className	自定义类名	`string`	—

Step Slots

插槽名	说明	React 写法
icon	自定义图标	`icon` 属性
title	自定义标题	`title` 属性
description	自定义描述	`description` 属性