QStepper пошаговые формы

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

Базовая структура QStepper включает несколько ключевых компонентов:

  • <q-stepper> — контейнер для всех шагов. Управляет текущим активным шагом через v-model.
  • <q-step> — отдельный шаг с заголовком, описанием и номером.
  • <q-stepper-navigation> — панель навигации между шагами, отображает кнопки «Назад», «Далее» и прогресс.

Пример минимальной структуры:

<q-stepper v-model="step" animated>
  <q-step name="1" title="Информация" icon="person">
    <div>Форма ввода личной информации</div>
  </q-step>

  <q-step name="2" title="Подтверждение" icon="check">
    <div>Проверка данных перед отправкой</div>
  </q-step>

  <q-step name="3" title="Готово" icon="done_all">
    <div>Форма успешно отправлена</div>
  </q-step>

  <q-stepper-navigation>
    <q-btn flat label="Назад" @click="prevStep" />
    <q-btn flat label="Далее" @click="nextStep" />
  </q-stepper-navigation>
</q-stepper>

Управление шагами

Переключение между шагами осуществляется через v-model, привязанный к переменной состояния, например step.

export default {
  data() {
    return {
      step: 1
    };
  },
  methods: {
    nextStep() {
      if (this.step < 3) this.step++;
    },
    prevStep() {
      if (this.step > 1) this.step--;
    }
  }
};

Для динамических форм можно использовать условные проверки и валидацию на каждом шаге перед переходом к следующему.

validateStep1() {
  if (!this.form.name) {
    this.$q.notify({ type: 'negative', message: 'Имя обязательно' });
    return false;
  }
  return true;
}

Кастомизация шагов

Каждый шаг можно настраивать с помощью свойств title, subtitle, icon, done-icon и error-icon.

  • title — основной заголовок шага.
  • subtitle — дополнительная информация под заголовком.
  • icon — иконка шага в панели навигации.
  • done-icon — иконка, отображаемая после завершения шага.
  • error-icon — иконка для шага с ошибкой.
<q-step 
  name="2" 
  title="Контактные данные" 
  subtitle="Электронная почта и телефон" 
  icon="email" 
  done-icon="check_circle" 
  error-icon="warning">
  <div>Форма контактов</div>
</q-step>

Анимация и стиль

С помощью атрибута animated QStepper плавно анимирует переход между шагами. Для кастомного оформления можно использовать слоты и классы:

<q-stepper v-model="step" animated class="bg-grey-1 text-black">
  <q-step name="1">
    <template v-slot:title>
      <span class="text-h6">Личная информация</span>
    </template>
  </q-step>
</q-stepper>

Интеграция с формами

QStepper идеально подходит для форм с пошаговой валидацией. Например, каждая секция формы может быть отдельным шагом, а переход к следующему шагу будет разрешён только при успешной валидации текущего.

<q-step name="1" title="Регистрация">
  <q-input filled v-model="form.name" label="Имя" />
  <q-input filled v-model="form.email" label="Email" />
</q-step>

<q-step name="2" title="Пароль">
  <q-input type="password" filled v-model="form.password" label="Пароль" />
</q-step>

Валидация перед переходом:

nextStep() {
  if (this.step === 1 && !this.validateStep1()) return;
  if (this.step === 2 && !this.validateStep2()) return;
  this.step++;
}

Горизонтальные и вертикальные шаги

По умолчанию шаги отображаются горизонтально, но можно переключить на вертикальное отображение через vertical:

<q-stepper v-model="step" vertical>
  <q-step name="1" title="Шаг 1" />
  <q-step name="2" title="Шаг 2" />
</q-stepper>

Это удобно для длинных форм с большим количеством шагов или на мобильных устройствах.

События и слоты

QStepper поддерживает события:

  • @input — вызывается при смене шага.
  • @before-change — можно отменить переход к следующему шагу, вернув false.

Слоты позволяют полностью кастомизировать отображение шагов и навигации:

<q-stepper v-model="step">
  <q-step name="1">
    <template v-slot:default>
      <div>Контент первого шага</div>
    </template>
  </q-step>
</q-stepper>

Продвинутые техники

  1. Динамическое создание шагов: массив шагов в data и генерация <q-step> через v-for.
  2. Условные шаги: можно пропускать шаги или менять их порядок в зависимости от выбранных опций.
  3. Интеграция с Vuex: хранение состояния формы между шагами в глобальном хранилище.
  4. Прогресс-бар: добавление QLinearProgress для визуализации выполнения всех шагов.
<q-linear-progress 
  :value="step / totalSteps" 
  color="primary" 
  track-color="grey-3" 
/>

Итоговая структура сложной формы

  • <q-stepper> с v-model
  • <q-step> с контентом форм и слотами
  • <q-stepper-navigation> для кнопок «Назад/Далее»
  • Методы валидации и перехода между шагами
  • Возможность вертикального или горизонтального расположения
  • Кастомизация и события для динамических форм

Эта структура позволяет создавать удобные и наглядные пошаговые формы, полностью контролируемые через состояние Vue и возможности Quasar.

Оглавление