Bootstrap 5 Offcanvas

Как это работает

Offcanvas - это компонент боковой панели, который можно переключать с помощью JavaScript для отображения с левого, правого, верхнего или нижнего края области просмотра. Кнопки или привязки используются в качестве триггеров, которые привязаны к определенным элементам, которые вы переключаете, а data атрибуты используются для вызова JavaScript.

• Offcanvas использует тот же JavaScript-код, что и modals. Концептуально они очень похожи, но представляют собой отдельные плагины.
• Аналогично, некоторые переменные исходного кода Sass для стилей и размеров offcanvas наследуются от модальных переменных.
• Когда отображается, offcanvas включает фон по умолчанию, на котором можно щелкнуть, чтобы скрыть offcanvas.
• Аналогично модалам, одновременно может отображаться только один offcanvas.

Внимание! Учитывая, как CSS обрабатывает анимацию, вы не можете использовать margin or translate для .offcanvas элемента. Вместо этого используйте класс как независимый элемент упаковки.

Основы Offcanvas

HTML-структура

Простейший Offcanvas состоит из следующих элементов:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Открыть Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Заголовок Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <p>Содержимое Offcanvas.</p>
  </div>
</div>

Описание элементов

1. button: триггер для открытия Offcanvas.

   • data-bs-toggle="offcanvas": указывает, что кнопка запускает Offcanvas.
   • data-bs-target="#offcanvasExample": связывает кнопку с Offcanvas по ID.
   • aria-controls: соответствует ID Offcanvas, что улучшает доступность.

2. div.offcanvas: основной контейнер Offcanvas.

   • offcanvas-start: определяет сторону, с которой появляется Offcanvas (доступны start, end, top, bottom).
   • tabindex="-1": делает элемент доступным для взаимодействия.
   • id: уникальный идентификатор для связывания с триггером.

3. div.offcanvas-header: заголовок Offcanvas.

   • включает заголовок (offcanvas-title) и кнопку закрытия (btn-close).

4. div.offcanvas-body: основное содержимое.

Параметры и атрибуты

Позиционирование

Для указания стороны появления используйте один из следующих классов:

• offcanvas-start — слева (по умолчанию).
• offcanvas-end — справа.
• offcanvas-top — сверху.
• offcanvas-bottom — снизу.

Атрибуты

• data-bs-scroll="true": позволяет прокручивать основной контент, даже если Offcanvas открыт.
• data-bs-backdrop="false": отключает затемнение фона (бекдроп).

Пример:

<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  ...
</div>

Стилизация

Offcanvas наследует стандартные стили Bootstrap, которые можно кастомизировать. Используйте утилитарные классы Bootstrap для изменения ширины, высоты или других параметров.

Пример изменения ширины

<div class="offcanvas offcanvas-start" style="width: 300px;" id="offcanvasExample">
  ...
</div>

Пример изменения высоты (для offcanvas-top или offcanvas-bottom)

<div class="offcanvas offcanvas-bottom" style="height: 50vh;" id="offcanvasExample">
  ...
</div>

Темные offcanvas

Устарело в версии 5.3.0 Добавлено в версии 5.2.0

Измените внешний вид offcanvas с помощью утилит, чтобы они лучше подходили для разных контекстов, например для тёмных навигационных панелей. Здесь мы добавляем .text-bg-dark к .offcanvas и .btn-close-white к .btn-close для правильного оформления с помощью тёмного offcanvas. Если у вас есть выпадающие списки, подумайте о том, чтобы добавить .dropdown-menu-dark к .dropdown-menu.

Внимание! Темные варианты компонентов были удалены в версии 5.3.0 с введением цветовых режимов. Вместо ручного добавления упомянутых выше классов установите data-bs-theme="dark" на корневой элемент, родительскую оболочку или сам компонент.

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Разместите содержимое offcanvas здесь.</p>
  </div>
</div>

Методы JavaScript

Инициализация

Offcanvas можно инициализировать через JavaScript:

const offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasExample'));
offcanvas.show();

Методы

• show(): Открывает Offcanvas.
• hide(): Закрывает Offcanvas.
• toggle(): Переключает состояние (открыто/закрыто).

Пример:

const myOffcanvas = new bootstrap.Offcanvas('#offcanvasExample');
document.getElementById('toggleButton').addEventListener('click', () => {
  myOffcanvas.toggle();
});

События

Offcanvas поддерживает следующие события:

Использование событий

const myOffcanvas = document.getElementById('offcanvasExample');

myOffcanvas.addEventListener('show.bs.offcanvas', () => {
  console.log('Offcanvas будет открыт!');
});

myOffcanvas.addEventListener('hidden.bs.offcanvas', () => {
  console.log('Offcanvas закрыт!');
});

Примеры

Offcanvas с формой

<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForm" aria-controls="offcanvasForm">
  Открыть форму
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasForm" aria-labelledby="offcanvasFormLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasFormLabel">Форма</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <form>
      <div class="mb-3">
        <label for="exampleInputEmail" class="form-label">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Введите email">
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword" class="form-label">Пароль</label>
        <input type="password" class="form-control" id="exampleInputPassword" placeholder="Введите пароль">
      </div>
      <button type="submit" class="btn btn-primary">Отправить</button>
    </form>
  </div>
</div>

Offcanvas с прокруткой длинного контента

Если в вашем Offcanvas много контента, добавьте атрибут data-bs-scroll="true" для включения внутренней прокрутки.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrollable" aria-controls="offcanvasScrollable">
  Открыть с прокруткой
</button>

<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasScrollable" aria-labelledby="offcanvasScrollableLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollableLabel">Длинный контент</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <p>Этот Offcanvas содержит длинный текст для демонстрации прокрутки.</p>
    <p>Добавьте сюда длинные параграфы или списки. Например:</p>
    <ul>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
      <li>...и так далее</li>
    </ul>
  </div>
</div>

Offcanvas без затемнения фона

Отключите затемнение фона, добавив атрибут data-bs-backdrop="false".

<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNoBackdrop" aria-controls="offcanvasNoBackdrop">
  Открыть без затемнения
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="false" tabindex="-1" id="offcanvasNoBackdrop" aria-labelledby="offcanvasNoBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasNoBackdropLabel">Без затемнения</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <p>Этот Offcanvas позволяет взаимодействовать с основным контентом даже в открытом состоянии.</p>
  </div>
</div>

Offcanvas сверху с кастомной высотой

Для Offcanvas сверху (offcanvas-top) можно задать кастомную высоту.

<button class="btn btn-warning" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
  Открыть сверху
</button>

<div class="offcanvas offcanvas-top" style="height: 50vh;" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas сверху</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <p>Этот Offcanvas выезжает сверху экрана и имеет половинную высоту окна.</p>
  </div>
</div>

Offcanvas с меню навигации

Идеально подходит для создания мобильного меню.

<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu" aria-controls="offcanvasMenu">
  Открыть меню
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasMenuLabel">Меню</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Главная</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">О нас</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Контакты</a>
      </li>
    </ul>
  </div>
</div>

Offcanvas снизу с интерактивным контентом

Этот Offcanvas выезжает снизу и содержит форму.

<button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
  Открыть снизу
</button>

<div class="offcanvas offcanvas-bottom" style="height: 30vh;" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas снизу</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <form>
      <div class="mb-3">
        <label for="exampleInputEmail" class="form-label">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Введите email">
      </div>
      <button type="submit" class="btn btn-primary">Отправить</button>
    </form>
  </div>
</div>

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

Советы по использованию

1. Доступность. Всегда добавляйте атрибуты aria-controls и aria-labelledby для лучшей доступности.
2. Мобильные устройства. Offcanvas особенно полезен для мобильных меню.
3. Кастомизация. Используйте CSS для тонкой настройки внешнего вида компонента.

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к переменным CSS в offcanvas теперь используются локальные переменные CSS в .offcanvas для расширенной настройки в реальном времени. Значения переменных CSS задаются с помощью Sass, поэтому настройка с помощью Sass по-прежнему поддерживается.

--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
--#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
--#{$prefix}offcanvas-color: #{$offcanvas-color};
--#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};

Переменные Sass

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                var(--#{$prefix}body-bg);
$offcanvas-color:                   var(--#{$prefix}body-color);
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Теперь вы можете эффективно использовать компонент Offcanvas в своих проектах!