Стандарты проектирования
Степпер


Степпер

Степпер - это компонент, который применяется для последовательного заполнения разделов формы.

Критерии использования

Использовать степпер допускается в случаях, когда:

  1. Нужна возможность промежуточного сохранения. Заполнив раздел формы и кликнув на кнопку Далее, вы перейдете на следующий раздел, а введенные значения в прошлом разделе сохранятся в черновик. Так вы избежите потери данных.
  2. Необходимо дополнительно отобразить краткое описание раздела.
  3. Разделы формы зависят друг от друга. Например, когда содержимое следующего раздела (или даже его наличие) зависит от значения атрибута в предыдущем разделе. В таком случае нужно заполнять разделы последовательно и это соответствует концепции степпера.

Степпер в интерфейсе

Важно. Степпер может быть горизонтальным, если форма содержит меньше 6 разделов. В ином случае применяется вертикальный степпер. Логика работы степпера следующая.

  1. Раздел, на котором находится пользователь, подсвечивается в степпере как текущий active. Также в форме добавляются кнопки Назад и Далее. Пока обязательные поля не заполнены, кнопка Далее задизейблена. Дальнейшие шаги в степпере так же задизейблены. Пока, мы находимся на первом шаге, кнопка Назад также задизейблена.

  1. После заполнения обязательных полей становятся доступными кнопка Далее и следующий шаг.

  1. При переходе на следующий шаг, предыдущий переходит в состояние checked.

  1. На последнем шаге кнопка Далее меняется на кнопку Сохранить, которая также доступна только после заполнения обязательных полей.

Стоит отметить, что при клике на кнопку Отмена, нужно показывать модальное окно с подтверждением отмены. Посколько форма большая, пользователь может потерять много данных.

Вертикальный степпер

Вертикальный степпер располагается в боковой панели q-side-panel и логика его работы аналогична горизонтальному степперу. В случае, если шагов много и они не убираются в контейнер, то степпер скроллится внутри карточки.

Примеры