Skip to content

Steps 步骤条

引导用户按照流程完成任务的导航条。

基本用法

简单的步骤条。

迷你版

迷你版的步骤条,通过设置<Steps size="small">启用。

带图标的步骤条

通过设置itemsicon属性,可以启用自定义图标。

步骤切换

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

竖直方向的步骤条

简单的竖直方向的步骤条。

点状步骤条

包含步骤点的进度条。

标签放置位置

修改标签放置位置为vertical

Steps Props 属性

属性说明类型默认值版本
current指定当前步骤,从0开始记数。number0
direction指定步骤条方向。目前支持水平(horizontal)竖直(vertical)两种方向horizontal | verticalhorizontal
labelPlacement指定标签放置位置,默认水平放图标右侧,可选vertical放图标下方horizontal | verticalhorizontal
progressDot点状步骤条,labelPlacement将强制为verticalbooleanfalse
size指定大小,目前支持普通(default)迷你(small)default | smalldefault
items配置选项卡内容StepItem[]-
ts
export interface StepItem {
  title?: string
  description?: string
  icon?: IconName
}
export interface StepItem {
  title?: string
  description?: string
  icon?: IconName
}

StepItem Props 属性

属性说明类型默认值版本
description步骤的详情描述,可选string-
icon步骤图标的类型,可选IconName-
title标题string-