Оверлей

Пользовательский компонент BootstrapVue b-overlay используется для визуального скрытия определенного элемента или компонента и его содержимого. Он сигнализирует пользователю об изменении состояния внутри элемента или компонента и может использоваться для создания загрузчиков, предупреждений/предупреждений, подсказок и многого другого.

Доступно в BootstrapVue с v2.7.0

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

<b-overlay>

v2.7.0+

Свойства

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

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
bg-color
StringЦвет CSS для использования в качестве цвета фона непрозрачного наложения. Если установлено, переопределяет свойство `variant`
blur
String'2px'Значение фонового фильтра размытия CSS. Не забудьте включить единицы CSS. Не поддерживается в IE 11. Установите значение null или пустую строку, чтобы отключить размытие
fixed
BooleanfalseКогда установлено свойство `no-wrap`, будет использоваться фиксированное позиционирование вместо абсолютного позиционирования. Удобно, если вы хотите скрыть всю страницу приложения
no-center
BooleanfalseЕсли установлено, отключает вертикальное и горизонтальное центрирование содержимого наложения
no-fade
BooleanfalseОтключает плавный переход наложения
no-wrap
BooleanfalseОтключено создание элемента-оболочки и игнорирование слота по умолчанию. Требуется, чтобы `<b-overlay>` был помещен в элемент с заданной относительной позицией
opacity
Number или String0.85Непрозрачность фона наложения. Допустимый диапазон: от `0` до `1`
overlay-tag
String'div'Тег элемента для использования в качестве элемента наложения
rounded
Boolean или StringfalseПримените округление к наложению, чтобы оно соответствовало маршрутизации вашего контента. Допустимые значения: `true`, `'sm'`, `lg`, `circle`, `pill`, `top`, `right`, `bottom` или `left`
show
BooleanfalseКогда установлено, показывает наложение
spinner-small
BooleanfalseЕсли установлено, отображает спиннер по умолчанию в меньшем размере
spinner-type
String'border'Тип спиннера по умолчанию для отображения. Текущие поддерживаемые типы: 'border' и 'grow'
spinner-variant
StringПрименяет один из цветовых вариантов темы Bootstrap к спиннеру по умолчанию. По умолчанию используется текущий цвет шрифта
variant
String'light'Вариант цвета фоновой темы для использования в качестве фона наложения
wrap-tag
String'div'Тег элемента, используемый для всего элемента-оболочки. Не имеет эффекта, если установлено свойство `no-wrap`
z-index
Number или String10Значение Z-индекса для применения к наложению. Возможно, вам придется увеличить это значение в соответствии с вашим контентом или местом размещения

Слоты

Наименование
Область
Описание
default НетСодержимое для наложения. Слот по умолчанию игнорируется, если установлено свойство `no-wrap`
overlay Пользовательский контент для замены спиннера оверлея по умолчанию

События

Событие
Аргументы
Описание
click v2.13.0+
  1. event - Собственный объект события клика
Генерируется при нажатии на оверлей
hidden Генерируется, когда оверлей был скрыт
shown Генерируется, когда оверлей был показан

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

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

Компонент
Именованный экспорт
Путь импорта
<b-overlay>BOverlaybootstrap-vue

Пример:

import { BOverlay } from 'bootstrap-vue'
Vue.component('b-overlay', BOverlay)

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

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

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

Пример:

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