Bootstrap5 Навигация в боковой панели (Offcanvas)
Боковая панель Bootstrap5 похожа на модальное окно и обычно используется на мобильных устройствах.
Создание выдвижной навигации
Мы можем использовать JavaScript, чтобы указать, добавлять ли после.offcanvasкласса, добавить.showкласс, тем самым управляя отображением и скрытием боковой панели:
.offcanvasСкрыть содержимое (по умолчанию).offcanvas.showПоказать содержимое
Вы можете использоватьhrefатрибут ссылки a, или использовать у элемента buttondata-bs-targetатрибут для настройки боковой панели. В обоих случаях требуется использоватьdata-bs-toggle="offcanvas"。
Пример создания выдвижной навигации выглядит следующим образом:
Пример
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">Используйте атрибут href ссылки</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Используйте 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">Боковая панель</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
<div>
Какой-нибудь текст в качестве заполнителя. В реальной жизни у вас могут быть элементы, которые вы выбрали. Например, текст, изображения, списки и т. д.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Кнопка выпадающего списка
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><a class="dropdown-item" href="#">Что-то ещё здесь</a></li>
</ul>
</div>
</div>
</div>
Попробуйте »
Направление боковой панели
Направление боковой панели можно задать с помощью следующих четырёх классов:
.offcanvas-startОтображение слева, как в примере выше..offcanvas-endОтображение справа.offcanvas-topОтображение вверху.offcanvas-bottomОтображение внизу
Пример
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Верхняя панель навигации</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Отображается в верхней панели навигации</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Попробуйте »
Пример
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Правая боковая панель</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Отображается в правой боковой панели</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></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">Нижняя панель навигации</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Отображается в нижней панели навигации</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
Попробуйте »
Настройка фона и возможности его прокрутки
Когда боковая панель появляется, можно задать<body>может ли элемент прокручиваться, а также задать, отображать ли фоновую подложку. Используйтеdata-bs-scrollатрибут для установки<body>может ли элемент прокручиваться,data-bs-backdropчтобы переключать отображение фоновой подложки.
Пример
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">элемент body может прокручиваться</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Показать фоновую подложку (по умолчанию)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Разрешить прокрутку и показать фон offcanvas</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">Содержимое body может прокручиваться</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
<p>Прокрутите страницу, чтобы увидеть эффект.</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</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
<p>Содержимое body не может прокручиваться</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">Использовать фоновый холст, содержимое body может прокручиваться</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
</div>
<div class="offcanvas-body">
<p>Прокрутите страницу, чтобы увидеть эффект.</p>
</div>
</div>
Попробуйте »
