画布外
使用一些类和我们的 JavaScript 插件将隐藏的侧边栏构建到您的项目中,用于导航、购物车等。
这个怎么运作
Offcanvas 是一个侧边栏组件,可以通过 JavaScript 切换以从视口的左侧、右侧或底部边缘显示。按钮或锚点用作附加到您切换的特定元素的触发器,data
属性用于调用我们的 JavaScript。
- Offcanvas 与 modals 共享一些相同的 JavaScript 代码。从概念上讲,它们非常相似,但它们是独立的插件。
- 类似地,offcanvas 的样式和尺寸的一些源 Sass变量继承自 modal 的变量。
- 显示时,offcanvas 包含一个默认背景,单击该背景可以隐藏 offcanvas。
- 与 modals 类似,一次只能显示一个 offcanvas。
小心!鉴于 CSS 处理动画的方式,您不能在元素上使用margin
or 。相反,将类用作独立的包装元素。translate
.offcanvas
prefers-reduced-motion
媒体查询。请参阅
我们可访问性文档的减少运动部分。
例子
画布外组件
下面是一个默认显示的画布示例(通过.show
on .offcanvas
)。Offcanvas 包括对带有关闭按钮的标题和一些初始的可选正文类的支持padding
。我们建议您尽可能在关闭操作中包含 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 显示和隐藏一个 offcanvas 元素,该元素通过类切换.show
元素上的.offcanvas
类。
.offcanvas
隐藏内容(默认).offcanvas.show
显示内容
您可以使用带有属性的链接href
或带有属性的按钮data-bs-target
。在这两种情况下,data-bs-toggle="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>
画布右
<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
切换背景。
滚动着色
尝试滚动页面的其余部分以查看此选项的实际效果。
带背景的画布
......
以滚动为背景
尝试滚动页面的其余部分以查看此选项的实际效果。
<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
隐藏底部的画布
添加一个带有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 |
在画布打开时在身体上应用背景 |
keyboard |
布尔值 | true |
按下退出键时关闭画布 |
scroll |
布尔值 | false |
在 offcanvas 打开时允许正文滚动 |
方法
将您的内容激活为画布元素。接受一个可选选项object
。
您可以使用构造函数创建一个 offcanvas 实例,例如:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
方法 | 描述 |
---|---|
toggle |
将 offcanvas 元素切换为显示或隐藏。在 offcanvas 元素实际显示或隐藏之前(即在or事件发生之前)返回给调用者。shown.bs.offcanvas hidden.bs.offcanvas |
show |
显示一个 offcanvas 元素。在 offcanvas 元素实际显示之前(即在事件发生之前)返回给调用者。shown.bs.offcanvas |
hide |
隐藏画布外元素。在 offcanvas 元素实际被隐藏之前(即在事件发生之前)返回给调用者。hidden.bs.offcanvas |
getInstance |
允许您获取与 DOM 元素关联的 offcanvas 实例的静态方法 |
getOrCreateInstance |
静态方法,允许您获取与 DOM 元素关联的 offcanvas 实例,或创建一个新实例以防它未初始化 |
活动
Bootstrap 的 offcanvas 类公开了一些用于挂钩 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...
})