Offcanvas
Створіть у свій проект приховані бічні панелі для навігації, візків для покупок тощо за допомогою кількох класів і нашого плагіна JavaScript.
Як це працює
Offcanvas — це компонент бічної панелі, який можна перемикати за допомогою JavaScript, щоб він з’являвся з лівого, правого або нижнього краю вікна перегляду. Кнопки або прив’язки використовуються як тригери, які прикріплюються до певних елементів, які ви перемикаєте, а data
атрибути використовуються для виклику нашого JavaScript.
- Offcanvas використовує деякий той самий код JavaScript, що й модальні. Концептуально вони досить схожі, але це окремі плагіни.
- Подібним чином деякі вихідні змінні Sass для стилів і розмірів offcanvas успадковуються від модальних змінних.
- Коли відображається, offcanvas містить фон за замовчуванням, який можна клацнути, щоб приховати offcanvas.
- Подібно до модалів, одночасно може бути показано лише одне полотно.
Голови вгору! Зважаючи на те, як CSS обробляє анімацію, ви не можете використовувати margin
або translate
на .offcanvas
елементі. Замість цього використовуйте клас як незалежний елемент обгортки.
prefers-reduced-motion
медіа-запиту. Перегляньте розділ про
обмежений рух нашої документації щодо спеціальних можливостей .
Приклади
Компоненти Offcanvas
Нижче наведено приклад поза полотном, який відображається за замовчуванням (через .show
on .offcanvas
). Offcanvas включає підтримку заголовка з кнопкою закриття та додатковий клас тіла для деяких ініціалів padding
. Ми пропонуємо вам включити заголовки offcanvas із діями відхилення, коли це можливо, або надати явну дію відхилення.
Offcanvas
<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"
потрібно.
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">Backdroped 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 використовує кілька класів і атрибутів для виконання важкої роботи:
.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
.
Через 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...
})