Stepper

Компонент v-stepper отображает прогресс по пронумерованным шагам.

Применение

A stepper can be used for a multitude of scenarios, including shopping carts, record creation and more.

API

Имя
alt-labels
По умолчанию
false
Тип
boolean

Помещает метки под шаг

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
non-linear
По умолчанию
false
Тип
boolean

Разрешить пользователю перейти на любой шаг

Имя
value
По умолчанию
undefined
Тип
number | string

Контроль видимости

Имя
vertical
По умолчанию
false
Тип
boolean

Показывать шаги по вертикали

Примеры

Редактируемые шаги

Редактируемый шаг может быть выбран пользователем в любой точке и будет перемещать их на этот шаг.

Не редактируемые шаги

Не редактируемые шаги заставляют пользователя пройти линейно через ваш процесс.

Дополнительные шаги

Необязательный шаг можно вызвать с помощью sub-text.

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

Горизонтальные steppers перемещают пользователей по оси X с помощью определённых шагов.

Вертикальные шаги

Вертикальные steppers перемещают пользователей по оси Y и в противном случае работают точно так же, как и их горизонтальная копия.

Линейные steppers

Линейные steppers всегда перемещают пользователя по определённому пути.

Нелинейные steppers

Нелинейные steppers позволяют пользователю перемещаться по вашему процессу любым способом.

Альтернативные labels

У Steppers также есть альтернативный стиль ярлыка, который помещает заголовок под сам шаг.

Многострочное состояние ошибки

Может отображаться состояние ошибки, чтобы уведомить пользователя о некоторых действиях, которые необходимо предпринять.

Альтернативное определение состояния многострочной метки

Состояние ошибки также может быть применено к альтернативному стилю этикетки.

Вертикальное многострочное состояние ошибки

То же самое относится и к вертикальным steppers.

Динамические шаги

Steppers могут динамически добавлять или удалять свои шаги. Если текущий активный шаг удалён, обязательно учтите это, изменив применяемую модель.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore