В Joomla 4 используется модульный подход для интерактивных компонентов. Рассмотрим, как правильно подключать Bootstrap 5 в Joomla 4.

Оглавление

При модульном подходе функциональность разбита на отдельные компоненты (файлы). При этом нет единого файлового подхода, как это было с Bootstrap в Joomla 3. Модульный подход в Joomla 4 был сделан для повышения эффективности и производительности. Загружаем только то, что нужно. И здесь на помощь приходят вспомогательные функции класса HTMLHelper, которые позволяют загружать отдельные Javascript компоненты Bootstrap 5.

Accordion - Bootstrap

Для создания аккордеона на Бутстрап (BS) в Joomla 4 используется несколько функций:

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.startAccordion', '#selector', []);

Добавляет поддержку bootstrap.collapse и вставляет разметку начала аккордеона.

#selector - cелектор идентификатора для аккордеона (без #).

[] - относится к параметрам, доступным для аккордеона.

Описание параметров при создании аккордеона (Joomla 4):

ПараметрТипПо умолчаниюОписание
parent string '' Если указан родительский элемент, все сворачиваемые элементы в указанном родительском элементе будут закрыты при отображении этого сворачиваемого элемента.
toggle boolean true Переключает сворачиваемый элемент при вызове.
active string '' Устанавливает активный слайд во время загрузки.
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.addSlide', '#selector', 'text', '.selector');

Открывает текущий слайд.

Описание параметров при создании слайда:

ПараметрТипПо умолчаниюОписание
#selector string   Селектор идентификатора для слайда (без #)
text string   Название слайда.
.selector string '' Селектор CSS для группы аккордеона.
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.endSlide');

Закрывает текущий слайд.

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.endAccordion');

Закрывает аккордеон.

Alert - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.alert', '.selector');

.selector относится к селектору CSS для alert. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS.

Button - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.button', '.selector');

.selector относится к селектору CSS для button. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS.

Carousel - Bootstrap

Для создания карусели на Bootstrap в Joomla 4 используйте:

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);

.selector относится к селектору CSS для carousel. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для carousel.

Описание параметров при создании карусели (Joomla 4 и Bootstrap):

ПараметрТипПо умолчаниюОписание
interval number 5000 Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться.
keyboard boolean true Должна ли карусель реагировать на события клавиатуры.
pause string | boolean 'hover' Если установлено значение 'hover', приостанавливает цикл карусели на mouseenter и возобновляет цикл карусели при mouseleave. Если установлено значение false, при наведении курсора на карусель она не приостанавливается.
slide string | boolean false Автоматически отображает карусель после того, как пользователь вручную перебирает первый элемент. Если установлено значение 'carousel', карусель воспроизводится автоматически при загрузке.
wrap boolean true Должна ли карусель работать непрерывно или иметь жесткие остановки.
touch boolean true Должна ли карусель поддерживать взаимодействие смахивания влево / вправо на устройствах с сенсорным экраном.

Collapse - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.collapse', '.selector', []);

.selector относится к селектору CSS для collapse. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для collapse

Описание параметров при создании collapse (Joomla 4):

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

Dropdown - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.dropdown', '.selector', []);

.selector относится к селектору CSS для dropdown. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для dropdown.

Описание параметров при создании dropdown (Joomla 4):

ПараметрТипПо умолчаниюОписание
boundary string 'scrollParent' Граница ограничения переполнения раскрывающегося меню.
display string 'dynamic' По умолчанию используется Popper для динамического позиционирования. Отключается при указании 'static'.
reference string 'toggle' Референсный элемент раскрывающегося меню.

Modal - Bootstrap

Для создания модальных (всплывающих окон) на Bootstrap в Joomla 4 используйте:

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);

.selector относится к селектору CSS для modal. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для modal.

Описание параметров при создании модальных окон (Joomla 4 и Bootstrap):

ПараметрТипПо умолчаниюОписание
backdrop string | boolean true Включает элемент модального фона. В качестве альтернативы укажите 'static' для фона, который не закрывает модальное окно при щелчке.
keyboard boolean true Закрывает модальное окно при нажатии клавиши выхода (Esc).
focus boolean true При инициализации фокусируется на модальном окне.

Для рендеринга содержимого в модальном окне Joomla 4 используйте:

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.renderModal', '.selector', [], 'body');

.selector относится к селектору CSS для renderModal. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для renderModal. body - это разметка для тела модального окна. Добавляется после iframe, если в модальном окне выводится ссылка.

Описание параметров при рендеринге содержимого в модальном окне:

ПараметрТипПо умолчаниюОписание
backdrop string | boolean true Включает элемент модального фона. В качестве альтернативы укажите 'static' для фона, который не закрывает модальное окно при щелчке.
keyboard boolean true Закрывает модальное окно при нажатии клавиши выхода (Esc).
title string   Название для модального окна.
closeButton boolean true Отображать или нет кнопку закрытия модального окна.
footer string   Необязательная разметка для футера модального окна.
url string   URL-адрес ресурса, который будет вставлен как iframe внутри тела модального окна.
height string   Высота iframe, содержащего удаленный ресурс.
width string   Ширина iframe, содержащего удаленный ресурс.
bodyHeight int   Необязательная высота тела модального окна в единицах viewport (vh).
modalWidth int   Необязательная ширина модального окна в единицах viewport (vh).

Offcanvas - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.offcanvas', '.selector', []);

.selector относится к селектору CSS для offcanvas. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для offcanvas.

Описание параметров при создании offcanvas (Joomla 4):

ПараметрТипПо умолчаниюОписание
backdrop boolean true Применить фон, пока не открыт offcanvas.
keyboard boolean true Закрывает модальное окно при нажатии клавиши выхода (Esc).
scroll boolean false Разрешить прокрутку body пока offcanvas открыт.

Popover - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.popover', '.selector', []);

.selector относится к селектору CSS для popover. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для popover.

Описание параметров при создании popover (Joomla 4):

ПараметрТипПо умолчаниюОписание
animation boolean true Применить переход CSS fade к объекту.
container string | boolean false Добавляет popover к определенному элементу, например 'body'. Этот параметр особенно полезен тем, что позволяет вам размещать всплывающее окно в потоке документа рядом с элементом-триггером, что предотвращает перемещение всплывающего окна от элемента-триггера во время изменения размера окна.
content string null Значение содержимого по умолчанию, если атрибут data-bs-content отсутствует.
delay number [ 'show' => 50, 'hide' => 200 ] Задержка отображения и скрытия в мс - не относится к ручному типу триггера. Если указано число, задержка применяется как к скрытию, так и к отображению. Есть возможность указать массив, чтобы применить разные значения для отображения и скрытия, например ['show' => 10, 'hide' => 300].
html boolean true Вставка HTML. Если false, для вставки содержимого в DOM будет использоваться свойство innerTextcode>.
placement string 'right' Как расположить - auto | top | bottom | left | right. Если указано auto, всплывающее окно будет динамически переориентировано.
selector string | boolean false Если предусмотрен селектор, объекты popover будут делегированы указанным целям. На практике это используется для включения popover в динамический HTML-контент.
template string null Базовый HTML-код для использования при создании popover. Заголовок popover будет вставлен в .popover-header. Содержимое popover будет вставлено в .popover-body. .popover-arrow станет стрелкой popover. Самый внешний элемент-оболочка должен иметь класс .popover.
title string null Значение заголовка по умолчанию, если атрибут title отсутствует.
trigger string 'click' Триггер для popover - click | hover | focus | manual.
offset array [0, 10] Смещение popover относительно его цели в формате [skidding, distance].
fallbackPlacement boolean null Определите резервные места размещения popover, предоставив список в массиве (в порядке предпочтения), например ['top', 'right', 'bottom', 'left']. В таком случае, если для popover установлено 'bottom', но в этом направлении недостаточно места для размещения popover, то по умолчанию будет использовано 'top'. Как только будет обнаружено достаточно места, размещение будет возвращено к первоначально определенному (или предпочтительному).
boundary string 'scrollParent' Граница ограничения переполнения popover.
customClass string null Добавляйте классы в popover при отображении. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: 'class-1 class-2'.
sanitize boolean null Включить или выключить очистку. Если включено, то будут очищены 'template', 'content' и 'title'.
allowList boolean true Объект, содержащий разрешенные атрибуты и теги для sanitize.

Scrollspy - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.scrollspy', '.selector', []);

.selector относится к селектору CSS для scrollspy. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для scrollspy.

Описание параметров при создании scrollspy (Joomla 4):

ПараметрТипПо умолчаниюОписание
animation boolean true Применить переход CSS fade к всплывающему окну.
container string | boolean false Добавляет всплывающее окно к определенному элементу. Пример: контейнер: 'тело'. Этот параметр особенно полезен тем, что позволяет вам размещать всплывающее окно в потоке документа рядом с элементом запуска, что предотвращает перемещение всплывающего окна от элемента запуска во время изменения размера окна.
offset boolean 10 Пиксели для смещения сверху при вычислении положения прокрутки.
method string 'auto' Находит, в каком разделе находится отслеживаемый элемент. 'auto' выберет лучший метод для получения координат прокрутки. 'offset' будет использовать метод Element.getBoundingClientRect() для получения координат прокрутки. 'position' будет использовать свойства HTMLElement.offsetTop и HTMLElement.offsetLeft для получения координат прокрутки.
target string null Элемент для привязки Scrollspy.

Tabs - Bootstrap

Для создания вкладок на Бутстрап (BS5) используется несколько функций:

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.startTabSet', $selector = 'myTab', $params = []);

Добавляет поддержку bootstrap.tab и cоздает панель вкладок.

$selector - string. Селектор идентификатора для панели вкладок (без #).

$params - array. Параметры для панели вкладок:

ПараметрТипПо умолчаниюОписание
active string '' Устанавливает активную вкладку.
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.addTab', $selector, $id, $title);

Начинает показ новой вкладки.

  • $selector - string. Идентификатор панели вкладок (без #).
  • $id - string. Идентификатор вкладки (без #).
  • $title - string. Текст заголовка для новой вкладки.
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.endTab');

Закрывает содержимое текущей вкладки.

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.endTabSet')

Закрывает панель вкладок.

Tooltip - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tooltip', '.selector', []);

.selector относится к селектору CSS для tooltip. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для tooltip, которые идентичны параметрам popover, так как tooltip - это прокси-метод для вызова popover.

Toast - Bootstrap

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.toast', '.selector', []);

.selector относится к селектору CSS для toast. Вы можете вызывать эту функцию несколько раз с разными селекторами CSS. Третий аргумент относится к параметрам, доступным для toast

Описание параметров при создании toast (Joomla 4):

ПараметрТипПо умолчаниюОписание
animation string null Применить переход CSS fade к toast.
autohide boolean true Автоматически скрывать toast.
delay number 5000 Задержка скрытия toast (мс).

Оригинал: https://jpath.ru/docs/output/js-css/ispolzovanie-bootstrap-v-joomla-4#dropdown-bootstrap (Но в нём есть ошибка, здесь исправленная)