Перейти к содержимому

Off-canvas Element

Собирайте выдвижные панели из элементов Builder: задайте сторону, режим анимации, затемнение, способы закрытия и кнопку открытия в одном Off-canvas-контейнере.
Joomla! 6
YOOtheme Pro 5
PHP 8.4
Скачать бесплатно
Поддержка

Соберите выдвижную панель из элементов Builder

Off-canvas хранит вложенный Builder-фрагмент вместе с заголовком, кнопкой открытия и настройками UIkit. Меню, текст, изображения и другие зарегистрированные элементы остаются редактируемыми в привычной структуре страницы.

Один ID связывает панель с любым триггером

Встроенную кнопку можно оставить в элементе или скрыть и открыть панель извне через uk-toggle="target: #offcanvasID". Значение ID должно быть уникальным на странице.

Кнопка открывает боковую панель Off-canvas с изображением, текстом и отдельным призывом к действию

Контент остаётся в структуре Builder

Один контейнер подходит для разных задач: меняется вложенный фрагмент, а управление стороной, анимацией и закрытием остаётся в настройках Off-canvas.

Четыре сценария Off-canvas Element: навигация, фильтры, справка и форма поверх содержимого страницы

Навигация

Поместите Menu и сопутствующие ссылки в панель, которая открывается из компактной кнопки.

Фильтры каталога

Соберите фильтры и пояснения в отдельном фрагменте, чтобы освободить основную область страницы.

Контекстная справка

Покажите инструкции, параметры или дополнительный материал рядом с рабочим интерфейсом.

Форма и CTA

Объедините текст, поля и кнопки в панели и вызывайте её из нужного места страницы.

Проверьте четыре режима открытия

Во всех примерах включены overlay, кнопка закрытия, Esc и закрытие по фону. Меняются только режим UIkit и сторона панели.

None

Панель появляется без перехода. Подходит для интерфейсов, где движение нужно исключить.

Режим None

Контент появляется без анимации и не меняет положение основной страницы.

Закройте панель кнопкой, клавишей Esc или нажатием на затемнённый фон.

Slide

Панель въезжает поверх страницы слева.

Режим Slide

Панель перемещается поверх страницы слева.

Закройте панель кнопкой, клавишей Esc или нажатием на затемнённый фон.

Push

Панель входит справа и сдвигает контейнер страницы.

Режим Push

Панель открывается справа и сдвигает основной контейнер.

Закройте панель кнопкой, клавишей Esc или нажатием на затемнённый фон.

Reveal

Панель остаётся под контейнером и открывается при его смещении.

Режим Reveal

Панель открывается слева под смещающимся контейнером страницы.

Закройте панель кнопкой, клавишей Esc или нажатием на затемнённый фон.

ID, toggle и панель работают как один контейнер

Element definition хранит контент, состояния и настройки вместе; шаблон выводит их в предсказуемом порядке.

1. ID

Значение добавляется к префиксу offcanvas и формирует target панели.

2. Toggle

Встроенная кнопка получает текст, icon, style, size, alignment и доступное имя.

3. Off-canvas bar

UIkit получает side, overlay, animation mode и правила закрытия.

4. Builder fragment

Заголовок и вложенные элементы рендерятся внутри панели после кнопки закрытия.

Все публичные настройки Off-canvas Element

Группы и порядок повторяют вкладки Content, Settings и Advanced в Builder. Справочник использует сохранённые значения props из версии 1.0.3.

Content

ID
id

Default Example. Формирует selector #offcanvas<ID>; значение должно быть уникальным на странице.

Title
title

Заголовок внутри панели. Выводится при включённом Show title и непустом значении.

Content
content

Builder fragment с вложенными зарегистрированными элементами.
Settings — Off-canvas

Overlay
overlay

Default включён. Добавляет затемнение страницы за открытой панелью.

Position
flip

false — Left, default; true — Right.

Center content
offcanvas_center

Default выключен. Вертикально центрирует содержимое панели.

Animation
animation_mode

Default none; доступны none, slide, push и reveal.

Close button
show_close_button

Default включён. Показывает кнопку закрытия внутри панели.

Close Color
close_button_color

При включённой кнопке доступны default, muted, emphasis, primary и secondary.

Size
close_button_size

При включённой кнопке доступны default и large.

Close with Esc button
esc_close

Default включён. Разрешает закрыть панель клавишей Esc.

Close the off-canvas when the background is clicked.
bg_close

Default включён. Разрешает закрыть панель нажатием на фон.
Settings — Title

Show title
show_title

Default включён. Заголовок выводится только при непустом title.

Style
title_style

Default без дополнительного класса. Доступны Heading 3X-Large–Small, H1–H6 и Text Meta, Lead, Small, Large.

Font Family
title_font_family

Доступны пустое значение, default, primary, secondary и tertiary.

Color
title_color

При включённом заголовке доступны default, muted, emphasis, primary, secondary, success, warning, danger и background.

HTML Element
title_element

Default div; доступны h1–h6 и div.

Alignment
title_align

Default left; доступны left, center и right.
Settings — Toggle

Show button
show_toggle_button

Default включён. Кнопка выводится, если заполнен текст или выбрана иконка.

Title
toggle_button

Текст кнопки; default Open.

Link ARIA Label
toggle_aria_label

Доступное имя кнопки. Поддерживает dynamic source.

Style
toggle_style

Default default; доступны default, primary, secondary, danger, text и link.

Size
toggle_size

Доступны small, default и large.

Full width button
toggle_fullwidth

Default выключен. Растягивает кнопку на ширину контейнера и отключает настройки alignment.

Icon
toggle_icon

Необязательная иконка из библиотеки. Поддерживает dynamic source.

Icon Alignment
toggle_icon_align

При выбранной иконке доступны left — default — и right.

Toggle Alignment
toggle_align

При выключенном Full width доступны default, left, center и right.

Toggle Alignment Breakpoint
toggle_align_breakpoint

При заданном alignment доступны Always, s, m, l и xl.

Toggle Alignment Fallback
toggle_align_fallback

При заданном breakpoint доступны default, left, center и right для меньшей ширины.
Settings — General

Margin Top
margin_top

Default default. Доступны пустое значение, xsmall, small, default, medium, large, xlarge, remove и auto. Недоступно при absolute position.

Margin Bottom
margin_bottom

Default default. Доступны пустое значение, xsmall, small, default, medium, large, xlarge, remove и auto. Недоступно при absolute position.

Visibility
visibility

Показывает элемент всегда, от breakpoint s/m/l/xl или скрывает от выбранного breakpoint.

Section/Row — Remove left or right padding
container_padding_remove

Удаляет внутренний отступ со стороны расширяющейся Section или Row; недоступно при absolute position.
Advanced

Name
name

Подпись элемента в структуре Builder; на frontend не выводится.

Status
status

Штатный статус Builder для включения или отключения элемента.

Classes
class

Дополнительные CSS-классы корневого элемента.

Attributes
attributes

Дополнительные HTML-атрибуты корневого элемента.

CSS
css

Element-local CSS с selectors .el-element, .el-bar, .el-title и .el-close.

Закрытие управляется отдельно от анимации

Toggle и close — нативные buttons. Esc, фон, сторона и режим движения задаются независимыми props, поэтому поведение можно согласовать с задачей конкретной панели.

Off-canvas на desktop и mobile с видимым фокусом, закрытием по Esc и режимом без анимации

Keyboard и доступное имя

Link ARIA Label задаёт aria-label для toggle. Close button и Esc доступны отдельно; focus order и возврат focus нужно проверить на целевом frontend.

Фон и прокрутка

Открытый UIkit Offcanvas блокирует фон только на время работы панели. После каждого способа закрытия нужно проверить восстановление прокрутки страницы.

Responsive

Вложенные элементы сохраняют Builder reading order. Breakpoint и fallback меняют alignment кнопки, а Full width отключает эти настройки.

Reduced motion

Версия 1.0.3 не переключает режим автоматически по prefers-reduced-motion. Для сценария без движения выберите none и проверьте поведение на целевом сайте.

Загрузки

PHP 8.3.0, Joomla 6 и YOOtheme Pro 5.0.43. Рекомендуемое окружение — PHP 8.4.

Расширение Off-canvas Element
Скачать бесплатно

Системные требования

Минимальные

Joomla!
6
YOOtheme Pro
5
PHP
8.3

Рекомендуемые

Joomla!
6
YOOtheme Pro
5
PHP
8.4+

Расширение подключено к серверу обновлений MSGru. Joomla сообщит о новой версии, если на сайте включена проверка обновлений.

Поддержать разработку

Отсканируйте QR-код для перехода в сервис пожертвований CloudTips

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Максимальная сумма 3000 ₽

Поддержать
Отсканируйте QR-код для перехода в сервис пожертвований Спасибо Мир

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Сумма доната не ограничена

Поддержать

    Список изменений

    1.0.3

    Изменено
    Плагин переработан под структуру расширений для YOOtheme Pro 5
    Добавлено
    В общие настройки элемента добавлены штатные внешние отступы сверху и снизу, аналогичные стандартному элементу Button
    Изменено
    Обновлена иконка элемента

    1.0.2

    Добавлено
    Атрибут uk-toggle для вызова off-canvas генерируется из ID и отображается в момент редактирования

    Лицензия

    GNU General Public License версии 3 (GPL-3.0).
    Бесплатно

    • Скачивание без ограничений

    • Использование на любом количестве сайтов

    Платно

    • Помощь в установке и настройке

    • Техническая поддержка

    • Исправление проблем совместимости со сторонними расширениями и библиотеками

    • Доработка функционала под конкретные требования заказчика

    Загляните в раздел услуг

    Закажи разработку

    Компоненты любой сложности для Joomla! и не только: интеграция сторонних сервисов; большие пакетные решения; e-commerce.

    Заказать
    Наши услуги