Steps 步驟條

流程步驟指示：當前/完成/等待/錯誤四態，水平/垂直方向，可選點選導覽。橫向步驟條按定寬基準自動折行，標題始終一行顯示。

基礎用法

研墨
落筆
鈐印

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="研墨" />
    <LhStep title="落笔" />
    <LhStep title="钤印" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="研墨" />
    <LhStep title="落笔" />
    <LhStep title="钤印" />
  </LhSteps>
</template>

帶描述

註冊
填寫基本資料
驗證
電子郵件信箱與手機驗證
開通
開通帳號權限

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="注册" description="填写基本信息" />
    <LhStep title="验证" description="邮箱与手机验证" />
    <LhStep title="开通" description="开通账号权限" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="注册" description="填写基本信息" />
    <LhStep title="验证" description="邮箱与手机验证" />
    <LhStep title="开通" description="开通账号权限" />
  </LhSteps>
</template>

icon 為步驟指定自訂圖示（取內建 LhIcon 圖示名，如 user/check/star），未傳時完成/錯誤用勾叉，其餘顯示序號。需要完全自訂圖示繪製時，可用 #icon 插槽覆寫。

註冊
驗證
開通

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="注册" />
    <LhStep icon="check" title="验证" />
    <LhStep icon="star" title="开通" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="注册" />
    <LhStep icon="check" title="验证" />
    <LhStep icon="star" title="开通" />
  </LhSteps>
</template>

錯誤狀態

上傳
校驗
完成

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="上传" />
    <LhStep title="校验" />
    <LhStep title="完成" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="上传" />
    <LhStep title="校验" />
    <LhStep title="完成" />
  </LhSteps>
</template>

status 為整體覆寫：設定後所有步驟均為該狀態，適合自訂展示。

可點選導覽

選稿
挑選底本
臨摹
對臨或背臨
裝裱
上牆裝裱

當前步驟：1

vue

<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="选稿" description="挑选底本" />
    <LhStep title="临摹" description="对临或背临" />
    <LhStep title="装裱" description="上墙装裱" />
  </LhSteps>
</template>

vue

<script>
export default {
  data() {
    return { current: 1 }
  },
}
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="选稿" description="挑选底本" />
    <LhStep title="临摹" description="对临或背临" />
    <LhStep title="装裱" description="上墙装裱" />
  </LhSteps>
</template>

垂直方向

起
起勢藏鋒
行
行筆中鋒
收
收筆迴鋒

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="起" description="起势藏锋" />
    <LhStep title="行" description="行笔中锋" />
    <LhStep title="收" description="收笔回锋" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="起" description="起势藏锋" />
    <LhStep title="行" description="行笔中锋" />
    <LhStep title="收" description="收笔回锋" />
  </LhSteps>
</template>

定寬折行

橫向步驟條按 --lh-steps-item-basis（預設 160px）的基準寬度排布：容器放得下時各步等分一行，放不下時整步折到下一行，而不是把標題擠換行。標題始終單行顯示，過長時以省略號截斷；折行後行末步驟的連接線會自動隱藏，不指向行尾空白。

選稿
挑選底本
臨摹
對臨或背臨
題跋
題款蓋章
裝裱
上牆裝裱

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="选稿" description="挑选底本" />
    <LhStep title="临摹" description="对临或背临" />
    <LhStep title="题跋" description="题款盖章" />
    <LhStep title="装裱" description="上墙装裱" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="选稿" description="挑选底本" />
    <LhStep title="临摹" description="对临或背临" />
    <LhStep title="题跋" description="题款盖章" />
    <LhStep title="装裱" description="上墙装裱" />
  </LhSteps>
</template>

上例容器限寬 280px 以演示折行。想改變折行節奏時，透過 themeVars 覆寫 steps-item-basis（鍵自動加 --lh- 前綴）即可：<LhSteps :theme-vars="{ 'steps-item-basis': '220px' }">，也可經由 LhConfigProvider 的 componentTheme.steps 全域設定。

Steps API

LhSteps Props

屬性名	說明	類型	預設值
current	當前步驟索引（`v-model:current`，0 起）	`number`	`0`
direction	方向	`"horizontal" \| "vertical"`	`'horizontal'`
clickable	步驟是否可點選導覽	`boolean`	`false`
status	整體覆寫所有步驟的狀態（用於自訂展示）	`"wait" \| "process" \| "finish" \| "error"`	—
themeVars	元件級主題變數（鍵自動加 --lh- 前綴）	`{ [x: string]: string; }`	—
sx	sx 快速版面配置屬性	`LhSxProps`	—

LhSteps Events

事件名	說明	回呼參數
update:current	當前步驟變化（v-model）	`(index: number)`
change	當前步驟變化	`(index: number)`

LhStep Props

屬性名	說明	類型	預設值
title	步驟標題（也可用 title 插槽）	`string`	`''`
description	步驟描述（也可用 description 插槽）	`string`	`''`
icon	自訂圖示名稱（內建 LhIcon 圖示，未傳時 finish/error 用勾叉，其餘顯示序號）	`LhIconName`	—

Slots

插槽名	說明	作用元件
default	步驟項（LhStep 列表）	LhSteps
title	自訂標題	LhStep
description	自訂描述	LhStep
icon	自訂圖示（覆寫 icon prop 的預設繪製）	LhStep

元件級變數

以下 CSS 變數在 .lh-steps 上定義預設值，可透過 themeVars 全域或元件級覆寫（鍵自動加 --lh- 前綴）：

變數名	說明	預設值
`--lh-steps-item-basis`	橫向步驟項的定寬基準寬度，容器放不下時按此寬度折行	`160px`

無障礙

容器為 <ol role="list">，語意順序即流程順序
當前步驟自動設定 aria-current="step"
clickable 時已完成/當前步驟的頭部是真實 <button>，aria-label 取語言包（steps.finish / steps.error / steps.step）；等待中的步驟不可點選，避免引導使用者跳過未到達的階段
連接線由偽元素繪製，天然不進入無障礙樹

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/steps/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhStepsProps

export interface LhStepsProps {
  /** 當前步驟索引（v-model:current，0 起） */
  current?: number
  /** 方向 */
  direction?: LhStepsDirection
  /** 步驟是否可點選導覽 */
  clickable?: boolean
  /** 整體覆寫所有步驟的狀態（用於自訂展示） */
  status?: LhStepStatus
  /** 元件級主題變數（鍵自動加 --lh- 前綴，如 `steps-item-basis`） */
  themeVars?: Record<string, string>
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhStepProps

export interface LhStepProps {
  /** 步驟標題（也可用 title 插槽） */
  title?: string
  /** 步驟描述（也可用 description 插槽） */
  description?: string
  /** 自訂圖示名稱（未傳時 finish/error 用勾叉，其餘顯示序號） */
  icon?: LhIconName
}

LhIconName _{（來自 @lh-ui/share/core/icon (svgs.ts)）}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

LhStepsDirection _{（來自 @lh-ui/share/core/steps）}

/**
 * 步驟條方向
 */
export type LhStepsDirection = 'horizontal' | 'vertical'

LhStepStatus _{（來自 @lh-ui/share/core/steps）}

/**
 * 步驟狀態
 */
export type LhStepStatus = 'wait' | 'process' | 'finish' | 'error'

Steps 步驟條 ​

基礎用法 ​

帶描述 ​

錯誤狀態 ​

可點選導覽 ​

垂直方向 ​

定寬折行 ​

Steps API ​

LhSteps Props ​

LhSteps Events ​

LhStep Props ​

Slots ​

元件級變數 ​

無障礙 ​

類型定義 ​