@xwink/ui

    Stepper

    分步表单、开通流程的进度条。v-model 是当前步(从 1 起),完成的步显示对勾、当前步主色、连线跟着变色;键盘左右(纵向时上下)在步骤间移动、回车跳过去。

    横向线性与纵向非线性
    Step 2 of 0
    Step 1 of 0
    • linear(缺省开):只能点回已完成的步或往前一步,不能越过没做的步;非线性时每一步都能点。
    • orientation 取 horizontal(缺省)或 vertical。步骤多、说明长、在侧栏里时用纵向。
    • 步骤条只管「在第几步」,每步的内容由宿主按 v-model 自己切;单步不可用时给那一项 disabled。

    API

    Props

    名称类型默认值说明
    items 必填 StepperItem[]——
    orientation"vertical" | "horizontal" | undefined"horizontal"缺省横向
    linearboolean | undefinedtrue线性(缺省):只能点回已完成的步或往前一步,不能越过没做的步;非线性时每步都能点
    modelValuenumber | undefined1—

    Emits

    事件载荷说明
    update:modelValue[value: number]—