Offcanvas

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

На этой странице

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

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

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

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

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

Примеры

Offcanvas компоненты

Ниже приведен пример offcanvas, который отображается по умолчанию (через .showon .offcanvas). Offcanvas включает поддержку заголовка с кнопкой закрытия и необязательный класс body для некоторых начальных файлов padding. Мы рекомендуем по возможности включать заголовки 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="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

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

Используйте кнопки ниже, чтобы показать и скрыть элемент вне холста с помощью 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">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with 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">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Размещение

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

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

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

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom 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 bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Фон

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

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

.....

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

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</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">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</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 with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></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">Backdrop with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Доступность

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

Сасс

Переменные

$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к элементу, чтобы автоматически назначить управление одним элементом вне холста. Атрибут data-bs-targetпринимает селектор CSS, к которому применяется offcanvas. Обязательно добавьте класс offcanvasв элемент offcanvas. Если вы хотите, чтобы он открывался по умолчанию, добавьте дополнительный класс show.

Увольнять

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

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

или на кнопке за пределами холста, используя, 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`	логический	`true`	Примените фон к телу, когда открыт offcanvas
`keyboard`	логический	`true`	Закрывает offcanvas при нажатии клавиши выхода
`scroll`	логический	`false`	Разрешить прокрутку тела, когда открыт offcanvas

Методы

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

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

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

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

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

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Метод	Описание
`toggle`	Переключает элемент вне холста, чтобы он отображался или скрывался. Возвращает вызывающему объекту до того, как элемент offcanvas был фактически показан или скрыт (т. е. до того, как произошло событие `shown.bs.offcanvas`или ).`hidden.bs.offcanvas`
`show`	Показывает элемент вне холста. Возвращает вызывающему объекту до фактического отображения элемента offcanvas (т. е. до того , как `shown.bs.offcanvas`произойдет событие).
`hide`	Скрывает элемент вне холста. Возвращает вызывающему объекту до того, как элемент offcanvas будет фактически скрыт (т. е. до того , как `hidden.bs.offcanvas`произойдет событие).
`getInstance`	Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM.
`getOrCreateInstance`	Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM, или создать новый, если он не был инициализирован.

События

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

Тип события	Описание
`show.bs.offcanvas`	Это событие срабатывает сразу же при `show`вызове метода экземпляра.
`shown.bs.offcanvas`	Это событие запускается, когда элемент offcanvas становится видимым для пользователя (будет ожидать завершения переходов CSS).
`hide.bs.offcanvas`	Это событие запускается сразу после вызова `hide`метода.
`hidden.bs.offcanvas`	Это событие запускается, когда элемент вне холста был скрыт от пользователя (будет ожидать завершения переходов CSS).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

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

Примеры

Offcanvas компоненты

Offcanvas

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

Offcanvas

Размещение

Топ Offcanvas

Offcanvas справа

Нижняя часть холста

Фон

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

Offcanvas с фоном

Фон с прокруткой

Доступность

Сасс

Переменные

Применение

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

Переключать

Увольнять

Через JavaScript

Опции

Методы

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

События