Перейти до основного вмісту Перейти до навігації документами
in English

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
Вміст для 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>

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

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

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

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

Посилання з href
Offcanvas
Деякий текст як заповнювач. У реальному житті ви можете мати елементи, які ви вибрали. Подобається, текст, зображення, списки тощо. 
<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, тому ви повинні додати один із наведених нижче класів модифікаторів;

  • .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>
Offcanvas справа
... 
<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>елемента вимкнено, коли видно позаполотно та його фон. Використовуйте 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">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-endховає позаполотно праворуч
  • .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 не відповідає шаблону дизайну модального діалогового вікна 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, коли натиснуто клавішу Escape
scroll логічний false Дозволити прокручування тіла, коли відкрито offcanvas

методи

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

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