Слайдер

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

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

Слайдер использует часть того же кода JavaScript, что и модальные окна. По концепции они довольно похожи, но являются отдельными плагинами.
Аналогично, некоторые переменные исходного Sass для стилей и размеров слайдера унаследованы от переменных модального окна.
При отображении слайдер включает в себя стандартную фоновую заглушку, которую можно нажать, чтобы скрыть слайдер.
Подобно модальным окнам, одновременно может отображаться только один слайдер.

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

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

Примеры

Компоненты слайдера

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

html

<div class="offcanvas offcanvas-start show" 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" 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".

html

<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Прокрутка тела

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

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Прокрутка тела и фоновая заглушка

Вы также можете включить <body> прокрутку с видимой фоновой заглушкой.

html

<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" 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" 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>

Статическая фоновая заглушка

Когда фоновая заглушка установлена в статическое состояние, слайдер не будет закрываться при нажатии за пределами него.

html

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

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Темный слайдер

Устарело в версии 5.3.0 Добавлен в v5.2.0

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

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

html

<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>Place offcanvas content here.</p>
  </div>
</div>

Адаптивность

Добавлен в v5.2.0

Классы адаптивного слайдера скрывают содержимое за пределами области просмотра с указанной точки перехода и ниже. Выше этой точки перехода содержимое внутри будет вести себя как обычно. Например, .offcanvas-lg скрывает содержимое слайдера ниже lg точки перехода, но отображает содержимое выше lg точки перехода.

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

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

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

Размещение

У компонентов слайдеров нет стандартного расположения, поэтому вы должны добавить один из модификаторных классов ниже.

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

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

html

<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

html

<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

html

<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Доступность

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

CSS

Переменные

Добавлен в v5.2.0

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

scss/_offcanvas.scss

--#{$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

scss/_variables.scss

$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 скрывает содержимое
.offcanvas.show отображает содержимое
.offcanvas-start скрывает слайдер слева
.offcanvas-end скрывает слайдер справа
.offcanvas-top скрывает слайдер сверху
.offcanvas-bottom скрывает слайдер снизу

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

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

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

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

Закрытие

Закрытие может быть достигнуто с помощью атрибута data-bs-dismiss на кнопке внутри слайдера, как показано ниже:

<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>

Хотя оба способа закрытия слайдера поддерживаются, помните, что закрытие извне слайдера не соответствует Руководству по ARIA для создания диалоговых окон (модальных окон). Делайте это на свой страх и риск.

Через JavaScript

Включить вручную:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Параметры

Поскольку параметры могут быть переданы через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Убедитесь, что вы изменяете тип имени параметра с «camelCase» на «кебаб-кейс», передавая параметры через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальное резервированное атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда у элемента есть атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", конечное значение title будет 456, а отдельные атрибуты данных переопределят значения, заданные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Конечный объект конфигурации является результатом объединения data-bs-config, data-bs- и js object, где последнее заданное значение ключа-значения переопределяет другие.

Имя	Тип	По умолчанию	Описание
`backdrop`	логическое значение или строка `static`	`true`	Применить бэкдроп к телу, пока открыт элемент offcanvas. В качестве альтернативы, укажите `static` для бэкдропа, который не закрывает offcanvas при нажатии.
`keyboard`	логическое значение	`true`	Закрыть offcanvas при нажатии клавиши Escape.
`scroll`	логическое значение	`false`	Разрешить прокрутку тела, пока offcanvas открыт.

Methods

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

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

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

События

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

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

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/components/offcanvas/