Offcanvas

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

На цій сторінці

Як це працює

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

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

Голови вгору! Зважаючи на те, як CSS обробляє анімацію, ви не можете використовувати marginабо translateна .offcanvasелементі. Замість цього використовуйте клас як незалежний елемент обгортки.

Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

Приклади

Компоненти Offcanvas

Нижче наведено приклад поза полотном, який відображається за замовчуванням (через .showon .offcanvas). Offcanvas включає підтримку заголовка з кнопкою закриття та додатковий клас тіла для деяких ініціалів padding. Ми пропонуємо вам включити заголовки 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>

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

Використовуйте кнопки нижче, щоб показати або приховати елемент offcanvas за допомогою JavaScript, який перемикає .showклас на елементі з .offcanvasкласом.

.offcanvasприховує вміст (за замовчуванням)
.offcanvas.showпоказує вміст

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

Посилання з href

Деякий текст як заповнювач. У реальному житті ви можете мати елементи, які ви вибрали. Подобається, текст, зображення, списки тощо.

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>

Темне неткане полотно

Додано у v5.2.0

Змінюйте зовнішній вигляд offcanvases за допомогою утиліт, щоб краще відповідати їм у різних контекстах, як-от темні навігаційні панелі. Тут ми додаємо .text-bg-darkдо .offcanvasі .btn-close-whiteдо .btn-closeдля правильного стилізації з темним офканвою. Якщо у вас є спадні списки, подумайте про додавання .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>

Чуйний

Додано у v5.2.0

Чуйні класи offcanvas приховують вміст за межами вікна перегляду від зазначеної точки зупинки й вниз. Вище цієї точки зупинки вміст у ньому працюватиме як зазвичай. Наприклад, .offcanvas-lgприховує вміст у offcanvas нижче 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, тому ви повинні додати один із наведених нижче класів модифікаторів.

.offcanvas-startрозміщує offcanvas ліворуч від вікна перегляду (показано вище)
.offcanvas-endрозміщує offcanvas праворуч від вікна перегляду
.offcanvas-topрозміщує offcanvas у верхній частині вікна перегляду
.offcanvas-bottomрозміщує 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>

...

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

Змінні

Додано у v5.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-endховає позаполотно праворуч
.offcanvas-topховає позаполотно зверху
.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>

або на кнопці поза межами полотна, використовуючи, data-bs-targetяк показано нижче:

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

Хоча підтримуються обидва способи закриття offcanvas, майте на увазі, що закриття поза межами offcanvas не відповідає діалоговому (модальному) шаблону Посібника з авторської практики 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, коли натиснуто клавішу Escape.
`scroll`	логічний	`false`	Дозволити прокручування тіла, коли відкрито offcanvas.

методи

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

Усі методи 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 буде фактично показано (тобто до того , як відбудеться `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...
})

Offcanvas

Як це працює

Приклади

Компоненти Offcanvas

Offcanvas

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

Offcanvas

Прокручування тіла

Offcanvas із прокруткою тіла

Прокрутка тіла та фон

Задник із прокруткою

Статичний фон

Offcanvas

Темне неткане полотно

Offcanvas

Чуйний

Чуйний offcanvas

Розміщення

Неканвасовий верх

Offcanvas справа

Нетканий низ

Доступність

CSS

Змінні

Змінні Sass

Використання

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

Перемикач

Відхилити

Через JavaScript

Опції

методи

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

Події