Прогресс

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

Справочник по компонентам

`<b-progress>`

Смотреть источник

<b-progress> Свойства
<b-progress> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
`animated`	`Boolean`	`false`	Включает анимированный фон. Также автоматически устанавливает 'striped'
`height`	`String`		Переопределяет высоту по умолчанию, указав значение высоты CSS (включая единицы измерения).
`max`	`Number` или `String`	`100`	Устанавливает максимальное значение
`precision`	`Number` или `String`	`0`	Количество знаков после запятой, чтобы округлить значение до
`show-progress`	`Boolean`	`false`	Отображает текущее значение прогресса в процентах
`show-value`	`Boolean`	`false`	Отображает текущее значение прогресса
`striped`	`Boolean`	`false`	Включает полосатый фон
`value`	`Number` или `String`	`0`	Текущее значение индикатора выполнения
`variant`	`String`		Применяет к компоненту один из цветовых вариантов темы Bootstrap

Слоты

Наименование	Описание
`default`	Содержимое (индикаторы прогресса) для размещения в элементе прогресса

`<b-progress-bar>`

Смотреть источник

<b-progress-bar> Свойства
<b-progress-bar> Слоты

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`animated`	`Boolean`	`null`	Включает анимированный фон. Также автоматически устанавливает 'striped'
`label`	`String`		Текстовая строка для явного задания метки как
`label-html` Использовать с осторожностью	`String`		Строка HTML, чтобы явно установить метку как
`max`	`Number` или `String`	`null`	Устанавливает максимальное значение
`precision`	`Number` или `String`	`null`	Количество знаков после запятой, чтобы округлить значение до
`show-progress`	`Boolean`	`null`	Отображает текущее значение прогресса в процентах
`show-value`	`Boolean`	`null`	Отображает текущее значение прогресса
`striped`	`Boolean`	`null`	Включает полосатый фон
`value`	`Number` или `String`	`0`	Текущее значение индикатора выполнения
`variant`	`String`		Применяет к компоненту один из цветовых вариантов темы Bootstrap

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

Наименование	Описание
`default`	Контент для размещения в индикаторе выполнения. Переопределяет свойства `label`, `label-html`, `show-progress` и `show-value`

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент	Именованный экспорт	Путь импорта
`<b-progress>`	`BProgress`	`bootstrap-vue`
`<b-progress-bar>`	`BProgressBar`	`bootstrap-vue`

Пример:

import { BProgress } from 'bootstrap-vue'
Vue.component('b-progress', BProgress)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт	Путь импорта
`ProgressPlugin`	`bootstrap-vue`

Пример:

import { ProgressPlugin } from 'bootstrap-vue'
Vue.use(ProgressPlugin)