Это 12-й день моего участия в Gengwen Challenge, пожалуйста, проверьте подробности мероприятия:Обновить вызов

"Bootstrap5 Zero Basic to Proficient" Я Лао Лю оригинал, и стремиться обновлять раздел каждый день.

14.1 Функции навигации смахиванием

Скользящая навигация (Offcanvas) — это компонент боковой панели, который можно переключать с помощью JavaScript для отображения и скрытия слева, справа или снизу окна. Он обычно используется в проектах для создания скрытых боковых панелей для навигации и корзины покупок. Подождите.

Он имеет следующие характеристики

Скользящая навигация Offcanvas использует тот же код JavaScript, что и модальные окна. Концептуально они очень похожи, но это отдельные плагины.
При отображении Offcanvas включает фон по умолчанию, по которому можно щелкнуть, чтобы скрыть скрытые холсты.
Как и в случае с модальными окнами, одновременно может отображаться только одно окно вне холста.
Уведомление! Учитывая то, как CSS обрабатывает анимацию, вы не можете использовать поля или перевод для элементов .offcanvas. Вместо этого классы следует использовать как отдельные элементы-оболочки.

Это может звучать не очень понятно, но это не беда, это не мешает вам продолжать учиться, давайте учиться пользоваться на примерах.

14.2 Демонстрация примера скользящей навигации

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
  </head>
  <body>
       
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
      通过链接显示
      </a>
      <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      通过按钮显示
      </button>
      
      <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header">
      <h5 class="offcanvas-title">个人中心</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
      <div>
      这里可以放文字、列表、表单等一切元素，点右上角X可以关闭
      <ul>
        <li>我的帖子</li>
        <li>我的收藏</li>
        <li>我赞过的</li>
      </ul>
      </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>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Нажмите любую из вышеуказанных кнопок, в окне появится следующий интерфейс.

Если это очень знакомо, вы также можете изменить текст выше, чтобы сформировать корзину. Из приведенного выше примера видно, что компонент скользящей навигации включает в себя контейнер, заголовок навигации и тело навигации.Я подробно расскажу об этом ниже.

14.3 Компоненты скользящей навигации и значение параметров

14.3.1 Контейнеры

Весь контент свайп-навигации находится вdiv class="offcanvas offcanvas-start"> </div>Непосредственно контейнер — это самая внешняя оболочка скользящей навигации.

Позиционный параметр в контейнере с тремя значениями

offcanvas-start, как показано в приведенном выше примере, всплывающая навигация находится в верхнем левом углу экрана.
offcanvas-end, всплывающая навигация находится в правой части экрана.
offcanvas-bottom, всплывающая навигация внизу экрана
Если такого параметра нет, позиция неопределенная, моя демка в левом нижнем углу

Ниже приведены фотографии различных параметров

offcanvas-end

offcanvas-bottom

нет позиционных параметров

14.3.2 Заголовок навигации

<div class="offcanvas-header">
      <h5 class="offcanvas-title">个人中心</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>

Как и в приведенном выше коде, заголовок навигации содержит заголовок навигации и кнопку, кнопка — это X в правом верхнем углу навигации. В заголовке навигации обычно нужно изменить только содержимое заголовка, а все остальное в порядке.

14.3.3 Навигационное тело

все включено в<div class="offcanvas-body"> <div>Содержимое между ними — это панель навигации, и в нее можно поместить любой элемент.

14.3.4 Кнопка активации навигации

Навигация не является частью этой теории, но в целом следует настроить кнопку или значок на странице, чтобы при навигации скрыть, когда активировать слайд или слайд для навигации, щелкнув область. Конечно, вы можете начать отображать навигацию, после закрытия она больше не отображается.

   <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
      通过链接显示
      </a>
      <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      通过按钮显示
      </button>

в кнопке навигации выше

data-bs-toggle="offcanvas"Указывает, что работает при навигации смахиванием
href="#offcanvasExample" илиdata-bs-target="#offcanvasExample"— код ключа, где offcanvasExample в #offcanvasExample — идентификатор контейнера.
aria-controls="offcanvasExample"Является ли установить фокус клавиатуры, вы не можете писать.

14.3.5 Включение и выключение по умолчанию

Это очень просто, добавьте параметр прямо в контейнерshowВот и все. Это открывает страницу без необходимости нажимать кнопку для навигации.

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">

добавить в контейнерdata-bs-keyboard="true"Можно закрыть холст при нажатии клавиши выхода.

14.3.6 Маски страниц и отключение прокрутки

По умолчанию, когда появляется скользящая навигация, отображается исходная веб-страница, а эффект прокрутки страницы вверх и вниз будет отключен, также известный как блокировка. Вы можете использовать атрибут data-bs-scroll для переключения основной прокрутки, использовать data-bs-backdrop для переключения фона и добавить его непосредственно в контейнер.

data-bs-scroll="true", по умолчанию false
data-bs-backdrop="false", по умолчанию true

Это исчерпывающий пример. После отображения скользящей навигации попробуйте прокрутить среднее колесо мыши, чтобы увидеть, может ли страница скользить. Я не буду демонстрировать эффект отображения.

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>滑动窗口</title>
</head>

<body>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling"
        aria-controls="offcanvasScrolling">允许页面滚动</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">允许蒙板和页面滚动</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>

<p>    核心提示：鸿蒙系统可用于手机、汽车、家电、智能家居、智能穿戴设备等产品，为不同设备的智能化、互联与协同提供统一的语言。</p>
<p>    参考消息网6月15日报道</p>
<p>    新加坡《联合早报》网站近日报道称，中国科技巨头华为公司近期力推其研发的鸿蒙系统。分析人士认为，鸿蒙操作系统在国际上将受到谷歌、苹果、三星等厂商打压，与华为有竞争关系的中国其他手机厂商也未必会马上使用该系统。因此，鸿蒙操作系统将面临许多挑战。</p>
<p>    报道称，鸿蒙系统可用于手机、汽车、家电、智能家居、智能穿戴设备等产品，为不同设备的智能化、互联与协同提供统一的语言。华为公司预计，今年年底搭载鸿蒙操作系统的设备数量将达3亿台，其中华为设备超过2亿台，面向第三方合作伙伴的各类终端设备数量超过1亿台。</p>
<p>    华为使用自己开发的鸿蒙系统，意味着它不再依赖安卓。而且，鸿蒙系统属于一次开发、多端部署的系统，更适合物联网时代的需求，应用前景广阔。华为公司称，它正在与全球排名前200位的应用程序（App）厂商沟通合作，共同开发跨终端设备的应用。</p>
<p>    鸿蒙系统是华为“晋级”入场券？</p>
<p>    鸿蒙操作系统可作为华为汽车的战略支点，帮助智能汽车领域与生活串联。（路透社）</p>
<p>    华为创始人任正非此前在公司内部会议上表示，华为在纯软件领域，要敢于领先世界；软件领域未来的发展基本不受美国控制，有较大的独立自主权，可以“扎到根，捅破天”。</p>
<p>    小米等中国著名手机厂商对鸿蒙系统持观望态度</p>
<p>    不过，尽管华为已宣布鸿蒙系统采取开源策略，小米、OPPO、vivo等中国著名手机厂商仍对鸿蒙系统持观望态度。</p>
<p>    业内人士指出，小米等中国手机大厂商与华为都有竞争关系，华为遭美国制裁后手机销量大跌，这些厂商都是直接或间接的获益者，自然不愿意为华为的鸿蒙操作系统站台。</p>
<p>    而且，这些依赖安卓系统的厂商也担心，如果采用鸿蒙系统，可能受到谷歌的压制，甚至导致它们的出口产品不能使用安卓系统，影响海外出货量。</p>
<p>    同时，鸿蒙系统的安全性和稳定性有待观察。华为强调鸿蒙将实现万物互联，但其技术优势目前并没有体现出来。华为高管余承东也曾表示，目前鸿蒙的成熟度只达到了安卓的70%。</p>
<p>    但鸿蒙系统的推出，将展示华为雄厚的技术实力和发展前景，使其具备更强的抗压能力。万一小米等中国科技企业也像华为一样被外部势力“卡脖子”，鸿蒙系统将是一个很好的备选。</p>
<p>    专业机构：鸿蒙系统对华为意义重大</p>
<p>    方正证券分析，鸿蒙系统对华为的意义有3点：一是作为华为跻身生态巨头的入场券。数字商业的终极竞争，归根到底就是操作系统的竞争，全球市值前3名苹果、谷歌、微软的共同特点，都是具备自己的操作系统。</p>
<p>    二是倒逼华为改变直接售卖硬件的商业模式，摆脱芯片封锁带来的业务风险，通过鸿蒙来实现业务的延续。</p>
<p>    三是充当华为汽车的战略支点。鸿蒙将帮助智能汽车领域与生活串联，也将在未来的自动驾驶及车联网领域中给用户带来更多的智能生活的体验。</p>

    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>

</html>

14.4 Управление через JavaScript

14.4.1 Использование атрибутов данных via

В предыдущих примерах мы использовали атрибуты данных, чтобы автоматически назначать управление элементу вне холста, добавляя data-bs-toggle="offcanvas" и data-bs-target или связывая href с элементом. Вы можете добавить дополнительные классы шоу, если хотите, чтобы они были включены по умолчанию.

14.4.2 Установка свойств через 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="true", чтобы применить фон к телу, когда открыт offcanvas
data-bs-scroll="false", что позволяет прокручивать тело, пока открыт offcanvas
data-bs-keyboard="true", закрыть холст при нажатии клавиши Escape

14.4.3 Показать навигацию с закрытым свайпом

С помощью элемента управления js вы можете просто провести мышью по определенной области, чтобы отобразить навигацию, и сдвинуть мышь в сторону, чтобы закрыть эффект навигации.

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

toggle переключает элемент вне холста, чтобы «показать» или «скрыть». Возвращает вызывающему объекту до того, как элемент offcanvas будет фактически показан или скрыт (т. е. до того, как произойдет событие show.bs.offcanvas или hidden.bs.offcanvas).
show Показывает элемент offcanvas. Возвращает вызывающему объекту до фактического отображения элемента offcanvas (то есть до возникновения события show.bs.offcanvas).
Скрыть скрывает элементы OFFCANVAS. Прежде чем элемент OFFCANVAS будет фактически скрыт (т. е. до того, как произойдет событие Hidden.bs.OffCanvas), возвращается к вызову.
Статический метод _getInstance, позволяющий получить экземпляр offcanvas, связанный с элементом DOM.

14.4.4 События

Класс Bootstrap offcanvas предоставляет некоторые события для подключения к функциям offcanvas.

Это событие срабатывает немедленно, когда show.bs.offcanvas вызывает метод экземпляра show.
visible.bs.offcanvas Это событие запускается, когда элемент offcanvas виден пользователю (будет ожидать завершения перехода CSS).
hide.bs.offcanvas запустит свое событие сразу после вызова метода скрытия.
hidden.bs.offcanvas при скрытии от пользователя элементов offcanvas (CSS будет ждать завершения преобразования) вызовет это событие.

Вот и все на сегодняшнем уроке.На данный момент сетка, наконец, подходит к концу. Пожалуйста, обратите на меня внимание, изучите «нулевую основу Bootstrap5» до «нулевой основы Bootstrap5 до мастерства» вовремя. Если эта статья оказалась для вас полезной, не забудьте поставить лайк!