Интерактивные компоненты Bootstrap в CMS Joomla 4



Alert (Предупреждение)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.alert', '.selector');
  • .selector ссылается на CSS-селектор для предупреждения. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Никаких дополнительных опций не предусмотрено

Button (Кнопка)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.button', '.selector');
  • .selector ссылается на CSS-селектор для кнопки. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Никаких дополнительных опций не предусмотрено

Carousel (Карусель)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к опциям, доступным для карусели:

Варианты для карусели могут быть:

  • interval, number, по умолчанию: 5000, время задержки между автоматическим циклом элемента карусели. Если значение false, карусель не будет автоматически переключаться.
  • keyboard, boolean, по умолчанию: true, должна ли карусель реагировать на события клавиатуры.
  • pause, string|boolean, наведение курсора (hover) приостанавливает вращение карусели, если указатель мыши находится на её объекте и возобновляет вращение карусели, если указатель мыши находится в другом месте.
  • slide, string|boolean, по умолчанию: false. Автоматически запускает карусель после того, как пользователь вручную переключит первый элемент. Если значение = "carousel", автоматически запускает карусель при загрузке.

Collapse (Сворачивание)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.collapse', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к опциям, доступным для сворачивания:

Варианты сворачивания могут быть:

  • parent, string, по умолчанию: false. Если указан родитель, то все складные элементы под указанным родителем будут закрыты при отображении этого складного элемента.
  • toggle, boolean,  по умолчанию: true. Переключает сворачиваемый элемент при вызове.

Dropdown (Выпадающий элемент)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.dropdown', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к опциям, доступным для выпадающего элемента:

Варианты выпадающего элемента могут быть:

  • flip, boolean, по умолчанию: true. Позволяет раскрывающемуся элементу переворачиваться в случае срабатывания.
  • boundary, string, по умолчанию: scrollParent. Граница ограничения overflow раскрывающегося меню.
  • reference, string, по умолчанию: toggle. Элемент управления выпадающего меню. Принимает toggle или parent.
  • display, string, по умолчанию: dynamic. По умолчанию используется Popper для динамического позиционирования. Отключение с помощью static.

Modal (Модальное окно)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к опциям, доступным для выпадающего модального элемента:

Варианты для модального элемента могут быть:

  • backdrop, string|boolean, значение по умолчанию: true. Включает фоновый элемент модального окна. В качестве альтернативы, укажите static для фона, который не закрывает модальный элемент при нажатии.
  • keyboard, boolean, по умолчанию: true. Закрывает модальное окно при нажатии клавиши Escape.
  • focus, boolean, по умолчанию: true. Закрывает модальное окно при наведении.

Offcanvas

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.offcanvas', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к опциям, доступным для Offcanvas:

Варианты для offcanvas могут быть:

  • backdrop, boolean, по умолчанию: true. Применить фон к документу, когда offcanvas открыт.
  • keyboard, boolean, по умолчанию: true. Закрывает offcanvas при нажатии клавиши Escape.
  • scroll, boolean, по умолчанию: false. Разрешить прокрутку документы, когда offcanvas открыт.

Popover (Всплывающие окна)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.popover', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к опциям, доступным для всплывающего окна:

Варианты всплывающего окна могут быть:

  • animation, boolean, по умолчанию: true. Применить переход CSS с плавным переходом к всплывающему окну.
  • container, string|boolean, по умолчанию: false. Добавляет всплывающее окно к определенному элементу. Например: body.
  • content, string, по умолчанию: null. Значение содержимого по умолчанию, если атрибут data-bs-content отсутствует.
  • delay, number, по умолчанию: 0. Задержка отображения и скрытия всплывающего окна (мс) не применяется к trigger типа manual.
  • html, boolean, по умолчанию: true. Вставить HTML-код во всплывающее окно. Если значение false, свойство innerText будет использоваться для вставки содержимого в DOM.
  • placement, string, по умолчанию: right. Как расположить всплывающее окно - auto | top | bottom | left | right. Если указано значение auto, он будет динамически переориентировать всплывающее окно.
  • selector, string, значение по умолчанию: false. Если предусмотрен селектор, всплывающие объекты будут делегированы указанным целевым объектам.
  • template, string, по умолчанию: null. Базовый шаблон HTML для использования при создании всплывающего окна.
  • title, string, по умолчанию: null. Значение заголовка по умолчанию, если тег title отсутствует.
  • trigger, string, по умолчанию: click. Как запускается всплывающее окно - click | hover | focus | manual.
  • offset, integer, по умолчанию: 0. Смещение всплывающего окна относительно его цели..

Scrollspy

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.scrollspy', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к параметрам, доступным для scrollspy:

Параметры для Scrollspy могут быть:

  • offsetnumber. Количество пикселей, смещаемых сверху при расчете положения прокрутки.
  • methodstring. Находит, в каком месте находится наблюдаемый элемент.
  • target, string. Указывает элемент для применения плагина Scrollspy.

Tab (Вкладка)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tabs', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к параметрам, доступным для вкладки:

Параметры вкладки могут быть:

  • тут писатель документации пошёл за пивом и, вернувшись, забил на мануал и решил залипнуть в игрухе. (Прим. переводчика)

Tooltip (Всплывающие подсказки)

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tabs', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к параметрам, доступным для всплывающей подсказки:

Параметры всплывающей подсказки могут быть:

  • animation, boolean. Применить переход css с плавным переходом к всплывающему окну.
  • container, string|boolean. Добавляет всплывающее окно к определенному элементу: { container: body }
  • delay, number|object. Задержка отображения и скрытия всплывающего окна (мс) - не применяется к типу ручного запуска (manual trigger), если указано число, задержка применяется как к скрытию, так и к отображению структуры объекта: delay: { show: 500, hide: 100 }
  • html, boolean. Вставка HTML-кода во всплывающее окно. Если значение равно false, для вставки содержимого в DOM будет использоваться текстовый метод jQuery.
  • placement, string|function. Как расположить всплывающее окно - top | bottom | left | right.
  • selector, string. Если предусмотрен селектор, всплывающие объекты будут делегированы указанным целевым объектам.
  • template, string. Базовый HTML шаблона для использования при создании всплывающего окна.
  • title, string|function, по умолчанию: title. Значение, если тег title отсутствует
  • trigger, trigger. Как запускать всплывающее окно - hover | focus | manual.
  • constraints, array. Массив ограничений - передаётся в Popper.
  • offset, string. Смещение всплывающего окна относительно его цели.

Toast

Предполагая, что у вас уже есть HTML-часть в вашем шаблоне, вам также нужно будет включить интерактивность (часть JavaScript):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.toast', '.selector', []);
  • .selector ссылается на CSS-селектор для карусели. Вы можете вызвать эту функцию несколько раз с помощью разных селекторов CSS.
  • Третий аргумент относится к вариантам, доступным для тостов:

Варианты тостов могут быть:

  • animation, boolean, по умолчанию: true. Примените переход CSS-затухания к тосту.
  • autohide, boolean, по умолчанию: true. Автоматическое скрытие тоста.
  • delay, number, по умолчанию: 5000. Задержка скрытия тоста (мс)

Прочее

  • Accordian (аккордион) использует сворачивание для отображения панелей данных.
  • List Group можно объединить с вкладкой (Tab) для отображения содержимого с вкладками.


Перевод с английского официальной документации Joomla 4:
https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Старт! Горячий старт на просторы интернета
Старт! Горячий старт на просторы интернета
Старт! Меню