侧边栏

使用一些类和 JavaScript 插件将隐藏的侧边栏构建到你的项目中，用于导航、购物车等。

更新于: 2023-04-30 14:28:21 查看: 702

发布于: 2021-9-6 14:52 发布者: 大米

运作流程

Offcanvas 是一个侧边栏组件，可以通过 JavaScript 切换以从视口的左侧、右侧或底部边缘显示。 按钮或锚点用作附加到你切换的特定元素的触发器，data属性用于调用我们的 JavaScript。
  • Offcanvas 与模态共享一些相同的 JavaScript 代码。 从概念上讲，它们非常相似，但它们是独立的插件。
  • 类似地，offcanvas 样式和尺寸的一些 source Sass 变量继承自模态变量。
  • 显示时，offcanvas 包含一个默认背景，可以单击以隐藏 offcanvas。
  • 与模态类似，一次只能显示一个画布。

注意！ 由于 CSS 处理动画的方式,你不能在 .offcanvas 元素上使用 margin 或 translate ，相反，将类用作独立的包装元素。

示例

画布组件

下面是一个默认显示的 offcanvas 示例（通过 .offcanvas 上的 .show ）.Offcanvas 包括对带有关闭按钮的标题和用于某些初始填充的可选主体类的支持。最好尽可能在关闭操作中包含 offcanvas 标头，或提供明确的关闭操作。 

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true">
  <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 元素，该 JavaScript 使用 .offcanvas 类切换元素上的 .show 类。
  • .offcanvas 隐藏内容（默认）
  • .offcanvas.show 显示内容

您可以使用带有 href 属性的链接，或带有 data-bs-target 属性的按钮。 在这两种情况下，都需要 data-bs-toggle="offcanvas" 。

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. 
<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 放在视口的底部

尝试下面的顶部，右侧和底部示例。

Offcanvas top
... 
<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 right
... 
<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>
Offcanvas bottom
... 
<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 切换背景。
Colored with scrolling

Try scrolling the rest of the page to see this option in action.

Offcanvas with backdrop

.....

Backdroped with scrolling

Try scrolling the rest of the page to see this option in action. 

<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 类从指定的断点向下隐藏视口之外的内容。在该断点之上，其中的内容将照常运行。例如，.offcanvas-lg在断点下方隐藏画布中lg的内容，但在断点上方显示内容lg。
调整浏览器大小以显示响应式 offcanvas 切换。
相应式画布

这是 .offcanvas-lg.

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">关闭画布</button>

<div class="alert alert-info d-none d-lg-block">调整浏览器大小以显示响应式 offcanvas 切换。</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">相应式画布</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">这是 <code>.offcanvas-lg</code>.</p>
  </div>
</div>
每个断点都可以使用响应式 offcanvas 类。

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

用法

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=""。

Name Type Default Description
backdrop boolean true Apply a backdrop on body while offcanvas is open
keyboard boolean true Closes the offcanvas when escape key is pressed
scroll boolean false Allow body scrolling while offcanvas is open
将您的内容作为画布元素激活。 接受一个可选的选项对象。

您可以使用构造函数创建一个 offcanvas 实例，例如： 

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Method Description
toggle Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the shown.bs.offcanvas or hidden.bs.offcanvas event occurs).
show Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the shown.bs.offcanvas event occurs).
hide Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the hidden.bs.offcanvas event occurs).
_getInstance Static method which allows you to get the offcanvas instance associated with a DOM element

活动

Bootstrap 的 offcanvas 类公开了一些用于挂钩 offcanvas 功能的事件。

Event type Description
show.bs.offcanvas This event fires immediately when the show instance method is called.
shown.bs.offcanvas This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas This event is fired immediately when the hide method has been called.
hidden.bs.offcanvas This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请