Stepper 步骤条

用于表示进度的一组步骤。默认响应式：每个步骤能分到 140vp 时横向排列，否则纵向。点按步骤可以返回（或前进到下一步）。

基础用法

@Local step: number = 2;

SStepper({ value: this.step!! }) {
  SStepperItem({ step: 1, title: 'Address', description: 'Where to ship' })
  SStepperItem({ step: 2, title: 'Shipping', description: 'Pick a carrier' })
  SStepperItem({ step: 3, title: 'Payment', description: 'Card or wallet' })
  SStepperItem({ step: 4, title: 'Review' })
}
SButton({ text: 'Next' }).onClick(() => this.step = Math.min(4, this.step + 1))

网页近似预览，真机效果以 HarmonyOS 渲染为准。

纵向

linear: false 允许跳到任意步骤。

SStepper({ defaultValue: 2, orientation: 'vertical', linear: false }) {
  SStepperItem({ step: 1, title: 'Create account', description: 'Email and password' })
  SStepperItem({ step: 2, title: 'Verify email', description: 'Enter the 6-digit code we sent you' })
  SStepperItem({ step: 3, title: 'Invite team', disabled: true })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SStepper

shadcn-vue 的 Stepper：由分隔符连接的编号步骤；已完成的步骤显示对勾，当前步骤处于激活状态，之后的步骤处于非激活状态。

步骤为数字（与 reka-ui 一样从 1 开始计数；value 为当前步骤）。orientation: 'responsive'（默认）在步骤器自身的宽度能让每一步至少获得 140vp 时为水平排列，否则为垂直排列。linear（默认）只允许用户回到之前的步骤或前进到下一步；点按某一步即可选中它。

属性	类型	默认值	说明
value!!	number | undefined	undefined	受控的当前步骤（配合 !! 使用）。留空则为非受控。
defaultValue	number	1
orientation	StepperOrientation StepperOrientation = 'horizontal' | 'vertical' | 'responsive'	'responsive'
linear	boolean	true

事件	类型	默认值	说明
onValueChange	(v: number) => void	() => { }

插槽: 子组件（尾随闭包）

SStepperItem

单个步骤：指示圆圈（rounded-full size-8，已完成时显示对勾，否则显示数字）、标题（text-sm font-semibold）、描述（text-xs text-muted-foreground），以及通向下一步的分隔线（h-0.5 bg-muted，完成后为 bg-primary）。额外内容放入插槽中。

属性	类型	默认值	说明
step	number	1
title	ResourceStr	''
description	ResourceStr | undefined	undefined
disabled	boolean	false
icon	string | undefined	undefined	圆圈中显示的 lucide 图标，代替数字（已完成的步骤仍然显示对勾）。

插槽: 子组件（尾随闭包）