Steps

Компонент индикатора шагов для многоэтапных процессов. Поддерживает горизонтальный и вертикальный layout, иконки, описания, состояние ошибки, кликабельную навигацию, разные размеры и полную CSS-настройку.

Basic

Account

Profile

Review

Done

vue

<script setup>
import { ref } from 'vue'
import { VxSteps } from 'veloxui'

const current = ref(1)

const items = [
  { key: 'account', title: 'Account' },
  { key: 'profile', title: 'Profile' },
  { key: 'review', title: 'Review' },
  { key: 'done', title: 'Done' },
]
</script>

<template>
  <VxSteps :items="items" :current="current" />
</template>

With Descriptions

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

vue

<VxSteps :items="[
  { key: 'account', title: 'Account', description: 'Create your account credentials' },
  { key: 'profile', title: 'Profile', description: 'Fill in your personal details' },
  { key: 'review', title: 'Review', description: 'Verify all information' },
  { key: 'done', title: 'Done', description: 'Setup complete' },
]" :current="1" />

With Icons

Account

Settings

Upload

Complete

vue

<VxSteps :items="[
  { key: 'account', title: 'Account', icon: 'user' },
  { key: 'settings', title: 'Settings', icon: 'settings' },
  { key: 'upload', title: 'Upload', icon: 'upload' },
  { key: 'done', title: 'Complete', icon: 'check' },
]" :current="2" />

Error State

Установите error: true у элемента шага, чтобы показать его в состоянии ошибки.

Account

Verification

Done

vue

<VxSteps :items="[
  { key: 'account', title: 'Account' },
  { key: 'verify', title: 'Verification', error: true },
  { key: 'done', title: 'Done' },
]" :current="1" />

Clickable

Установите clickable, чтобы разрешить клики по любому шагу. Используйте v-model:current для двустороннего связывания.

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

Текущий шаг: 1

vue

<VxSteps v-model:current="current" :items="items" clickable />

Vertical

Order PlacedYour order has been submitted

ProcessingWe are preparing your order

ShippedPackage is on its way

DeliveredPackage has arrived

vue

<script setup>
import { ref } from 'vue'
import { VxSteps } from 'veloxui'

const current = ref(1)

const items = [
  { key: 'order', title: 'Order Placed', description: 'Your order has been submitted' },
  { key: 'processing', title: 'Processing', description: 'We are preparing your order' },
  { key: 'shipped', title: 'Shipped', description: 'Package is on its way' },
  { key: 'delivered', title: 'Delivered', description: 'Package has arrived' },
]
</script>

<template>
  <VxSteps :items="items" :current="current" direction="vertical" />
</template>

Sizes

Три размера: sm, md (по умолчанию) и lg.

Account

Profile

Review

Done

Account

Profile

Review

Done

Account

Profile

Review

Done

vue

<VxSteps :items="items" :current="2" size="sm" />
<VxSteps :items="items" :current="2" size="md" />
<VxSteps :items="items" :current="2" size="lg" />

Square Variant

Используйте variant="square" для скруглённо-квадратных индикаторов вместо круглых.

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

vue

<VxSteps :items="items" :current="1" variant="square" clickable />
<VxSteps :items="items" :current="2" variant="square" direction="vertical" />

Custom Dot Size & Line Width

Используйте пропы dot-size и line-width, чтобы переопределить предустановленные значения размеров.

Account

Profile

Review

Done

Account

Profile

Review

Done

vue

<VxSteps :items="items" :current="1" :dot-size="40" :line-width="2" />
<VxSteps :items="items" :current="1" :dot-size="20" :line-width="2" />

Custom Colors (CSS Variables)

Переопределите любой визуальный аспект через CSS custom properties на классе-обёртке.

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

AccountCreate your account credentials

ProfileFill in your personal details

ReviewVerify all information

DoneSetup complete

vue

<template>
  <div class="steps-green-theme">
    <VxSteps :items="items" :current="1" clickable />
  </div>
</template>

<style>
.steps-green-theme .vx-steps {
  --vx-steps-active-bg: #16a34a;
  --vx-steps-active-border: #16a34a;
  --vx-steps-active-color: #fff;
  --vx-steps-active-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
  --vx-steps-completed-bg: #16a34a;
  --vx-steps-completed-border: #16a34a;
  --vx-steps-completed-color: #fff;
  --vx-steps-line-done-color: #16a34a;
}
</style>

Custom Slots

Используйте слоты для полной настройки заголовков, описаний, иконок и добавления дополнительного контента для каждого шага.

Account Create your account credentials

Profile CurrentFill in your personal details

Review Verify all information

Done Setup complete

vue

<VxSteps :items="items" :current="current" clickable direction="vertical">
  <!-- Custom title for all steps -->
  <template #title="{ item, status }">
    <span :style="{ fontWeight: status === 'active' ? 700 : 400 }">
      {{ item.title }}
      <VxTag v-if="status === 'active'" size="sm">Current</VxTag>
    </span>
  </template>

  <!-- Extra content only for the 'review' step -->
  <template #content-review="{ status }">
    <div v-if="status === 'active'" style="padding: 12px; background: var(--muted); border-radius: 8px;">
      Please review all your information before proceeding.
    </div>
  </template>
</VxSteps>

Content Panel

Используйте слоты panel-{key} для рендеринга контента конкретного шага под панелью шагов. Панель активного шага показывается автоматически.

Account

Profile

Confirm

Создайте учётную запись

Ваш профиль

✓

Готово!

Ваша учётная запись создана.

vue

<script setup>
import { ref } from 'vue'
import { VxSteps, VxInput, VxButton } from 'veloxui'

const current = ref(0)

const items = [
  { key: 'account', title: 'Account' },
  { key: 'profile', title: 'Profile' },
  { key: 'confirm', title: 'Confirm' },
]

function next() {
  if (current.value < items.length - 1) current.value++
}
function prev() {
  if (current.value > 0) current.value--
}
</script>

<template>
  <VxSteps :items="items" :current="current" clickable>
    <template #panel-account>
      <div style="padding: 20px; border: 1px solid var(--border); border-radius: 10px;">
        <VxInput placeholder="Email address" />
        <VxInput placeholder="Password" type="password" />
        <VxButton size="sm" @click="next">Next</VxButton>
      </div>
    </template>
    <template #panel-profile>
      <div style="padding: 20px; border: 1px solid var(--border); border-radius: 10px;">
        <VxInput placeholder="Full name" />
        <VxButton variant="outline" size="sm" @click="prev">Back</VxButton>
        <VxButton size="sm" @click="next">Next</VxButton>
      </div>
    </template>
    <template #panel-confirm>
      <div style="text-align: center;">All done!</div>
    </template>
  </VxSteps>
</template>

Vertical Content Panel

Панель контента работает и в вертикальном направлении — она отображается рядом с шагами.

InformationBasic details

AddressShipping address

PaymentPayment method

Основная информация

Адрес доставки

Способ оплаты

vue

<VxSteps :items="items" :current="current" direction="vertical" clickable>
  <template #panel-info>
    <!-- Your form content here -->
  </template>
  <template #panel-address>
    <!-- Address form -->
  </template>
  <template #panel-payment>
    <!-- Payment form -->
  </template>
</VxSteps>

Simple Wizard

Минимальный мастер с кнопками «Далее» / «Назад» (без панели контента).

Choose Plan

Billing

Confirm

vue

<script setup>
import { ref } from 'vue'
import { VxSteps, VxButton } from 'veloxui'

const current = ref(0)

const items = [
  { key: 'plan', title: 'Choose Plan' },
  { key: 'billing', title: 'Billing' },
  { key: 'confirm', title: 'Confirm' },
]

function next() {
  if (current.value < items.length - 1) current.value++
}
function prev() {
  if (current.value > 0) current.value--
}
</script>

<template>
  <VxSteps :items="items" :current="current" />
  <div style="margin-top: 20px; display: flex; gap: 8px; justify-content: flex-end;">
    <VxButton variant="outline" size="sm" :disabled="current === 0" @click="prev">Back</VxButton>
    <VxButton size="sm" @click="next" :disabled="current === items.length - 1">Next</VxButton>
  </div>
</template>

API

VxSteps Props

Prop	Type	Default	Description
`items`	`StepItem[]`	`[]`	Элементы шагов
`current`	`number`	`0`	Индекс активного шага (с нуля)
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Направление layout
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Размер индикатора шага
`variant`	`'circle' \| 'square'`	`'circle'`	Форма индикатора
`clickable`	`boolean`	`false`	Разрешить клики по шагам для навигации
`dot-size`	`number \| string`	—	Переопределить размер индикатора (например, `40` или `'40px'`)
`line-width`	`number \| string`	—	Переопределить толщину линии (например, `2` или `'2px'`)
`root-class`	`string \| string[] \| object`	—	Класс на корневом элементе

StepItem

Property	Type	Required	Description
`key`	`string`	Да	Уникальный идентификатор
`title`	`string`	Да	Заголовок шага
`description`	`string`	Нет	Текст описания шага
`icon`	`string \| Component`	Нет	Пользовательская иконка (заменяет номер)
`disabled`	`boolean`	Нет	Отключить этот шаг
`error`	`boolean`	Нет	Показать состояние ошибки

Slots

Slot	Props	Description
`icon`	`{ item, status, index }`	Пользовательский индикатор для всех шагов
`icon-{key}`	`{ item, status, index }`	Пользовательский индикатор для конкретного шага
`title`	`{ item, status, index }`	Пользовательский заголовок для всех шагов
`title-{key}`	`{ item, status, index }`	Пользовательский заголовок для конкретного шага
`description`	`{ item, status, index }`	Пользовательское описание для всех шагов
`description-{key}`	`{ item, status, index }`	Пользовательское описание для конкретного шага
`content-{key}`	`{ item, status, index }`	Дополнительная область контента под текстом конкретного шага
`line`	`{ index, status, done }`	Пользовательская линия-соединитель между шагами
`panel`	`{ item, status, index }`	Панель контента по умолчанию для всех шагов
`panel-{key}`	`{ item, status, index }`	Панель контента для конкретного шага (показывается при активности)

Events

Event	Payload	Description
`update:current`	`(index: number)`	Шаг изменён (в кликабельном режиме)
`click`	`(index, item)`	Клик по шагу

CSS Custom Properties

Переопределите их на элементе .vx-steps или родительской обёртке для настройки цветов, размеров и отступов.

Variable	Default	Description
`--vx-steps-dot-size`	Предустановка размера	Ширина/высота индикатора
`--vx-steps-dot-radius`	`50%` / `8px`	Скругление углов индикатора
`--vx-steps-dot-font-size`	Предустановка размера	Размер шрифта номера в точке
`--vx-steps-dot-font-weight`	`600`	Насыщенность шрифта номера в точке
`--vx-steps-dot-bg`	`var(--background)`	Фон предстоящей точки
`--vx-steps-dot-border`	`var(--border)`	Граница предстоящей точки
`--vx-steps-dot-color`	`var(--muted-foreground)`	Цвет текста предстоящей точки
`--vx-steps-active-bg`	`var(--primary)`	Фон активной точки
`--vx-steps-active-border`	`var(--primary)`	Граница активной точки
`--vx-steps-active-color`	`var(--primary-foreground)`	Цвет текста активной точки
`--vx-steps-active-shadow`	свечение-кольцо	box-shadow активной точки
`--vx-steps-completed-bg`	`var(--primary)`	Фон завершённой точки
`--vx-steps-completed-border`	`var(--primary)`	Граница завершённой точки
`--vx-steps-completed-color`	`var(--primary-foreground)`	Цвет текста завершённой точки
`--vx-steps-error-bg`	`var(--background)`	Фон точки с ошибкой
`--vx-steps-error-border`	`var(--destructive)`	Граница точки с ошибкой
`--vx-steps-error-color`	`var(--destructive)`	Цвет текста точки с ошибкой
`--vx-steps-line-color`	`var(--border)`	Цвет незавершённой линии
`--vx-steps-line-done-color`	`var(--primary)`	Цвет завершённой линии
`--vx-steps-line-width`	`1px`	Толщина линии
`--vx-steps-title-size`	Предустановка размера	Размер шрифта заголовка
`--vx-steps-title-weight`	`500`	Насыщенность шрифта заголовка
`--vx-steps-title-color`	`var(--foreground)`	Цвет заголовка
`--vx-steps-title-upcoming-color`	`var(--muted-foreground)`	Цвет предстоящего заголовка
`--vx-steps-title-error-color`	`var(--destructive)`	Цвет заголовка с ошибкой
`--vx-steps-desc-size`	Предустановка размера	Размер шрифта описания
`--vx-steps-desc-color`	`var(--muted-foreground)`	Цвет описания
`--vx-steps-text-gap`	`8px`	Отступ между индикатором и текстом (горизонтальный)
`--vx-steps-line-gap`	`24px`	Вертикальное расстояние между шагами
`--vx-steps-panel-gap`	`24px`	Отступ между панелью шагов и панелью контента
`--vx-steps-panel-padding`	`0`	Отступ панели контента

Steps ​

Basic ​

With Descriptions ​

With Icons ​

Error State ​

Clickable ​

Vertical ​

Sizes ​

Square Variant ​

Custom Dot Size & Line Width ​

Custom Colors (CSS Variables) ​

Custom Slots ​

Content Panel ​

Vertical Content Panel ​

Simple Wizard ​

API ​

VxSteps Props ​

StepItem ​

Slots ​

Events ​

CSS Custom Properties ​

Steps

Basic

With Descriptions

With Icons

Error State

Clickable

Vertical

Sizes

Square Variant

Custom Dot Size & Line Width

Custom Colors (CSS Variables)

Custom Slots

Content Panel

Vertical Content Panel

Simple Wizard

API

VxSteps Props

StepItem

Slots

Events

CSS Custom Properties