Шаги

Ведёт пользователя по пошаговому процессу. Горизонтальное / вертикальное направление, кликабельная навигация и переопределение статусов.

Шаги

<template>
  <div class="demo-col" style="max-width: 680px; gap: 28px">
    <LhSteps :current="current">
      <LhStep title="Сбор" description="Сканирование в высоком разрешении" />
      <LhStep title="Коррекция цвета" description="Сравнение с эталоном цветов" />
      <LhStep title="Рецензирование" description="Экспертная проверка" />
      <LhStep title="Публикация" description="Запуск цифровой галереи" />
    </LhSteps>
    <div class="demo-row" style="gap: 12px">
      <LhButton size="small" :disabled="current === 0" @click="current--">Назад</LhButton>
      <LhButton size="small" type="primary" :disabled="current === 3" @click="current++">Далее</LhButton>
    </div>
    <LhSteps :current="2" direction="vertical">
      <LhStep title="Сбор" description="Выполнено" />
      <LhStep title="Коррекция цвета" description="Выполнено" />
      <LhStep title="Рецензирование" description="В процессе" />
      <LhStep title="Публикация" description="Ожидает" />
    </LhSteps>
    <LhSteps :current="1" status="error" :clickable="true" @click="onStepClick">
      <LhStep title="Шаг 1" />
      <LhStep title="Шаг с ошибкой" icon="lh-icon-user" />
      <LhStep title="Шаг 3" />
    </LhSteps>
    <p class="demo-note">clickable — кликабельная навигация; status="error" переопределяет общий статус; icon — пользовательский значок.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    current: 1,
  }),
  methods: {
    onStepClick(index) {
      this.current = index
    },
  },
}
</script>

Steps Props

Проп	Описание	Тип	По умолчанию
current	Индекс текущего шага (:current.sync, событие update:current, отсчёт с 0)	number	0
direction	Направление	'horizontal' \| 'vertical'	'horizontal'
clickable	Можно ли переходить к шагу по клику	boolean	false
status	Общий статус, переопределяющий все шаги (для пользовательского отображения)	'wait' \| 'process' \| 'finish' \| 'error'	—
sx	Компактная раскладка через sx	—	—

Step Props

Проп	Описание	Тип	По умолчанию
title	Заголовок шага (также доступен слот title)	string	—
description	Описание шага (также доступен слот description)	string	—
icon	Имя класса пользовательского значка (если не передан, для finish/error используются галочка / крест, остальным — порядковый номер)	string	—

Events

Событие	Описание	Параметры обратного вызова
click	Клик по элементу шага (имеет смысл только при включённом clickable)	(индекс)