跳到主要内容

Steps 步骤条

引导用户按流程完成任务，支持横向 / 纵向、可点击导航、整体状态覆盖。

基础用法​

基础用法
  1. 勾稿
    确定构图与线条
  2. 晕染
    分层晕开墨色
  3. 设色
    点染丹青之色
  4. 题款
    落款钤印成画
  1. 勾稿
  2. 晕染
  3. 设色
    此处需返工
  4. 题款
  1. 勾稿
    确定构图与线条
  2. 晕染
    分层晕开墨色
  3. 设色
  4. 题款
import { useState } from 'react'
import { LhSteps, LhStep } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhSteps current={current} onChange={(index) => setCurrent(index)}>
      <LhStep title="勾稿" description="确定构图与线条" />
      <LhStep title="晕染" description="分层晕开墨色" />
      <LhStep title="设色" description="点染丹青之色" />
      <LhStep title="题款" description="落款钤印成画" />
    </LhSteps>
  )
}

Steps Props​

属性说明类型可选值默认值
current当前步骤索引（0 起，受控）number——
defaultCurrent当前步骤默认值（非受控）number—0
direction方向'horizontal' | 'vertical'—'horizontal'
clickable步骤是否可点击导航boolean—false
status整体覆盖所有步骤的状态（用于自定义展示）'wait' | 'process' | 'finish' | 'error'——
themeVars组件级主题变量（键自动加 --lh- 前缀）Record<string, string>——
sx快速布局属性SxProps——

Step Props​

属性说明类型默认值
title步骤标题ReactNode—
description步骤描述ReactNode—
icon自定义图标名称（未传时 finish / error 用勾叉，其余显示序号）LhIconName—

Steps 事件​

事件说明回调签名Vue 对照
onChange当前步骤变化时触发（仅在 clickable 时触发）(index: number) => void@change
受控 / 非受控

传 current 即受控（组件不持有内部态）；传 defaultCurrent 走非受控内部态。两种模式下 onChange 都会触发。

可点击范围

即使 clickable 为真，也只有「已完成」与「进行中」的步骤渲染为 <button>；未来步骤（wait 态）始终为 <span>，避免跳到未达成的流程节点 —— 与 lh-ui-plus 行为一致。

子节点限制

children 必须直接是 LhStep（可用 .map 渲染），不可被自定义组件包裹 —— 父组件靠 Children.toArray 过滤子元素类型来注入索引，包裹会导致索引注入失败、状态计算错乱。

主题变量​

themeVars 的键会被自动加上 --lh- 前缀并写入根元素内联样式：

<LhSteps current={1} themeVars={{ 'steps-item-basis': '72px' }}>
  <LhStep title="勾稿" />
  <LhStep title="晕染" />
</LhSteps>

无障碍​

列表为 <ol role="list">；当前步骤输出 aria-current="step"，各步骤状态由 aria-label（语言包 steps.step 模板，如「第 2 步」）与状态类名共同表达。

ref​

forwardRef<HTMLOListElement> —— <ol> 根元素。LhStep 转发 HTMLLIElement。

样式​

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/steps'