分步器

一套用于指示多步骤流程中进度的一系列步骤。

组件源代码 原生 API 参考
步骤 1/0

安装 ​

bash
npx shadcn-vue@latest add stepper

用法 ​

vue
<script setup lang="ts">
import {
  Stepper,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperSeparator,
  StepperTitle,
  StepperTrigger,
} from '@/components/ui/stepper'
</script>

<template>
  <Stepper>
    <StepperItem :step="1">
      <StepperTrigger>
        <StepperIndicator>1</StepperIndicator>
        <StepperTitle>Step 1</StepperTitle>
        <StepperDescription>This is the first step</StepperDescription>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
    <StepperItem :step="2">
      <StepperTrigger>
        <StepperIndicator>2</StepperIndicator>
        <StepperTitle>Step 2</StepperTitle>
        <StepperDescription>This is the second step</StepperDescription>
      </StepperTrigger>
    </StepperItem>
  </Stepper>
</template>

示例 ​

水平 ​

您的详细信息

提供您的姓名和电子邮件

公司详细信息

关于您公司的详细信息

邀请您的团队

开始与您的团队协作

步骤 1/0

垂直 ​

您的详细信息

提供您的姓名和电子邮件地址。我们将使用这些信息创建您的帐户

公司详细信息

关于您公司的详细信息将帮助我们个性化您的体验

邀请您的团队

通过邀请他们加入您的帐户来开始与您的团队协作。您可以跳过此步骤并在稍后邀请他们

步骤 1/0

表单 ​

Your details

Provide your name and email

Your password

Choose a password

Your Favorite Drink

Choose a drink

步骤 1/0
在 GitHub 上编辑此页面