Перейти к основному содержанию Перейти к навигации по документации

Встраивайте в свой проект скрытые боковые панели для навигации, корзины покупок и многого другого с помощью нескольких классов и нашего плагина JavaScript.

Как это устроено

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

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

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

Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion. См. раздел с уменьшенным движением в нашей документации по специальным возможностям.

Примеры

Компоненты Offcanvas

Ниже приведен пример offcanvas, который отображается по умолчанию (через .show на .offcanvas). Offcanvas включает поддержку заголовка с кнопкой закрытия и дополнительный класс тела для некоторого начального заполнения. Мы рекомендуем по возможности включать заголовки offcanvas с действиями по отклонению или предоставлять явное действие по отклонению.

Offcanvas
Здесь размещается контент для offcanvas. Вы можете разместить здесь практически любой компонент Bootstrap или пользовательские элементы.
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    Здесь размещается контент для offcanvas. Вы можете разместить здесь практически любой компонент Bootstrap или пользовательские элементы.
  </div>
</div>

Живая демонстрация

Используйте кнопки ниже, чтобы отображать и скрывать элемент offcanvas с помощью JavaScript, который переключает класс .show на элемент с классом .offcanvas.

  • .offcanvas скрывает содержимое (по умолчанию)
  • .offcanvas.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-bs-target. В обоих случаях требуется data-bs-toggle="offcanvas".

Ссылка с помощью атрибута href
Вне холста
Какой-то текст в качестве заполнителя. В реальной жизни у вас могут быть элементы, которые Вы выбрали. Нравится, текст, изображения, списки и т. д.
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Ссылка с помощью атрибута href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Кнопка с атрибутом data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Вне холста</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Какой-то текст в качестве заполнителя. В реальной жизни у вас могут быть элементы, которые Вы выбрали. Нравится, текст, изображения, списки и т. д.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Кнопка раскрывающегося списка
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Действие</a></li>
        <li><a class="dropdown-item" href="#">Другое действие</a></li>
        <li><a class="dropdown-item" href="#">Что-то еще здесь</a></li>
      </ul>
    </div>
  </div>
</div>

Размещение

Для компонентов вне холста нет размещения по умолчанию, поэтому Вы должны добавить один из классов модификаторов ниже;

  • .offcanvas-start помещает offcanvas слева от области просмотра (показано выше)
  • .offcanvas-end помещает offcanvas в правую часть области просмотра
  • .offcanvas-top помещает offcanvas в верхнюю часть области просмотра
  • .offcanvas-bottom помещает offcanvas в нижнюю часть области просмотра

Попробуйте верхний, правый и нижний примеры ниже.

Верх Offcanvas
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Переключить верхнюю часть offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">Верх Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas справа
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Переключатель справа offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas справа</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas снизу
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Переключатель снизу offcanvas</button>

<div class="offcanvas offcanvas-bottom" 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 text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Фон

Прокрутка элемента <body> отключена, когда видны вне холста и его фон. Используйте атрибут data-bs-scroll для переключения прокрутки <body> и data-bs-backdrop для переключения фона.

Цветной с прокруткой

Попробуйте прокрутить оставшуюся часть страницы, чтобы увидеть этот параметр в действии.

Offcanvas с фоном

.....

На фоне с прокруткой

Попробуйте прокрутить оставшуюся часть страницы, чтобы увидеть этот параметр в действии.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Включить прокрутку body</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Включить фон (по умолчанию)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Включите прокрутку и фон</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Цветной с прокруткой</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <p>Попробуйте прокрутить оставшуюся часть страницы, чтобы увидеть этот параметр в действии.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas с фоном</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">На фоне с прокруткой</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
  </div>
  <div class="offcanvas-body">
    <p>Попробуйте прокрутить оставшуюся часть страницы, чтобы увидеть этот параметр в действии.</p>
  </div>
</div>

Доступность

Так как панель offcanvas концептуально является модальным диалогом, не забудьте добавить aria-labelledby="..."—ссылку на заголовок offcanvas - в .offcanvas. Обратите внимание, что Вам не нужно добавлять role="dialog", поскольку мы уже добавляем его через JavaScript.

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:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Использование

Плагин offcanvas использует несколько классов и атрибутов для выполнения тяжелой работы:

  • .offcanvas скрывает содержимое
  • .offcanvas.show показывает содержимое
  • .offcanvas-start скрывает offcanvas слева
  • .offcanvas-end скрывает offcanvas справа
  • .offcanvas-bottom скрывает offcanvas внизу

Добавьте кнопку отклонения с атрибутом data-bs-dismiss="offcanvas", который запускает функциональность JavaScript. Обязательно используйте с ним элемент <button> для правильного поведения на всех устройствах.

Через атрибуты данных

Переключение

Добавьте к элементу data-bs-toggle="offcanvas" и data-bs-target или href, чтобы автоматически назначить управление одним элементом offcanvas. Атрибут data-bs-target принимает CSS-селектор для применения offcanvas. Не забудьте добавить класс offcanvas к элементу offcanvas. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show.

Отклонение

Отклонение может быть достигнуто с помощью атрибута data на кнопке внутри offcanvas, как показано ниже:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

или на кнопке за пределами offcanvas с помощью data-bs-target, как показано ниже:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Хотя поддерживаются оба способа отклонения модального окна, имейте в виду, что удаление модального окна извне не соответствует шаблону проектирования модального диалога WAI-ARIA. Делайте это на свой страх и риск.

Через JavaScript

Включить вручную с помощью:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Опции

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-backdrop="".

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

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения. Кроме того, вызов метода переходного компонента будет проигнорирован.

Дополнительную информацию см. в нашей документации по JavaScript.

Активирует Ваш контент как элемент offcanvas. Принимает необязательные параметры object.

Вы можете создать экземпляр offcanvas с помощью конструктора, например:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Метод Описание
toggle Переключает элемент offcanvas на показанный или скрытый. Возврат к вызывающей стороне до того, как элемент offcanvas был фактически показан или скрыт (то есть до того, как произойдет событие shown.bs.offcanvas или hidden.bs.offcanvas).
show Показывает элемент offcanvas. Возврат к вызывающей стороне до того, как элемент offcanvas был фактически показан (то есть до того, как произойдет событие shown.bs.offcanvas).
hide Скрывает элемент offcanvas. Возврат к вызывающей стороне до того, как элемент offcanvas был фактически скрыт (то есть до того, как произойдет событие hidden.bs.offcanvas).
getInstance Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM.
getOrCreateInstance Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM, или создать новый, если он не был инициализирован

События

Класс offcanvas в Bootstrap предоставляет несколько событий для подключения к функциональности offcanvas.

Тип события Описание
show.bs.offcanvas Это событие срабатывает немедленно, когда вызывается метод экземпляра show.
shown.bs.offcanvas Это событие запускается, когда элемент offcanvas стал видимым для пользователя (будет ждать завершения переходов CSS).
hide.bs.offcanvas Это событие запускается сразу после вызова метода hide.
hidden.bs.offcanvas Это событие запускается, когда элемент offcanvas был скрыт от пользователя (будет ждать завершения переходов CSS).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // сделай что-нибудь...
})