Негизги мазмунга өтүү Документтердин навигациясына өтүү
in English

Offcanvas

Бир нече класстар жана биздин JavaScript плагинибиз менен навигация, соода арабалары жана башкалар үчүн долбооруңузга жашыруун каптал тилкелерин түзүңүз.

Бул бетте

Бул кантип иштейт

Offcanvas - бул JavaScript аркылуу которуштурууга мүмкүн болгон каптал панелинин компоненти, аны көрүү терезесинин сол, оң же ылдый жагында пайда болот. Баскычтар же анкерлер сиз которуштуруучу белгилүү элементтерге тиркелген триггерлер катары колдонулат, ал эми dataатрибуттар биздин JavaScript'ти чакыруу үчүн колдонулат.

  • Offcanvas модалдар сыяктуу эле JavaScript кодунун айрымдарын бөлүшөт. Концепция боюнча, алар абдан окшош, бирок алар өзүнчө плагиндер.
  • Ошо сыяктуу эле, offcanvas стилдери жана өлчөмдөрү үчүн Sass булак өзгөрмөлөрү модалдык өзгөрмөлөрдөн мураска алынган.
  • Көрсөтүлгөндө, offcanvas сырткы канвасты жашыруу үчүн чыкылдатса боло турган демейки көшөгө камтыйт.
  • Модалдарга окшош, бир эле учурда бир гана тышкаркы сүрөттү көрсөтүүгө болот.

Көңүл бургула! marginCSS анимацияларды кантип иштетээрин эске алып , translateсиз .offcanvasэлементти колдоно албайсыз . Анын ордуна, классты көз карандысыз таңуу элементи катары колдонуңуз.

Бул компоненттин анимация эффектиси prefers-reduced-motionмедиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз .

Мисалдар

Offcanvas компоненттери

Төмөндө демейки боюнча көрсөтүлгөн offcanvas үлгүсү ( .showon аркылуу .offcanvas). Offcanvas жабуу баскычы бар башты колдоону жана кээ бир башталгычтар үчүн кошумча корпус классын камтыйт padding. Мүмкүн болушунча четке кагуу аракеттери менен offcanvas аталыштарын кошууну же ачык эле четке кагуу аракетин көрсөтүүнү сунуштайбыз.

Offcanvas
Offcanvas үчүн мазмун бул жерде. Сиз бул жерде Bootstrap компонентин же ыңгайлаштырылган элементтерди жайгаштырсаңыз болот. 
<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>

Түз демо

.showКласс менен элементте классты которуштуруучу JavaScript аркылуу offcanvas элементин көрсөтүү жана жашыруу үчүн төмөнкү баскычтарды колдонуңуз .offcanvas.

  • .offcanvasмазмунду жашырат (демейки)
  • .offcanvas.showмазмунду көрсөтөт

hrefСиз атрибуту бар шилтемени же атрибуттуу баскычты колдоно аласыз data-bs-target. Эки учурда тең data-bs-toggle="offcanvas"талап кылынат.

href менен шилтеме
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-endкөрүнүш аянтчасынын оң жагына сырткы сүрөттөрдү жайгаштырат
  • .offcanvas-topкөрүнүш аянтчасынын жогору жагына полотно жок
  • .offcanvas-bottomкөрүнүш аянтчасынын ылдый жагына полотно жок

Төмөндө жогору, оң жана төмөнкү мисалдарды байкап көрүңүз.

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 туура
... 
<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 түбү
... 
<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>

Фон

Offcanvas <body>жана анын көшөгөсү көрүнгөндө элементти сыдыруу өчүрүлөт. Сыдыруу жана фонду которуу үчүн data-bs-scrollатрибутун колдонуңуз .<body>data-bs-backdrop

Жылдыруу менен түстүү

Бул опцияны иш жүзүндө көрүү үчүн барактын калган бөлүгүн жылдырып көрүңүз.

Фон менен Offcanvas

.....

Сыдыруу менен фон

Бул опцияны иш жүзүндө көрүү үчүн барактын калган бөлүгүн жылдырып көрүңүз.

<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">Backdrop 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 аркылуу кошконбуз.

Sass

Өзгөрмөлөр

$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-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Колдонуу

Offcanvas плагини оор жүктөрдү көтөрүү үчүн бир нече класстарды жана атрибуттарды колдонот:

  • .offcanvasмазмунун жашырат
  • .offcanvas.showмазмунун көрсөтөт
  • .offcanvas-startсол жактагы полотнолорду жашырат
  • .offcanvas-endоң жактагы полотнолорду жашырат
  • .offcanvas-bottomастына полотно жашырат

data-bs-dismiss="offcanvas"JavaScript функциясын иштеткен атрибуту менен четке кагуу баскычын кошуңуз . <button>Бардык түзмөктөрдө туура жүрүм-туруму үчүн аны менен элементти колдонууну унутпаңыз.

Маалымат атрибуттары аркылуу

Которуу

Бир canvas элементин башкарууну автоматтык түрдө дайындоо үчүн элементке кошуу data-bs-toggle="offcanvas"жана a data-bs-targetже . hrefАтрибут offcanvas data-bs-targetколдонуу үчүн CSS селекторун кабыл алат. offcanvasOffcanvas элементине классты кошуңуз . Эгер анын демейки ачылуусун кааласаңыз, кошумча классты кошуңуз show.

Иштен чыгаруу

Төмөндө көрсөтүлгөндөй , тышкаркы сүрөттүн ичиндегиdata баскычтагы атрибут менен иштен чыгарууга болот:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

же сырткы кнопкага төмөндө data-bs-targetкөрсөтүлгөндөй колдонуңуз:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Offcanvasты жокко чыгаруунун эки жолу тең колдоого алынганы менен, сырттан сырттан чыгаруу WAI-ARIA модалдык диалог дизайн үлгүсүнө дал келбей турганын унутпаңыз . Муну өзүңүздүн тобокелиңиз менен жасаңыз.

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

аты Type Демейки Description
backdrop логикалык true Offcanvas ачык турганда денеге фонду колдонуңуз
keyboard логикалык true Escape баскычы басылганда, сырткы көрүнүштү жабат
scroll логикалык false Offcanva ачык турганда денени сыдырууга уруксат бериңиз

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталаары менен, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .

Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз .

Мазмунуңузду canvas сырткы элемент катары иштетет. Кошумча варианттарды кабыл алат object.

Сиз конструктор менен offcanvas инстанциясын түзө аласыз, мисалы:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Метод Description
toggle Offcanvas элементин көрсөтүүгө же жашырууга которот. Offcanvas элементи иш жүзүндө көрсөтүлө электе же жашырылганга чейин (б.а. shown.bs.offcanvasже hidden.bs.offcanvasокуя болгонго чейин) чалуучуга кайтат.
show Offcanvas элементин көрсөтөт. Offcanvas элементи иш жүзүндө көрсөтүлө электе (б.а. shown.bs.offcanvasокуя болгонго чейин) чалуучуга кайтат.
hide Offcanvas элементин жашырат. Offcanvas элемен��и чындыгында жашырылганга чейин (б.а. hidden.bs.offcanvasокуя болгонго чейин) чалуучуга кайтат.
getInstance DOM элементи менен байланышкан offcanvas инстанциясын алууга мүмкүндүк берген статикалык ыкма
getOrCreateInstance DOM элементи менен байланышкан offcanvas инстанциясын алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма

Окуялар

Bootstrap'тин offcanvas классы canvas функциясына кирүү үчүн бир нече окуяларды ачып берет.

Окуя түрү Description
show.bs.offcanvas Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
shown.bs.offcanvas Бул окуя canvas сыртындагы элемент колдонуучуга көрүнгөндөн кийин ишке ашат (CSS өтүүлөрү бүткүчө күтөт).
hide.bs.offcanvas Бул окуя hideыкма чакырылганда дароо өчүрүлөт.
hidden.bs.offcanvas Бул окуя offcanvas элементи колдонуучудан жашырылганда иштетилет (CSS өтүүлөрү бүткүчө күтөт). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})