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

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
Контент для offcanvas идет сюда. Вы можете разместить здесь практически любой компонент Bootstrap или пользовательские элементы.
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"требуется .

Ссылка с href
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>элемента отключена, когда видимы offcanvas и его фон. Используйте data-bs-scrollатрибут, чтобы включить <body>прокрутку.

Offcanvas с прокруткой тела

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

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>

Статический фон

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

Offcanvas
Я не закроюсь, если вы нажмете вне меня.
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.2.0

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

Offcanvas

Разместите контент вне холста здесь.

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>

Отзывчивый

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

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

Измените размер окна браузера, чтобы отобразить адаптивный переключатель offcanvas.
Отзывчивый вне холста

Это содержимое в файле .offcanvas-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
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Размещение

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

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

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

Топ Offcanvas
...
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>
Offcanvas справа
...
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>

Доступность

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

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

переменные 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-topскрывает 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>
Хотя поддерживаются оба способа закрытия вне холста, имейте в виду, что закрытие извне вне холста не соответствует шаблону диалогового окна (модального) Руководства по авторской работе ARIA . Делайте это на свой страх и риск.

Через JavaScript

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

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

Опции

Поскольку параметры можно передавать через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Не забудьте изменить тип регистра имени параметра с « camelCase » на « kebab-case » при передаче параметров через атрибуты данных. Например, используйте 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}'.

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

Методы

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

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

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

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Метод Описание
getInstance Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM.
getOrCreateInstance Статический метод, который позволяет вам получить экземпляр вне холста, связанный с элементом DOM, или создать новый, если он не был инициализирован.
hide Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the hidden.bs.offcanvas event occurs).
show Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the shown.bs.offcanvas event occurs).
toggle Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the shown.bs.offcanvas or hidden.bs.offcanvas event occurs).

Events

Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.

Event type Description
hide.bs.offcanvas This event is fired immediately when the hide method has been called.
hidden.bs.offcanvas This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.offcanvas This event is fired when the offcanvas is shown, its backdrop is static and a click outside of the offcanvas is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
show.bs.offcanvas This event fires immediately when the show instance method is called.
shown.bs.offcanvas This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})