Offcanvas
Добавьте в свой проект скрытые боковые панели для навигации, корзины покупок и многого другого с помощью нескольких классов и нашего плагина JavaScript.
Как это работает
Offcanvas — это компонент боковой панели, который можно переключать с помощью JavaScript, чтобы он отображался с левого, правого или нижнего края области просмотра. Кнопки или привязки используются в качестве триггеров, которые прикрепляются к определенным элементам, которые вы переключаете, а data
атрибуты используются для вызова нашего JavaScript.
- Offcanvas использует тот же код JavaScript, что и модальные окна. Концептуально они очень похожи, но это отдельные плагины.
- Точно так же некоторые исходные переменные Sass для стилей и размеров offcanvas наследуются от модальных переменных.
- При отображении offcanvas включает фон по умолчанию, по которому можно щелкнуть, чтобы скрыть offcanvas.
- Как и в случае с модальными окнами, одновременно может отображаться только одно окно вне холста.
Берегись! Учитывая то, как CSS обрабатывает анимацию, вы не можете использовать margin
или translate
для .offcanvas
элемента. Вместо этого используйте класс как независимый элемент-оболочку.
prefers-reduced-motion
медиа-запроса. См.
раздел с ограниченным движением в нашей документации по специальным возможностям .
Примеры
Offcanvas компоненты
Ниже приведен пример offcanvas, который отображается по умолчанию (через .show
on .offcanvas
). Offcanvas включает поддержку заголовка с кнопкой закрытия и необязательный класс body для некоторых начальных файлов 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>
Живая демонстрация
Используйте кнопки ниже, чтобы показать и скрыть элемент вне холста с помощью 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-start
размещает offcanvas слева от области просмотра (показано выше).offcanvas-end
размещает offcanvas справа от области просмотра.offcanvas-top
помещает offcanvas в верхнюю часть области просмотра.offcanvas-bottom
помещает offcanvas в нижнюю часть области просмотра
Попробуйте верхний, правый и нижний примеры ниже.
Топ 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>
элемента отключена, когда видимы offcanvas и его фон. Используйте 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 слева.offcanvas-end
скрывает 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
.
Через 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 при нажатии клавиши выхода |
scroll |
логический | false |
Разрешить прокрутку тела, когда открыт offcanvas |
Методы
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .
Дополнительную информацию см. в нашей документации по JavaScript .
Активирует ваш контент как элемент вне холста. Принимает необязательные параметры object
.
Вы можете создать экземпляр offcanvas с помощью конструктора, например:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Метод | Описание |
---|---|
toggle |
Переключает элемент вне холста, чтобы он отображался или скрывался. Возвращает вызывающему объекту до того, как элемент offcanvas был фактически показан или скрыт (т. е. до того, как произошло событие shown.bs.offcanvas или ).hidden.bs.offcanvas |
show |
Показывает элемент вне холста. Возвращает вызывающему объекту до фактического отображения элемента offcanvas (т. е. до того , как shown.bs.offcanvas произойдет событие). |
hide |
Скрывает элемент вне холста. Возвращает вызывающему объекту до того, как элемент offcanvas будет фактически скрыт (т. е. до того , как hidden.bs.offcanvas произойдет событие). |
getInstance |
Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM. |
getOrCreateInstance |
Статический метод, который позволяет вам получить экземпляр offcanvas, связанный с элементом DOM, или создать новый, если он не был инициализирован. |
События
Класс Bootstrap offcanvas предоставляет несколько событий для подключения к функциям offcanvas.
Тип события | Описание |
---|---|
show.bs.offcanvas |
Это событие срабатывает сразу же при show вызове метода экземпляра. |
shown.bs.offcanvas |
Это событие запускается, когда элемент offcanvas становится видимым для пользователя (будет ожидать завершения переходов CSS). |
hide.bs.offcanvas |
Это событие запускается сразу после вызова hide метода. |
hidden.bs.offcanvas |
Это событие запускается, когда элемент вне холста был скрыт от пользователя (будет ожидать завершения переходов CSS). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})