Stepper

一组用于指示多步骤流程进度的步骤。

Component Source API Reference
Step 1 of 0

安装 ​

pnpm dlx 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>步骤 1</StepperTitle>
        <StepperDescription>这是第一步</StepperDescription>
      </StepperTrigger>
      <StepperSeparator />
    </StepperItem>
    <StepperItem :step="2">
      <StepperTrigger>
        <StepperIndicator>2</StepperIndicator>
        <StepperTitle>步骤 2</StepperTitle>
        <StepperDescription>这是第二步</StepperDescription>
      </StepperTrigger>
    </StepperItem>
  </Stepper>
</template>

示例 ​

水平方向 ​

Your details

Provide your name and email

Company details

A few details about your company

Invite your team

Start collaborating with your team

Step 1 of 0

垂直方向 ​

Your details

Provide your name and email address. We will use this information to create your account

Company details

A few details about your company will help us personalize your experience

Invite your team

Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later

Step 1 of 0

表单 ​

Your details

Provide your name and email

Your password

Choose a password

Your Favorite Drink

Choose a drink

Step 1 of 0
Edit this page on GitHub