步骤条 Steps

#基础用法

steps/basic.vue

<script setup lang="ts">
import { Steps } from "@bysages/vue";
</script>

<template>
  <Steps.Root :count="3">
    <Steps.List>
      <Steps.Item
        v-for="(title, index) in ['Account', 'Profile', 'Confirm']"
        :key="title"
        :index="index"
      >
        <Steps.Trigger>
          <Steps.Indicator>{{ index + 1 }}</Steps.Indicator>
          <span>{{ title }}</span>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    </Steps.List>
  </Steps.Root>
</template>

steps/vertical Vue React

steps/vertical.vue

<script setup lang="ts">
import { Steps } from "@bysages/vue";

const titles = ["Account", "Profile", "Confirm"];
</script>

<template>
  <Steps.Root :count="titles.length" orientation="vertical" class="w-full">
    <Steps.List>
      <Steps.Item v-for="(title, index) in titles" :key="title" :index="index">
        <Steps.Trigger>
          <Steps.Indicator>{{ index + 1 }}</Steps.Indicator>
          <span>{{ title }}</span>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    </Steps.List>
  </Steps.Root>
</template>

#属性

#CompletedContent

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Content

属性	类型	默认值	描述
`index`	`number`		—

#Indicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ItemContext

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Item

属性	类型	默认值	描述
`index`	`number`		—

#List

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#NextTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#PrevTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Progress

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	步骤指示器共用的高度档位
`count`	`number`		步骤总数
`defaultStep`	`number`		stepper 渲染时的初始值；不需要控制 stepper 值时使用
`id`	`string`		组件内部状态机的唯一标识
`ids`	`steps.ElementIds`		stepper 元素的自定义 id
`isStepSkippable`	`(index: number) => boolean`		判断步骤能否跳过的函数
`isStepValid`	`(index: number) => boolean`		判断步骤是否有效的函数
`linear`	`boolean`		为 `true` 时 stepper 要求按顺序完成各步骤
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	stepper 的方向
`step`	`number`		stepper 的受控值

#Separator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Trigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。