跳到主要內容

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'