Bootstrap Offcanvas 介绍

简介

Bootstrap Offcanvas 是基于 Bootstrap 框架的一个插件，它可以实现一个侧边栏，包含导航菜单、设置、信息等。用户可以通过点击按钮或手势来打开和关闭侧边栏。

特点

• 响应式布局：Offcanvas 插件是响应式的，可以自适应不同的设备尺寸。
• 自定义样式：Offcanvas 插件提供了多种选项和 API，可以自定义侧边栏的样式和行为。
• 易于使用：Offcanvas 插件简单易用，并且兼容最新版的 Bootstrap 框架。

使用

引入依赖

需要引入最新版本的 Bootstrap 和 Offcanvas 插件。

<!-- 引入 Bootstrap 样式 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Offcanvas 插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>

HTML 结构

使用 Offcanvas 插件需要在 HTML 结构中添加一些标记和类名。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <!-- 按钮 -->
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Offcanvas 内容 -->
    <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">
        <!-- 导航菜单 -->
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

JavaScript 代码

在 JavaScript 中初始化 Offcanvas 插件。

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

选项

Offcanvas 插件提供了多个选项，可以在初始化时传入。

| 名称 | 类型 | 默认值 | 描述 | | ------------------ | ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | backdrop | boolean | true | 是否显示背景遮罩。 | | keyboard | boolean | true | 是否允许使用 ESC 键关闭 Offcanvas。 | | scroll | boolean | true | 是否禁止页面滚动。 | | toggle | boolean | true | 是否允许通过数据属性 data-bs-toggle="offcanvas" 和 data-bs-target 来切换 Offcanvas。 | | dismiss | boolean | true | 是否允许通过数据属性 data-bs-dismiss="offcanvas" 来关闭 Offcanvas。 | | focus | boolean | true | 是否将焦点设置为 Offcanvas 内容。 | | animation | boolean | true | 是否启用动画效果。 | | autohide | boolean | true | 是否自动隐藏。 | | placement | string | start | Offcanvas 的位置。可选 start, end, top, bottom。 | | container | string|node | body | Offcanvas 的包含元素。你可以传入一个元素的 ID 或 DOM 节点。 | | element | string|node | null | 触发 Offcanvas 的元素。你可以传入一个元素的 ID 或 DOM 节点。 | | rootElement | node | null | 设置 Offcanvas 根元素，即 position:fixed 元素的祖先元素。默认为 document.documentElement。 | | backdropOpacity | number | 0.5 | 背景遮罩的透明度。 | | offcanvasBodyClass | string | null | Offcanvas 内容区域的类名。 | | triggerEvents | array | [] | 触发 Offcanvas 显示的事件名称数组，可选值有 click, hover, focus 和 manual。当设置了 trigger 选项后，toggle 和 dismiss 选项将自动忽略。 | | relatedTarget | node | null | 触发 Offcanvas 的元素。 | | onShow | function | null | 显示 Offcanvas 时触发的回调函数。 | | shown | function | null | 显示 Offcanvas 完毕时触发的回调函数。 | | onHide | function | null | 隐藏 Offcanvas 时触发的回调函数。 | | hidden | function | null | 隐藏 Offcanvas 完毕时触发的回调函数。 |

设置选项

可以在初始化 Offcanvas 时传入选项。

var offcanvas = new bootstrap.Offcanvas(document.querySelector('#offcanvasExample'), {
  backdrop: true,
  keyboard: true,
  scroll: true,
  toggle: true,
  dismiss: true,
  focus: true,
  animation: true,
  autohide: true,
  placement: 'start',
  container: 'body',
  element: null,
  rootElement: document.documentElement,
  backdropOpacity: 0.5,
  offcanvasBodyClass: null,
  triggerEvents: [],
  relatedTarget: null,
  onShow: function (event) {},
  shown: function (event) {},
  onHide: function (event) {},
  hidden: function (event) {}
})

方法

Offcanvas 插件提供了多个方法，可以使用 JavaScript 调用。

show()

打开 Offcanvas。可以通过参数来设置触发打开 Offcanvas 的元素。

offcanvas.show(relatedTarget)

hide()

关闭 Offcanvas。

offcanvas.hide()

toggle()

切换 Offcanvas 的打开和关闭状态。

offcanvas.toggle()

dispose()

销毁 Offcanvas 实例。

offcanvas.dispose()

事件

Offcanvas 插件提供了多个事件，可以监听使用 JavaScript 绑定回调函数。

show.bs.offcanvas

在 Offcanvas 打开前触发。

offcanvasElement.addEventListener('show.bs.offcanvas', function (event) {
  // ...
})

shown.bs.offcanvas

在 Offcanvas 打开后触发。

offcanvasElement.addEventListener('shown.bs.offcanvas', function (event) {
  // ...
})

hide.bs.offcanvas

在 Offcanvas 关闭前触发。

offcanvasElement.addEventListener('hide.bs.offcanvas', function (event) {
  // ...
})

hidden.bs.offcanvas

在 Offcanvas 关闭后触发。

offcanvasElement.addEventListener('hidden.bs.offcanvas', function (event) {
  // ...
})

结语

Offcanvas 是一个强大的插件，可以让你快速创建一个响应式侧边栏。它具有易用性、灵活性和可定制性。在开发响应式页面时，你一定会用到这个插件。