Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

Ehandle ka canvas

Aka ti-sidebar leti fihliweke eka phurojeke ya wena leswaku u kota ku famba-famba, swigolonyana swo xava, ni swin’wana hi titlilasi ti nga ri tingani ni xiengetelo xa hina xa JavaScript.

Eka tluka leri

Ndlela leyi swi tirhaka ha yona

Offcanvas i xiphemu xa barhi ya le tlhelo lexi nga cinciwaka hi ku tirhisa JavaScript leswaku xi humelela ku suka eka tlhelo ra ximatsi, ra xinene, ra le henhla kumbe ra le hansi ra xivono. Tiboto kumbe ti-anchor ti tirhisiwa tanihi swihlohloteri leswi khomanisiweke ni swiaki swo karhi leswi u swi cinca-cincaka, naswona dataswihlawulekisi swi tirhisiwa ku vitana JavaScript ya hina.

  • Offcanvas yi avelana yin’wana ya khodi ya JavaScript leyi fanaka na ti-modal. Hi tlhelo ra mianakanyo, ta fana swinene, kambe i ti-plugin leti hambaneke.
  • Hilaha ku fanaka, swin’wana swa swilo leswi cinca-cincaka swa Sass swa xihlovo swa switayele na tidimenxini ta offcanvas swi kumiwa ndzhaka eka swilo leswi cinca-cincaka swa modal.
  • Loko yi kombisiwa, offcanvas yi katsa backdrop ya ntolovelo leyi nga tsindziyelaka ku fihla offcanvas.
  • Kufana na ti modals, i offcanvas yin’we ntsena leyinga kombisiwa hi nkarhi wun’we.

Tinhloko ta le henhla! Loko u nyikiwa ndlela leyi CSS yi khomaka swifaniso leswi hanyaka ha yona, a wu nge swi koti ku tirhisa marginkumbe translateeka .offcanvaselemente. Ematshan’weni ya sweswo, tirhisa tlilasi tanihi xiaki xo phutsela lexi tiyimeleke.

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ​​ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Swikombiso

Swiphemu swa le handle ka canvas

Laha hansi ku na xikombiso xa offcanvas lexi kombisiweke hi ku tiyimisela (via .showon .offcanvas). Offcanvas yi katsa nseketelo wa nhlokomhaka leyi nga na buti yo pfala na tlilasi ya miri yo hlawula eka yin'wana yo sungula padding. Hi ringanyeta leswaku u katsa tinhlokomhaka ta le handle ka canvas na swiendlo swo hlongola loko swi koteka, kumbe u nyika xiendlo xo hlongola lexi nga erivaleni.

Ehandle ka canvas
Content ya offcanvas yi ya laha. U nga veka ntsena kwalomu ka xiphemu xihi na xihi xa Bootstrap kumbe swiaki swa ntolovelo laha.
html 
<div class="offcanvas offcanvas-start show" 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" 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>

Demo leyi hanyaka

Tirhisa swikomba-nkarhi leswi nga laha hansi ku kombisa na ku fihla elemente ya offcanvas hi ku tirhisa JavaScript leyi cinca-cincaka .showtlilasi eka elemente na .offcanvastlilasi.

  • .offcanvasku fihla swilo leswi nga endzeni (xihlawulekisi) .
  • .offcanvas.showyi kombisa leswi nga endzeni

U nga tirhisa xihlanganisi lexi nga ni hrefxihlawulekisi, kumbe buti leyi nga ni data-bs-targetxihlawulekisi. Eka swiyimo leswimbirhi, ku data-bs-toggle="offcanvas"laveka the.

Xihlanganisi na href
Ehandle ka canvas
Tsalwa rin’wana tanihi xikhomela-ndhawu. Evuton’wini bya xiviri u nga va ni swiaki leswi u swi hlawuleke. Ku fana na, tsalwa, swifaniso, minxaxamelo, na swin’wana.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Ku rhendzeleka ka miri

Ku rhendzeleka ka <body>elemente swi pfariwa loko offcanvas na backdrop ya yona swi vonaka. Tirhisa data-bs-scrollxihlawulekisi ku endla leswaku ku <body>rhendzeleka.

Offcanvas na ku rhendzeleka ka miri

Ringeta ku rhendzeleka eka tluka hinkwaro leswaku u vona ndlela leyi yi ri karhi yi tirha.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Ku rhendzeleka ka miri na backdrop

U nga ha tlhela u pfumelela <body>ku rhendzeleka hi xivumbeko lexi vonakaka xa le ndzhaku.

Backdrop leyi nga ni ku rhendzeleka

Ringeta ku rhendzeleka eka tluka hinkwaro leswaku u vona ndlela leyi yi ri karhi yi tirha.

html 
<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" 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" 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>

Xifaniso xa le ndzhaku lexi nga cinciki

Loko backdrop yi vekiwile eka static, offcanvas a yi nge pfali loko u tsindziyela ehandle ka yona.

Ehandle ka canvas
A ndzi nge pfala loko u click ehandle ka mina.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Offcanvas ya ntima

Ku engeteriwe eka v5.2.0

Cinca xivumbeko xa ti-offcanvase leti nga na switirhisiwa ku ti fambisana ku antswa eka swiyimo swo hambana ku fana na ti-navbar ta munyama. Laha hi engetela .text-bg-darkeka .offcanvasna .btn-close-whiteeka ku .btn-closekuma xitayili lexi faneleke hi offcanvas ya ntima. Loko u ri ni swilo leswi nga ehansi endzeni, anakanya hi ku tlhela u engetela .dropdown-menu-darkeka .dropdown-menu.

Ehandle ka canvas

Veka swilo swa le handle ka canvas laha.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Ku hlamula

Ku engeteriwe eka v5.2.0

Titlilasi ta offcanvas leti hlamulaka ti fihla nhundzu ehandle ka xivono ku suka eka ndhawu yo tshoveka leyi boxiweke na le hansi. Ehenhla ka breakpoint yoleyo, leswi nga endzeni swi ta tikhoma tanihi ntolovelo. Xikombiso, yi .offcanvas-lgfihla nhundzu eka offcanvas ehansi ka lgbreakpoint, kambe yi kombisa nhundzu ehenhla ka lgbreakpoint.

Cinca sayizi ya browser ya wena ku kombisa ku cinca-cinca ka offcanvas loku hlamulaka.
Ku hlamula ka offcanvas

Leswi i leswi nga endzeni ka .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</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">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Titlilasi ta offcanvas leti hlamulaka ta kumeka ku tsemakanya eka breakpoint yin’wana na yin’wana.

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

Ku vekiwa ka swilo

Ku hava ku vekiwa ka xiviri ka swiphemu swa offcanvas, kutani u fanele ku engetela yin’wana ya titlilasi ta mucinci laha hansi.

  • .offcanvas-startyi veka offcanvas etlhelo ra ximatsi ra viewport (leyi kombisiweke laha henhla) .
  • .offcanvas-endyi veka offcanvas etlhelo ra xinene ra viewport
  • .offcanvas-topyi veka offcanvas ehenhla ka viewport
  • .offcanvas-bottomyi veka offcanvas ehansi ka xivono

Ringeta swikombiso swa le henhla, swa xinene ni swa le hansi leswi nga laha hansi.

Offcanvas ya le henhla
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas kunene
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas ya le hansi
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Ku fikelela

Tanihi leswi phanele ya le handle ka canvas hi tlhelo ra mianakanyo yi nga mbulavurisano wa modal, tiyiseka leswaku u engetela aria-labelledby="..."—ku kombetela eka xihloko xa le handle ka canvas—eka .offcanvas. Xiya leswaku a wu lavi ku engetela role="dialog"tanihi leswi se hi swi engetelaka hi ku tirhisa JavaScript.

CSS

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa endlelo ra Bootstrap leri cincaka ra swilo leswi cinca-cincaka swa CSS, offcanvas sweswi yi tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .offcanvasfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass swilo leswi cinca-cincaka

$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;

Matirhiselo

Plugin ya offcanvas yi tirhisa titlilasi ti nga ri tingani na swihlawulekisi ku khoma ku tlakusa swilo swo tika:

  • .offcanvasyi fihla leswi nga endzeni
  • .offcanvas.showyi kombisa leswi nga endzeni
  • .offcanvas-startu tumbeta offcanvas hi tlhelo ra ximatsi
  • .offcanvas-endu tumbeta offcanvas hi tlhelo ra xinene
  • .offcanvas-topyi tumbeta offcanvas ehenhla
  • .offcanvas-bottomyi tumbeta offcanvas ehansi

Engetela buti yo hlongola hi data-bs-dismiss="offcanvas"xihlawulekisi, lexi pfuxaka ntirho wa JavaScript. Tiyisisa leswaku u tirhisa <button>elemente na yona eka mahanyelo lama faneleke eka switirhisiwa hinkwaswo.

Hi ku tirhisa swihlawulekisi swa data

Ku cinca-cinca

Engetela data-bs-toggle="offcanvas"na a data-bs-targetkumbe hrefeka elemente ku avela hi ku tisungulela vulawuri bya elemente yin’we ya offcanvas. Xihlawulekisi data-bs-targetxi amukela xihlawulekisi xa CSS ku tirhisa offcanvas eka xona. Tiyisisa leswaku u engetela tlilasi offcanvaseka elemente ya offcanvas. Loko u lava leswaku yi pfuleka hi ku tiyimisela, engetela tlilasi leyi engetelekeke show.

Bakanya

Ku hlongoriwa ku nga fikeleriwa hi dataxihlawulekisi eka buti endzeni ka offcanvas tanihilaha swi kombisiweke hakona laha hansi:

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

kumbe eka buti ehandle ka offcanvas hi ku tirhisa data-bs-targettanihilaha swi kombisiweke hakona laha hansi:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Loko tindlela leti hatimbirhi to hlongola offcanvas ti seketeriwa, tsundzuka leswaku ku hlongola ku suka ehandle ka offcanvas a swi fambelani na ARIA Authoring Practices Guide dialog (modal) pattern . Endla leswi hi ku tikhoma.

Hi ku tirhisa JavaScript

Endla leswaku swi tirha hi voko hi:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Swihlawulekisi

Tanihi leswi swihlawulekisi swi nga hundziseriwaka hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, u ​​nga engetela vito ra xihlawulekisi eka data-bs-, tanihi le ka data-bs-animation="{value}". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka “ camelCase ” ku ya eka “ kebab-case ” loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, tirhisa data-bs-custom-class="beautifier"ematshan’weni ya data-bs-customClass="beautifier".

Ku sukela eka Bootstrap 5.2.0, swiphemu hinkwaswo swi seketela xihlawulekisi xa datha leyi hlayisiweke ya xikambelodata-bs-config lexi nga vekaka vukorhokeri byo olova bya xiphemu tanihi ntambhu ya JSON. Loko elemente yi ri data-bs-config='{"delay":0, "title":123}'na na data-bs-title="456"swihlawulekisi, titlentikelo wo hetelela wu ta va 456naswona swihlawulekisi swa datha leswi hambaneke swi ta tlula mimpimo leyi nyikiweke eka data-bs-config. Ku engetela kwalaho, swihlawulekisi swa datha leswi nga kona swi kota ku veka mimpimo ya JSON ku fana na data-bs-delay='{"show":0,"hide":150}'.

Vito Muxaka Ku tlula Nhlamuselo
backdrop boolean kumbe ntambhustatic true Chela backdrop emirini loko offcanvas yi pfulekile. Handle ka sweswo, boxa staticeka backdrop leyi nga pfaliki offcanvas loko yi tsindziyerile.
keyboard xitsonga xitsonga true Ku pfala offcanvas loko ku tshikileriwa escape key.
scroll xitsonga xitsonga false Pfumelela ku rhendzeleka ka miri loko offcanvas yi pfulekile.

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

Ku endla leswaku nhundzu ya wena yi tirha tanihi elemente ya offcanvas. Ku amukela swihlawulekisi swa ku hlawula object.

U nga endla xikombiso xa offcanvas hi muaki, xikombiso:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Ndlela Nhlamuselo
getInstance Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa offcanvas lexi fambelanaka na elemente ya DOM.
getOrCreateInstance Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa offcanvas lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga.
hide Ku tumbeta elemente ya offcanvas. Ku tlhelela eka mufoyini xiaki xa offcanvas xi nga si fihliwa hakunene (i.e. hidden.bs.offcanvasxiendlakalo xi nga si humelela).
show Ku kombisa xiphemu xa offcanvas. Ku tlhelela eka mufoyini xiaki xa offcanvas xi nga si kombisiwa hakunene (i.e. shown.bs.offcanvasxiendlakalo xi nga si humelela).
toggle Ku cinca-cinca elemente ya offcanvas ku kombisiwa kumbe ku fihliwa. Ku tlhelela eka mufoyini xiaki xa offcanvas xi nga si kombisiwa hakunene kumbe ku fihliwa (i.e. emahlweni ka ku humelela xiendlakalo xa shown.bs.offcanvaskumbe hidden.bs.offcanvas).

Swiendlakalo

Tlilasi ya offcanvas ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa offcanvas.

Muxaka wa xiendlakalo Nhlamuselo
hide.bs.offcanvas Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko hidendlela yi vitaniwile.
hidden.bs.offcanvas Xiendlakalo lexi xi duvuriwa loko elemente ya offcanvas yi fihliwile eka mutirhisi (yi ta rindza ku cinca ka CSS ku hetisisiwa).
hidePrevented.bs.offcanvas Xiendlakalo lexi xi duvuriwa loko offcanvas yi kombisiwa, backdrop ya yona yi endliwa staticnaswona ku endliwa click ehandle ka offcanvas. Xiendlakalo xi tlhela xi pfuriwa loko xikhiya xo baleka xi tshikileriwa naswona keyboardnhlawulo wu vekiwile eka false.
show.bs.offcanvas Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku showvitaniwa ndlela ya xikombiso.
shown.bs.offcanvas Xiendlakalo lexi xi duvuriwa loko elemente ya offcanvas yi endliwile yi vonaka eka mutirhisi (yi ta rindza ku cinca ka CSS ku hetisisiwa). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})