代码演示

如何引入

import { Steps } from '@kousum/semi-ui-vue';
const Step = Steps.Step;

默认步骤条（旧版）

建议使用简易版 steps（新版），旧版后续会逐渐 deprecate

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Steps current={1} onChange={(i)=>console.log(i)}>

5

        <Steps.Step title="Finished" description="This is a description" />

6

        <Steps.Step title="In Progress" description="This is a description" />

7

        <Steps.Step title="Waiting" description="This is a description" />

8

    </Steps>

9

);

Show Error

Auto Save

简单步骤条（新版）

通过设置 type="basic" 显示为简洁风格步骤条

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Steps type="basic" current={1} onChange={(i)=>console.log(i)}>

5

        <Steps.Step title="Finished" description="This is a description" />

6

        <Steps.Step title="In Progress" description="This is a description" />

7

        <Steps.Step title="Waiting" description="This is a description" />

8

    </Steps>

9

);

Show Error

Auto Save

导航步骤条

通过设置 type="nav" 显示为导航风格步骤条。导航风格的步骤条有以下特点：

1. 步骤条不支持交互。

2. 适用于步骤间互相关联较小，内容互不影响，且需要突出页面视觉元素时使用。

3. 步骤条的宽度按照内容物撑开。

4. Steps.Step 仅支持title、className、style 属性。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

12

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div style={{ display: 'flex', justifyContent: 'center' }}>

5

        <Steps type="nav" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}>

6

            <Steps.Step title="注册账号" />

7

            <Steps.Step title="这个项目的文字比较多多多多" />

8

            <Steps.Step title="产品用途" />

9

            <Steps.Step title="期待尝试功能" />

10

        </Steps>

11

    </div>

12

);

Show Error

Auto Save

迷你尺寸步骤条

通过设置 size="small" 显示迷你尺寸步骤条

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Steps type="basic" size="small" current={1} onChange={(i)=>console.log(i)}>

5

        <Steps.Step title="Finished" description="This is a description" />

6

        <Steps.Step title="In Progress" description="This is a description" />

7

        <Steps.Step title="Waiting" description="This is a description" />

8

    </Steps>

9

);

Show Error

Auto Save

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

12

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div style={{ display: 'flex', justifyContent: 'center' }}>

5

        <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}>

6

            <Steps.Step title="注册账号" />

7

            <Steps.Step title="这个项目的文字比较多多多多" />

8

            <Steps.Step title="产品用途" />

9

            <Steps.Step title="期待尝试功能" />

10

        </Steps>

11

    </div>

12

);

Show Error

Auto Save

处理进度

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

70

 

1

import { Steps, Button } from '@kousum/semi-ui-vue';

2

import { defineComponent, reactive } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

​

6

  const state = reactive({

7

    current: 0,

8

  });

9

​

10

  function next() {

11

    const current = state.current + 1;

12

    state.current = current

13

  }

14

​

15

  function prev() {

16

    const current = state.current - 1;

17

    state.current = current

18

  }

19

​

20

  return () => {

21

​

22

    const { current } = state;

23

    const { Step } = Steps;

24

    const steps = [

25

      {

26

        title: 'First',

27

        content: 'First-content',

28

      },

Show Error

Auto Save

竖直方向的步骤条

通过设置 direction，使用竖直方向的步骤条

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Steps direction="vertical" current={1} style={{ width: '300px' }} onChange={(i)=>console.log(i)}>

5

        <Steps.Step title="Finished" description="This is a description" />

6

        <Steps.Step title="In Progress" description="This is a description" />

7

        <Steps.Step title="Waiting" description="This is a description" />

8

    </Steps>

9

);

Show Error

Auto Save

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Steps direction="vertical" type="basic" current={1} onChange={(i)=>console.log(i)}>

5

        <Steps.Step title="Finished" description="This is a description" />

6

        <Steps.Step title="In Progress" description="This is a description" />

7

        <Steps.Step title="Waiting" description="This is a description" />

8

    </Steps>

9

);

Show Error

Auto Save

指定步骤状态

步骤运行错误，使用 Steps 的 status 属性来指定当前步骤的状态。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Steps type="basic" current={1} status="error" onChange={(i)=>console.log(i)}>

5

        <Steps.Step title="Finished" description="This is a description" />

6

        <Steps.Step title="In Process" description="This is a description" />

7

        <Steps.Step title="Waiting" description="This is a description" />

8

    </Steps>

9

);

Show Error

Auto Save

自定义图标/状态

通过设置 Steps.Step 的 icon 属性，可以启用自定义图标
通过设置 Steps.Step 的 status 属性，可以自定义每个 step 的状态

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

12

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

import { IconHome, IconLock } from '@kousum/semi-icons-vue';

3

​

4

export default () => (

5

    <Steps type="basic" onChange={(i)=>console.log(i)}>

6

        <Steps.Step status="finish" title="已完成" />

7

        <Steps.Step status="error" title="错误" />

8

        <Steps.Step status="warning" title="警告" />

9

        <Steps.Step status="process" title="正在进行" icon={<IconHome size="extra-large" />} />

10

        <Steps.Step status="wait" title="等待" icon={<IconLock size="extra-large" />} />

11

    </Steps>

12

);

Show Error

Auto Save

onChange 回调

从 1.29.0 版本开始支持 onChange，可以使用它来实现处理进度。onChange 接收一个 number 类型的参数，该参数等于 initial + current。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

45

 

1

import { Steps } from '@kousum/semi-ui-vue';

2

import { defineComponent, reactive } from 'vue';

3

​

4

​

5

const Demo = defineComponent(() => {

6

​

7

​

8

  const state = reactive({

9

    current: 1,

10

  });

11

​

12

  function onChange(index) {

13

    state.current = index

14

  }

15

​

16

  return () => {

17

    const { current } = state;

18

    const { Step } = Steps;

19

    const steps = [

20

      {

21

        title: 'First',

22

        content: 'First-content',

23

      },

24

      {

25

        title: 'Second',

26

        content: 'Second-content',

27

      },

28

      {

Show Error

Auto Save

Accessibility

ARIA

• Steps、Step组件支持传入aria-label属性，来表示Steps和Step的描述
• Step组件具有 aria-current step 属性，表示这是步骤条内的一步

API 参考

Steps

整体步骤条。

参数	说明	类型	默认值	版本
className	类名	string
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态	number	0
direction	指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向	string	horizontal
hasLine	步骤条类型为basic时，可控制是否显示连接线	boolean	true	1.18.0
initial	起始序号，从 0 开始记数	number	0
status	指定当前步骤的状态，可选 wait、process、finish、error、warning	string	process
size	对于简单步骤条和导航步骤条，可选尺寸尺寸，值为small、default	string	default	1.18.0
style	样式	CSSProperties
type	步骤条类型，可选 fill、basic、nav	string	fill	1.18.0
onChange	改变步骤条的回调	(index: number) => void	-	1.29.0

Steps.Step

步骤条内的每一个步骤。

参数	说明	类型	默认值	版本
aria-label	容器aria-label	React.AriaAttributes["aria-label"]
className	类名	string
description	步骤的详情描述，可选	ReactNode	-
icon	步骤图标的类型，可选	ReactNode	-
role	容器role	React.AriaRole	-
status	指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait、process、finish、error、warning	string	wait
style	样式	CSSProperties
title	标题	ReactNode	-
onClick	点击回调	function	-
onKeyDown	回车事件回调	function	-

文案规范

• 步骤标题
  • 标题应保持简洁，避免截断和换行；
  • 使用句子大小写书写；
  • 不要包含标点符号
• 描述
  • 为标题补充上下文信息
  • 不要以标点符号结尾

设计变量

color

width

height

spacing

radius

font

animation

other

变量	默认值	用法
$color-steps-bg-active	var(--semi-color-fill-1)	步骤条背景 - 按下态
$color-steps-bg-default	var(--semi-color-text-2)	未到达步骤条图标背景
$color-steps-bg-hover	var(--semi-color-fill-0)	步骤条背景 - 悬浮态
$color-steps-border-default	transparent	步骤条描边 - 默认
$color-steps-icon-default	var(--semi-color-text-2)	未到达步骤条图标背景
$color-steps-text-default	rgba(var(--semi-white), 1)	步骤条图标默认文本颜色
$color-steps_danger-text-active	var(--semi-color-danger-active)	错误步骤条文本颜色 - 按下态
$color-steps_danger-text-default	var(--semi-color-danger)	错误步骤条文本颜色 - 默认态
$color-steps_danger-text-hover	var(--semi-color-danger-hover)	错误步骤条文本颜色 - 悬浮态
$color-steps_icon_after-bg	var(--semi-color-fill-2)

显示第 1 条-第 10 条，共 45 条

• 1
• 2
• 3
• 4
• 5

变量	默认值	用法
$width-steps_basic_item_description	100%	步骤条辅助描述文本宽度
$width-steps_basic_item_description-maxWidth	268px	步骤条辅助描述文本最大宽度
$width-steps_basic_item_title-maxWidth	80%	步骤条标题宽度
$width-steps_basic_vertical_item_title-maxWidth	100%	垂直步骤条标题最大宽度
$width-steps_basic_vertical_item_description	100%	垂直步骤条辅助描述文本最大宽度
$width-steps_basic_item_left_number-icon	24px	步骤条左侧图标宽度
$width-steps_basic_small_item_left_number-icon	20px	小尺寸步骤条左侧数字图标高度
$width-steps_item-border	1px	旧版步骤条高度
$width-steps_item_title	100%	步骤条标题宽度
$width-steps_item_description	100%	步骤条辅助描述文本宽度

显示第 1 条-第 10 条，共 16 条

• 1
• 2

变量	默认值	用法
$height-steps_basic_vertical_icon_content-minHeight	42px	垂直步骤条图标+内容最小高度
$height-steps_basic_vertical_small_item_content-minHeight	40px	小尺寸垂直步骤条内容最小高度
$height-steps_basic_item_left-icon	24px	步骤条左侧图标高度
$height-steps_basic_item_left_number-icon	24px	步骤条左侧图标高度
$height-steps_basic_small_item_left-icon	20px	小尺寸步骤条左侧图标高度
$height-steps_basic_item	72px	简易版步骤条高度
$height-steps_item	72px	旧版步骤条高度
$height-steps_item_left	24px	步骤条左侧图标容器高度
$height-steps_title_after	1px	步骤条连接线高度
$height-steps_vertical_icon_after	9999px	垂直步骤条连接线长度

显示第 1 条-第 10 条，共 10 条

• 1

变量	默认值	用法
$spacing-steps_basic_item-paddingLeft	16px	简版步骤条左侧内边距
$spacing-steps_basic_vertical_item-paddingTop	9px	简版垂直步骤条顶部内边距
$spacing-steps_basic_vertical_item_content-paddingBottom	22px	简版垂直步骤条内容区底部内边距
$spacing-steps_basic_vertical_item_icon-paddingBottom	9px	简版垂直步骤条图标底部内边距
$spacing-steps_basic_item_left-marginRight	8px	简版步骤条图标右侧外边距
$spacing-steps_basic_item_title-paddingRight	16px	简版步骤条标题右侧内边距
$spacing-steps_basic_item_title-paddingBottom	4px	简版步骤条标题底部内边距
$spacing-steps_basic_item-marginRight	16px	简版步骤条标题右侧外边距
$spacing-steps_item-marginRight	16px	旧版步骤条右侧外边距
$spacing-steps_item-paddingY	$spacing-base-tight	旧版步骤条垂直方向内边距

显示第 1 条-第 10 条，共 12 条

• 1
• 2

变量	默认值	用法
$radius-steps_basic_item_left_number_icon	var(--semi-border-radius-circle)	步骤条左侧图标圆角
$radius-steps_item	var(--semi-border-radius-medium)	步骤条整体圆角
$radius-steps_item_left	32px	步骤条左侧距离

显示第 1 条-第 3 条，共 3 条

• 1

变量	默认值	用法
$font-steps_basic_item_left_number_icon-fontWeight	600	步骤条数字图标文本字重
$font-steps_basic_item_title-fontWeight	600	步骤条标题文本字重
$font-steps_basic_item_title-lineHeight	24px	步骤条标题文本行高
$font-steps_item_title-fontWeight	$font-weight-bold	步骤条标题文本字重
$font-steps_item_left-fontWeight	$font-weight-bold	步骤条标题左侧图标内部文本字重
$font-steps_item_left-lineHeight	32px	步骤条标题左侧图标内部文本行高
$font-steps_nav_item_title-fontWeight	$font-weight-regular	导航型步骤条标题文本字重 - 默认态
$font-steps_nav_item_title_active-fontWeight	600	导航型步骤条标题文本字重 - 激活态

显示第 1 条-第 8 条，共 8 条

• 1

变量	默认值	用法
$transition_duration-steps_item_title-text	var(--semi-transition_duration-none)	步骤条标题文字-背景色-动画持续时间
$transition_function-steps_item_title-text	var(--semi-transition_function-easeIn)	步骤条标题文字-背景色-过渡曲线
$transition_delay-steps_item_title-text	var(--semi-transition_delay-none)	步骤条标题文字-背景色-延迟时间
$transition_duration-steps_item_title-icon	var(--semi-transition_duration-none)	步骤条标题文字-背景色-动画持续时间
$transition_function-steps_item_title-icon	var(--semi-transition_function-easeIn)	步骤条标题文字-背景色-过渡曲线
$transition_delay-steps_item_title-icon	var(--semi-transition_delay-none)	步骤条标题文字-背景色-延迟时间
$transition_duration-steps_item_backgroundColor	var(--semi-transition_duration-none)	步骤条标题文字-背景色-动画持续时间
$transition_function-steps_item_backgroundColor	var(--semi-transition_function-easeIn)	步骤条标题文字-背景色-过渡曲线
$transition_delay-steps_item_backgroundColor	var(--semi-transition_delay-none)	步骤条标题文字-背景色-延迟时间

显示第 1 条-第 9 条，共 9 条

• 1

变量	默认值	用法
$transform_scale-step-item	var(--semi-transform_scale-small)	步骤条item-放大

显示第 1 条-第 1 条，共 1 条

• 1