Прогресс

Компоненты v-progress-circular и v-progress-linear используются для визуального отображения передачи данных пользователям. Они также могут представлять неопределённость, такую как загрузка или обработка. v-progress-circular компонент содержат слот, который расположен по центру в контейнере компонента.

Применение

By default, progress circular uses the applications secondary color.

API

v-progress-circular
Имя
button
По умолчанию
false
Тип
boolean

Components.Progress.

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

Применяет заданный цвет к элементу управления

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

Components.Progress.

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

Components.Progress.

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

Устанавливает высоту и ширину элемента

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

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

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

Ширина содержимого

Примеры

Цветной

Могут применяться альтернативные цвета.

Неопределённый

Неопределённый прогресс бар всегда выполняется.

Размер и ширина

Компонент кругового прогресс бара может изменять ширину и размер.

Поворот

Начало прогресс бара может быть повернуто.

Определённый

Компонент линейного прогресс бара может иметь заданное состояние, модифицированное v-model.

Неопределённый

Как и в случае с круговым прогресс баром, линейный имеет также неопределённое состояние.

Буфер

Состояние буфера представляет два значения одновременно. Основное значение контролируется моделью, тогда как буфер управляется значением свойства buffer-value.

Запрос неопределённый и выполненный

Состояние управляется правдивостью неопределённого с запросом свойства, установленным в true.

Пользовательская высота и контекстные цвета

Пользовательская высота или контекстный цвет могут быть применены к индикатору выполнения. Основной цвет - это основной цвет вашего приложения.

Пользовательские цвета

Вы также можете установить цвет с помощью реквизита color и background-color.

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