-
Главная
-
Joomla
-
Отображение материалов.
-
Вопросы javascript
- Использование Bootstrap в Joomla 4
Использование Bootstrap в Joomla 4
В Joomla 4 используется модульный подход для интерактивных компонентов. Рассмотрим, как правильно подключать Bootstrap 5 в Joomla 4.
Оглавление
- Accordion - Bootstrap
- Alert - Bootstrap
- Button - Bootstrap
- Carousel - Bootstrap
- Collapse - Bootstrap
- Dropdown - Bootstrap
- Modal - Bootstrap
- Offcanvas - Bootstrap
- Popover - Bootstrap
- Scrollspy - Bootstrap
- Tabs - Bootstrap
- Tooltip - Bootstrap
- Toast - Bootstrap
При модульном подходе функциональность разбита на отдельные компоненты (файлы). При этом нет единого файлового подхода, как это было с 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 (Но в нём есть ошибка, здесь исправленная)