Шаги

Индикатор этапов процесса: четыре состояния (текущий / выполнен / ожидание / ошибка), горизонтальное и вертикальное направления, опциональная навигация по клику. Горизонтальный шагомер автоматически переносит шаги на новую строку по фиксированной базовой ширине, а заголовки всегда отображаются в одну строку.

Базовое использование

Растирание туши
Взмах кисти
Постановка печати

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Растирание туши" />
    <LhStep title="Взмах кисти" />
    <LhStep title="Постановка печати" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Растирание туши" />
    <LhStep title="Взмах кисти" />
    <LhStep title="Постановка печати" />
  </LhSteps>
</template>

С описанием

Регистрация
Заполнение базовой информации
Проверка
Подтверждение по почте и телефону
Активация
Выдача прав доступа аккаунту

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Регистрация" description="Заполнение базовой информации" />
    <LhStep title="Проверка" description="Подтверждение по почте и телефону" />
    <LhStep title="Активация" description="Выдача прав доступа аккаунту" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Регистрация" description="Заполнение базовой информации" />
    <LhStep title="Проверка" description="Подтверждение по почте и телефону" />
    <LhStep title="Активация" description="Выдача прав доступа аккаунту" />
  </LhSteps>
</template>

icon задаёт шагу пользовательский значок (принимается имя встроенного значка LhIcon, например user/check/star); если значок не передан, для выполненного шага и ошибки используются галочка и крестик, а в остальных случаях выводится порядковый номер. Чтобы полностью переопределить отрисовку значка, можно воспользоваться слотом #icon.

Регистрация
Проверка
Активация

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="Регистрация" />
    <LhStep icon="check" title="Проверка" />
    <LhStep icon="star" title="Активация" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="Регистрация" />
    <LhStep icon="check" title="Проверка" />
    <LhStep icon="star" title="Активация" />
  </LhSteps>
</template>

Состояние ошибки

Загрузка
Проверка
Готово

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="Загрузка" />
    <LhStep title="Проверка" />
    <LhStep title="Готово" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="Загрузка" />
    <LhStep title="Проверка" />
    <LhStep title="Готово" />
  </LhSteps>
</template>

status — это глобальное переопределение: после установки все шаги получают указанное состояние, что удобно для пользовательского отображения.

Навигация по клику

Выбор эскиза
Подбор образца
Копирование
Копия с оригинала или по памяти
Оформление
Натяжка на подрамник

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

vue

<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="Выбор эскиза" description="Подбор образца" />
    <LhStep title="Копирование" description="Копия с оригинала или по памяти" />
    <LhStep title="Оформление" description="Натяжка на подрамник" />
  </LhSteps>
</template>

vue

<script>
export default {
  data() {
    return { current: 1 }
  },
}
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="Выбор эскиза" description="Подбор образца" />
    <LhStep title="Копирование" description="Копия с оригинала или по памяти" />
    <LhStep title="Оформление" description="Натяжка на подрамник" />
  </LhSteps>
</template>

Вертикальное направление

Начало
Замах со скрытым острием кисти
Ведение
Ведение кисти центральным пером
Завершение
Возвратное движение кисти в конце

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="Начало" description="Замах со скрытым острием кисти" />
    <LhStep title="Ведение" description="Ведение кисти центральным пером" />
    <LhStep title="Завершение" description="Возвратное движение кисти в конце" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="Начало" description="Замах со скрытым острием кисти" />
    <LhStep title="Ведение" description="Ведение кисти центральным пером" />
    <LhStep title="Завершение" description="Возвратное движение кисти в конце" />
  </LhSteps>
</template>

Перенос по фиксированной ширине

Горизонтальный шагомер располагается по базовой ширине --lh-steps-item-basis (по умолчанию 160px): если контейнер вмещает все шаги, они равномерно распределяются в одну строку, если нет — целый шаг переносится на следующую строку, а не разрывает заголовок. Заголовок всегда отображается одной строкой и при переполнении обрезается многоточием; после переноса соединительная линия у последнего шага в строке автоматически скрывается, чтобы не указывать в пустое пространство.

Выбор эскиза
Подбор образца
Копирование
Копия с оригинала или по памяти
Надпись
Подпись и постановка печати
Оформление
Натяжка на подрамник

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Выбор эскиза" description="Подбор образца" />
    <LhStep title="Копирование" description="Копия с оригинала или по памяти" />
    <LhStep title="Надпись" description="Подпись и постановка печати" />
    <LhStep title="Оформление" description="Натяжка на подрамник" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Выбор эскиза" description="Подбор образца" />
    <LhStep title="Копирование" description="Копия с оригинала или по памяти" />
    <LhStep title="Надпись" description="Подпись и постановка печати" />
    <LhStep title="Оформление" description="Натяжка на подрамник" />
  </LhSteps>
</template>

В примере выше ширина контейнера ограничена 280px для демонстрации переноса. Чтобы изменить ритм переноса, переопределите steps-item-basis через themeVars (ключ автоматически получает префикс --lh-): <LhSteps :theme-vars="{ 'steps-item-basis': '220px' }">; также его можно задать глобально через componentTheme.steps в LhConfigProvider.

Steps API

LhSteps Props

Свойство	Описание	Тип	По умолчанию
current	Индекс текущего шага (`v-model:current`, отсчёт с 0)	`number`	`0`
direction	Направление	`"horizontal" \| "vertical"`	`'horizontal'`
clickable	Доступна ли навигация по шагам по клику	`boolean`	`false`
status	Глобальное состояние, переопределяющее все шаги (для пользовательского отображения)	`"wait" \| "process" \| "finish" \| "error"`	—
themeVars	Переменные темы на уровне компонента (ключи автоматически получают префикс --lh-)	`{ [x: string]: string; }`	—
sx	Свойство sx для быстрой вёрстки	`LhSxProps`	—

LhSteps События

Событие	Описание	Параметры обратного вызова
update:current	Изменение текущего шага (v-model)	`(index: number)`
change	Изменение текущего шага	`(index: number)`

LhStep Props

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

Слоты

Слот	Описание	Компонент
default	Шаги (список LhStep)	LhSteps
title	Пользовательский заголовок	LhStep
description	Пользовательское описание	LhStep
icon	Пользовательский значок (переопределяет отрисовку по умолчанию из props icon)	LhStep

Переменные компонента

Следующие CSS-переменные задают значения по умолчанию на .lh-steps и могут переопределяться глобально или на уровне компонента через themeVars (ключ автоматически получает префикс --lh-):

Переменная	Описание	По умолчанию
`--lh-steps-item-basis`	Базовая ширина горизонтального шага; если контейнер не вмещает шаги, перенос выполняется по этой ширине	`160px`

Доступность

Контейнер представляет собой <ol role="list">: семантический порядок совпадает с порядком этапов процесса
Для текущего шага автоматически устанавливается aria-current="step"
При clickable заголовки выполненных и текущего шагов являются настоящими элементами <button>, а aria-label берётся из языкового пакета (steps.finish / steps.error / steps.step); шаги в состоянии ожидания не кликабельны, чтобы пользователь не мог пропустить ещё не достигнутые этапы
Соединительные линии нарисованы через псевдоэлементы и не попадают в дерево доступности

Определения типов

Компонент экспортирует следующие структуры TypeScript (автоматически извлечено из исходников packages/components/steps/src/types.ts и @lh-ui/share/core/*; раскройте каждый пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhStepsProps

export interface LhStepsProps {
  /** Индекс текущего шага (v-model:current, отсчёт с 0) */
  current?: number
  /** Направление */
  direction?: LhStepsDirection
  /** Доступна ли навигация по шагам по клику */
  clickable?: boolean
  /** Глобальное состояние, переопределяющее все шаги (для пользовательского отображения) */
  status?: LhStepStatus
  /** Переменные темы на уровне компонента (ключ автоматически получает префикс --lh-, например `steps-item-basis`) */
  themeVars?: Record<string, string>
  /** Свойство sx для быстрой вёрстки */
  sx?: LhSxProps
}

LhStepProps

export interface LhStepProps {
  /** Заголовок шага (можно также использовать слот title) */
  title?: string
  /** Описание шага (можно также использовать слот description) */
  description?: string
  /** Имя пользовательского значка (если не передано, для finish/error используются галочка/крестик, в остальных случае выводится порядковый номер) */
  icon?: LhIconName
}

LhIconName _{(из @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

LhStepsDirection _{(из @lh-ui/share/core/steps)}

/**
 * Направление шагомера
 */
export type LhStepsDirection = 'horizontal' | 'vertical'

LhStepStatus _{(из @lh-ui/share/core/steps)}

/**
 * Состояние шага
 */
export type LhStepStatus = 'wait' | 'process' | 'finish' | 'error'

Шаги ​

Базовое использование ​

С описанием ​

Состояние ошибки ​

Навигация по клику ​

Вертикальное направление ​

Перенос по фиксированной ширине ​

Steps API ​

LhSteps Props ​

LhSteps События ​

LhStep Props ​

Слоты ​

Переменные компонента ​

Доступность ​

Определения типов ​