Étapes

VStepper montre les étapes d’un processus et où en est le lecteur. Affichez vous-même le contenu de chaque étape à partir du même v-model.

Utilisation

vue

Shipping
Payment
Review

The account form goes here.

<script setup lang="ts">
import { computed, ref } from 'vue'
import { VButton, VStepper, VTypography } from 'vectis-ui'
import type { StepperStep } from 'vectis-ui'

const STEPS: StepperStep[] = [
  { value: 'account', title: 'Account' },
  { value: 'shipping', title: 'Shipping' },
  { value: 'payment', title: 'Payment' },
  { value: 'review', title: 'Review' },
]

const current = ref('account')
const index = computed(() => STEPS.findIndex((step) => step.value === current.value))

function go(offset: number) {
  current.value = STEPS[index.value + offset]!.value as string
}
</script>

<template>
  <div class="checkout">
    <VStepper v-model="current" :steps="STEPS" />
    <VTypography>The {{ STEPS[index]!.title.toLowerCase() }} form goes here.</VTypography>
    <div class="actions">
      <VButton variant="outline" tone="neutral" :disabled="index === 0" @click="go(-1)">
        Back
      </VButton>
      <VButton :disabled="index === STEPS.length - 1" @click="go(1)">Next</VButton>
    </div>
  </div>
</template>

<style scoped>
.checkout {
  display: grid;
  gap: var(--vectis-space-6);
}

.actions {
  display: flex;
  gap: var(--vectis-space-2);
}
</style>

Exemples

États

Les étapes avant l’étape courante sont terminées et celles d’après à venir. completed remplace cette règle pour une étape, error l’emporte sur tous les états et disabled met une étape hors d’atteinte.

vue

ShippingTerminée

<script setup lang="ts">
import { ref } from 'vue'
import { VStepper } from 'vectis-ui'
import type { StepperStep } from 'vectis-ui'

const STEPS: StepperStep[] = [
  { value: 'account', title: 'Account' },
  { value: 'shipping', title: 'Shipping', disabled: true },
  { value: 'payment', title: 'Payment', description: 'Card declined', error: true },
  { value: 'review', title: 'Review' },
]

const current = ref('review')
</script>

<template>
  <VStepper v-model="current" :steps="STEPS" />
</template>

Non linéaire

Par défaut, seules les étapes déjà atteintes sont des boutons. nonLinear en fait des boutons pour toutes ; indiquez completed sur les étapes terminées.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VStepper } from 'vectis-ui'
import type { StepperStep } from 'vectis-ui'

const STEPS: StepperStep[] = [
  { value: 'profile', title: 'Profile', completed: true },
  { value: 'team', title: 'Team' },
  { value: 'billing', title: 'Billing', completed: true },
  { value: 'integrations', title: 'Integrations' },
]

const current = ref('team')
</script>

<template>
  <VStepper v-model="current" :steps="STEPS" non-linear label="Workspace setup" />
</template>

Verticale

orientation="vertical" dispose les étapes en colonne, pour une barre latérale. Sous 36rem, un stepper horizontal ne garde à l’écran que le titre de l’étape courante.

vue

Check duplicatesMerge or skip
Done

<script setup lang="ts">
import { ref } from 'vue'
import { VStepper } from 'vectis-ui'
import type { StepperStep } from 'vectis-ui'

const STEPS: StepperStep[] = [
  { value: 'import', title: 'Import contacts', description: 'From a CSV file' },
  { value: 'map', title: 'Map the columns', description: 'Name, email, company' },
  { value: 'check', title: 'Check duplicates', description: 'Merge or skip' },
  { value: 'done', title: 'Done' },
]

const current = ref('map')
</script>

<template>
  <VStepper v-model="current" :steps="STEPS" orientation="vertical" />
</template>

API

Props

Prop	Type	Défaut
`steps`	`StepperStep[]`	aucune
Étapes dans l’ordre : `value`, `title`, et en option `description`, `error`, `completed` et `disabled`.
`orientation`	`StepperOrientation'horizontal' \| 'vertical'`	`'horizontal'`
Sens de disposition.
`nonLinear`	`boolean`	`false`
Fait de chaque étape non désactivée un bouton. Par défaut, seules les étapes déjà atteintes le sont.
`label`	`string`	aucune
Nom accessible de la liste d’étapes. Par défaut, celui du dictionnaire de la bibliothèque.
`v-model`	`ItemValue`	aucune
Valeur de l’étape courante. Sans elle, la première étape est courante.

Slots

Slot	Type
`indicator`	`StepperIndicatorSlotProps`
Contenu du cercle d’une étape. Reçoit `step`, `index` et `state`.

Types

Types utilisés dans les tables d’API. Importez les types exportés depuis vectis-ui.

export type ItemValue = string | number

export interface StepperIndicatorSlotProps {
  step: StepperStep
  index: number
  state: StepperStepState
}

export interface StepperStep {
  value: ItemValue
  title: string
  description?: string
  error?: boolean
  completed?: boolean
  disabled?: boolean
}

export type StepperStepState = 'completed' | 'active' | 'error' | 'upcoming'

Variables CSS

Token	Valeur
`--vectis-control-size-stepper-indicator`	`2rem`
`--vectis-control-size-stepper-connector-min`	`1.5rem`