Steps

Компонент Steps предназначен для отображения последовательности шагов в пользовательском интерфейсе. Он широко используется для пошаговых форм, прогресс-бара задач или любого сценария, где требуется визуализировать этапы процесса. В Naive UI Steps реализован с высокой гибкостью и поддерживает кастомизацию внешнего вида и поведения.

Основная структура

Компонент состоит из двух ключевых элементов:

  1. n-steps – контейнер, определяющий общую последовательность шагов.
  2. n-step – отдельный шаг внутри последовательности.

Простейший пример использования:

<template>
  <n-steps :current="1">
    <n-step title="Выбор продукта" description="Выберите нужный товар" />
    <n-step title="Оплата" description="Введите платежные данные" />
    <n-step title="Подтверждение" description="Проверьте детали заказа" />
  </n-steps>
</template>

<script setup>
import { NSteps, NStep } from 'naive-ui'
</script>

Ключевые моменты:

  • Атрибут current определяет текущий активный шаг.
  • Каждый шаг может содержать title и description, которые отображаются соответственно как заголовок и подпись шага.
  • Компонент автоматически выделяет текущий шаг и визуально различает пройденные и будущие шаги.

Настройка внешнего вида

Вертикальная и горизонтальная ориентация

Компонент поддерживает горизонтальное (по умолчанию) и вертикальное расположение шагов:

<n-steps direction="vertical" :current="2">
  <n-step title="Шаг 1" />
  <n-step title="Шаг 2" />
  <n-step title="Шаг 3" />
</n-steps>
  • direction="vertical" – вертикальная последовательность.
  • direction="horizontal" – горизонтальная (по умолчанию).

Стиль прогресса

Можно изменить отображение прогресса:

  • status для каждого шага: 'wait' | 'process' | 'finish' | 'error'.
  • Пример:
<n-steps>
  <n-step title="Шаг 1" status="finish" />
  <n-step title="Шаг 2" status="process" />
  <n-step title="Шаг 3" status="wait" />
</n-steps>
  • finish – шаг завершён.
  • process – текущий шаг.
  • wait – ожидающий шаг.
  • error – шаг с ошибкой.

Кастомизация индикатора

Индикатор шага можно настроить с помощью слота icon:

<n-steps :current="1">
  <n-step title="Выбор продукта">
    <template #icon>
      <CheckIcon />
    </template>
  </n-step>
  <n-step title="Оплата">
    <template #icon>
      <CreditCardIcon />
    </template>
  </n-step>
</n-steps>
  • Слот icon позволяет использовать SVG, компоненты или любые другие элементы.
  • Это дает полный контроль над визуальным стилем каждого шага.

Использование с динамическими данными

Шаги часто формируются на основе массива данных:

<script setup>
import { ref } from 'vue'
import { NSteps, NStep } from 'naive-ui'

const steps = ref([
  { title: 'Выбор продукта', description: 'Выберите товар' },
  { title: 'Оплата', description: 'Введите данные' },
  { title: 'Подтверждение', description: 'Проверьте заказ' }
])

const currentStep = ref(1)
</script>

<template>
  <n-steps :current="currentStep">
    <n-step v-for="(step, index) in steps" :key="index" :title="step.title" :description="step.description" />
  </n-steps>
</template>
  • Использование v-for позволяет динамически создавать шаги.
  • Значение currentStep легко обновлять при переходе между этапами.

Навигация между шагами

Для интерактивных форм удобно управлять шагами через события и методы:

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

const currentStep = ref(0)

function nextStep() {
  if (currentStep.value < 2) currentStep.value++
}

function prevStep() {
  if (currentStep.value > 0) currentStep.value--
}
</script>

<template>
  <n-steps :current="currentStep">
    <n-step title="Шаг 1" />
    <n-step title="Шаг 2" />
    <n-step title="Шаг 3" />
  </n-steps>

  <button @click="prevStep">Назад</button>
  <button @click="nextStep">Вперед</button>
</template>
  • Управление через реактивное состояние обеспечивает плавную навигацию.
  • Можно добавлять проверку валидности на каждом шаге перед переходом.

Дополнительные возможности

  1. Размеры – small, medium, large через атрибут size.
  2. Кнопка завершения – можно комбинировать со слотами для отображения действий после последнего шага.
  3. Кастомные линии прогресса – с помощью CSS-переменных --n-bezier и --n-font-size.

Рекомендации по использованию

  • Для больших форм лучше использовать вертикальную ориентацию.
  • Использовать status="error" для визуального отображения ошибок на конкретном шаге.
  • Интеграция со сторонними иконками и SVG через слот icon позволяет создать уникальный дизайн.
  • Управление через реактивное состояние делает компонент идеальным для многоэтапных интерактивных интерфейсов.
Оглавление