Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

Offcanvas nga

Mangbangon kadagiti nailemmeng a sidebar iti proyektom para iti nabigasion, shopping cart, ken dadduma pay babaen ti sumagmamano a klase ken ti JavaScript plugin-mi.

Iti daytoy a panid

No kasano ti panagandar dayta

Ti Offcanvas ket maysa a paset ti sidebar a mabalin a mai-toggle babaen ti JavaScript tapno agparang manipud iti kannigid, kannawan, ngato, wenno baba nga igid ti viewport. Dagiti buton wenno angkla ket maus-usar a kas dagiti trigger a naikapet kadagiti espesipiko nga elemento nga i-toggle-mo, ken datadagiti attribute ket maus-usar a mangawag ti JavaScriptmi.

  • Ti Offcanvas ket mangibinglay ti sumagmamano kadagiti isu met laeng a kodigo ti JavaScript a kas dagiti modal. Iti konsepto, agpapadada unay, ngem agsina dagitoy a plugin.
  • Kasta met, dagiti sumagmamano a taudan a Sass a variable para kadagiti estilo ken dagiti dimension ti offcanvas ket natawid manipud kadagiti variable ti modal.
  • No maipakita, ti offcanvas ket mangiraman ti default a backdrop a mabalin a mai-klik tapno mailemmeng ti offcanvas.
  • Kas kadagiti modal, maysa laeng nga offcanvas ti mabalin a maipakita iti tunggal gundaway.

Ulo nga agpangato! No maited no kasano a ti CSS ket mangasikaso kadagiti animasion, saanmo a mabalin nga usaren marginwenno translateiti maysa nga .offcanvaselemento. Imbes ketdi, usaren ti klase a kas maysa nga agwaywayas nga elemento ti panagbalkot.

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Dagiti pagarigan

Dagiti paset ti offcanvas

Iti baba ket ti maysa nga offcanvas a pagarigan a naipakita babaen ti default (babaen ti .showon .offcanvas). Ti Offcanvas ket mangiraman ti suporta para iti maysa nga ulo nga addaan iti agserra a buton ken ti opsional a klase ti bagi para iti sumagmamano nga umuna padding. Isingasingmi nga iramanmo dagiti offcanvas nga ulo nga addaan kadagiti panagikkat a panagtignay no mabalin, wenno mangipaay ti nalawag a panagikkat a panagtignay.

Offcanvas nga
Ti linaon para iti offcanvas ket mapan ditoy. Mabalinmo nga ikabil ti dandani laeng ania man a paset ti Bootstrap wenno dagiti kostumbre nga elemento ditoy.
html nga 
<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>

Agbiag nga demo

Usaren dagiti buton iti baba tapno ipakita ken ilemmeng ti maysa nga offcanvas nga elemento babaen ti JavaScript a mangbalbaliw ti .showklase iti maysa nga elemento iti .offcanvasklase.

  • .offcanvasilemmeng ti linaon (default) .
  • .offcanvas.showipakitana ti linaonna

Mabalinmo nga usaren ti silpo nga addaan iti hrefattribute, wenno ti buton nga addaan iti data-bs-targetattribute. Iti agpada a kaso, ti data-bs-toggle="offcanvas"ket kasapulan.

Isilpo ti href
Offcanvas nga
Dadduma a teksto kas placeholder. Iti pudno a biag mabalinmo ti maaddaan kadagiti elemento a pinilim. Kas iti, teksto, ladawan, listaan, kdpy.
html nga 
<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>

Panag-scroll ti bagi

Ti panag-scroll ti <body>elemento ket nabalbaliwan no ti maysa nga offcanvas ken ti backdropna ket makita. Usaren ti data-bs-scrollattribute tapno mapalubosan ti <body>panag-scroll.

Offcanvas nga addaan iti body scroll

Padasem nga i-scroll ti nabati a paset ti panid tapno makitam daytoy a pagpilian nga agtigtignay.

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

Panag-scroll ti bagi ken backdrop

Mabalinmo met nga ipalubos ti <body>panag-scroll nga addaan iti makita a backdrop.

Backdrop nga addaan iti panag-scroll

Padasem nga i-scroll ti nabati a paset ti panid tapno makitam daytoy a pagpilian nga agtigtignay.

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

Estatiko nga backdrop

No ti backdrop ket naikabil iti estatiko, ti offcanvas ket saan nga agserra no ag-click iti ruar daytoy.

Offcanvas nga
Diakto iserran no i-click-mo ti ruarko.
html nga 
<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>

Nasipnget nga offcanvas

Nainayon iti v5.2.0

Baliwan ti langa dagiti offcanvase nga addaan kadagiti utilidad tapno nasaysayaat a maipada dagitoy kadagiti nadumaduma a konteksto a kas dagiti nasipnget a navbar. Ditoy nga inayonmi .text-bg-darkti .offcanvasken .btn-close-whiteto .btn-closepara iti umno nga estilo nga addaan iti nasipnget nga offcanvas. No addaanka kadagiti dropdown iti uneg, ibilangmo met ti pananginayon .dropdown-menu-darkiti .dropdown-menu.

Offcanvas nga

Ikabil ti linaon ti offcanvas ditoy.

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

Nasungbatan

Nainayon iti v5.2.0

Dagiti makasungbat nga offcanvas a klase ket mangilemmeng ti linaon iti ruar ti viewport manipud iti naikeddeng a breakpoint ken agpababa. Iti ngato dayta a breakpoint, dagiti linaon iti uneg ket agtignayto a kas iti gagangay. Kas pagarigan, .offcanvas-lgmangilemmeng ti linaon iti maysa nga offcanvas iti baba ti lgbreakpoint, ngem mangipakita ti linaon iti ngato ti lgbreakpoint.

Baliwam ti kadakkel ti browsermo tapno maipakita ti responsive offcanvas toggle.
Responsibo nga offcanvas

Daytoy ket linaon iti uneg ti maysa a .offcanvas-lg.

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

Dagiti responsive offcanvas classes ket magun-od iti ballasiw para iti tunggal breakpoint.

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

Panagplastar

Awan ti default a pannakaikabil para kadagiti paset ti offcanvas, isu a masapul nga inayonmo ti maysa kadagiti klase ti mangbalbaliw iti baba.

  • .offcanvas-startmangikabil ti offcanvas iti kannigid ti viewport (naipakita iti ngato) .
  • .offcanvas-endikabilna ti offcanvas iti kannawan ti viewport
  • .offcanvas-topikabilna ti offcanvas iti ngato ti viewport
  • .offcanvas-bottomikabilna ti offcanvas iti baba ti viewport

Padasem dagiti pagarigan iti ngato, kannawan, ken baba.

Offcanvas nga tuktok
...
html nga 
<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 nga kannawan
...
html nga 
<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 nga baba
...
html nga 
<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>

Ti pannakagun-od

Gapu ta ti offcanvas a panel ket konsepto a maysa a modal a dialogo, siguraduen nga inayon aria-labelledby="..."—a mangitudo ti paulo ti offcanvas —iti .offcanvas. Imutektekanyo a saanyo a kasapulan ti mangnayon role="dialog"yantangay nainayonmi dayta babaen ti JavaScript.

CSS nga

Dagiti Variable

Nainayon iti v5.2.0

Kas paset ti agbaliwbaliw nga asidegan dagiti CSS a variable ti Bootstrap, ti offcanvas ket agus-usar itan kadagiti lokal a CSS a variable on .offcanvaspara iti napasayaat nga aktual nga oras a panagpasayaat. Dagiti pateg para kadagiti variable ti CSS ket naikeddeng babaen ti Sass, isu a ti panagpasayaat ti Sass ket nasuportaran pay laeng, met.

  --#{$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 dagiti variable

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

Panagusar

Ti offcanvas plugin ket agus-usar kadagiti sumagmamano a klase ken dagiti attribute tapno mangasikaso ti nadagsen a panagipangato:

  • .offcanvasilemmengna ti linaonna
  • .offcanvas.showipakitana ti linaonna
  • .offcanvas-startilemmeng ti offcanvas iti kannigid
  • .offcanvas-endilemmeng ti offcanvas iti kannawan
  • .offcanvas-topilemmeng ti offcanvas iti ngato
  • .offcanvas-bottomilemmengna ti offcanvas iti baba

Manginayon ti buton ti panangilaksid nga addaan ti data-bs-dismiss="offcanvas"attribute, a mangtignay ti panagusar ti JavaScript. Siguraduen nga usaren ti <button>elemento a kaduana para iti umno a kababalin iti ballasiw dagiti amin nga alikamen.

Babaen kadagiti attribute ti datos

Ag-toggle nga

Inayon data-bs-toggle="offcanvas"ken a data-bs-targetwenno hrefiti elemento tapno automatiko a mangituding ti kontrol ti maysa nga offcanvas nga elemento. Ti data-bs-targetattribute ket umawat ti maysa a CSS a mangpili a pangipakat ti offcanvas iti. Siguraduen nga inayon ti klase offcanvasiti offcanvas element. No kayatmo a default a malukatan, inayon ti kanayonan a klase show.

Papanawen

Ti pannakaikkat ket mabalin a maragpat babaen ti dataattribute iti maysa a buton iti uneg ti offcanvas a kas naipakita iti baba:

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

wenno iti maysa a buton iti ruar ti offcanvas babaen ti panangusar iti data-bs-targetkas naipakita iti baba:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Bayat nga agpada a dagiti wagas ti panangilaksid ti maysa nga offcanvas ket nasuportaran, laglagipen a ti panangilaksid manipud iti ruar ti maysa nga offcanvas ket saan a maipada iti padron ti dialogo (modal) ti Giya ti Panagsurat ti Panagsurat ti ARIA . Aramidenyo daytoy iti bukodyo a risgo.

Babaen ti JavaScript

Pagbalinen a manual babaen ti:

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

Dagiti Pagpilian

Kas dagiti pagpilian ket mabalin a maipasa babaen dagiti kababalin ti datos wenno JavaScript, mabalinmo nga inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-animation="{value}". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti “ camelCase ” iti “ kebab-case ” no ipasa dagiti pagpilian babaen kadagiti kababalin ti datos. Kas pagarigan, usaren data-bs-custom-class="beautifier"imbes a data-bs-customClass="beautifier".

Manipud iti Bootstrap 5.2.0, amin a paset ket mangsuporta ti eksperimental a naireserba a kababalin ti datos data-bs-configa mabalin a mangbalay ti simple a panagisaad ti paset a kas ti kuerdas ti JSON. No ti maysa nga elemento ket addaan kadagiti data-bs-config='{"delay":0, "title":123}'ken data-bs-title="456"dagiti kababalin, ti maudi a titlepateg ket agbalinto 456ken dagiti naisina a kababalin ti datos ket mangbalbaliw kadagiti pateg a naited iti data-bs-config. Iti pay maipatinayon, dagiti addan a kababalin ti datos ket makabaelda a mangbalay kadagiti pateg ti JSON a kas ti data-bs-delay='{"show":0,"hide":150}'.

Nagan Tipo Default Panangiladawan
backdrop boolean wenno ti kuerdasstatic true Mangikabil iti backdrop iti bagi bayat a nakalukat ti offcanvas. Saan laeng a dayta, ikeddeng staticpara iti backdrop a saan a mangiserra ti offcanvas no mai-klik.
keyboard boolean nga true Serraan ti offcanvas no maipidut ti escape key.
scroll boolean nga false Bay-an nga ag-scroll ti bagi bayat a nakalukat ti offcanvas.

Dagiti Pamay-an

Dagiti asynchronous a pamay-an ken panagbalbaliw

Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .

Kitaen ti dokumentasionmi iti JavaScript para iti ad-adu pay nga impormasion .

Paaktiboenna ti linaonmo kas maysa nga offcanvas nga elemento. Awaten ti maysa nga opsional a pagpilian object.

Mabalinmo ti mangpartuat ti maysa nga offcanvas nga instansia babaen ti konstruktor, kas pagarigan:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Wagas Panangiladawan
getInstance Estatiko a pamay-an a mangipalubos kenka a makaala ti offcanvas nga instansia a nainaig iti maysa nga elemento ti DOM.
getOrCreateInstance Estatiko a pamay-an a mangipalubos kenka a makaala ti offcanvas nga instansia a nainaig iti maysa nga elemento ti DOM, wenno mangpartuat ti baro no kas pagarigan saan a nairugi.
hide Ilemmeng ti maysa nga elemento nga offcanvas. Agsubli iti tumawag sakbay nga aktual a nailemmeng ti elemento ti offcanvas (kayatna a sawen sakbay a hidden.bs.offcanvasmapasamak ti pasamak).
show Ipakita ti maysa nga elemento nga offcanvas. Agsubli iti tumawag sakbay nga aktual a naipakita ti elemento ti offcanvas (kayatna a sawen sakbay a shown.bs.offcanvasmapasamak ti pasamak).
toggle I-toggle ti maysa nga offcanvas nga elemento iti maipakita wenno mailemmeng. Agsubli iti tumawag sakbay nga aktual a naipakita wenno nailemmeng ti elemento ti offcanvas (kayatna a sawen sakbay a mapasamak ti shown.bs.offcanvaswenno hidden.bs.offcanvaspasamak).

Dagiti Pasamak

Ti offcanvas a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti offcanvas a panagandar.

Kita ti pasamak Panangiladawan
hide.bs.offcanvas Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ket naawagan.
hidden.bs.offcanvas Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti offcanvas ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a makompleto).
hidePrevented.bs.offcanvas Daytoy a pasamak ket mapaputok no ti offcanvas ket maipakita, ti backdropna ket staticken ti maysa a panagpidut iti ruar ti offcanvas ket maaramid. Ti pasamak ket mapaputok pay no ti teklado ti panaglibas ket maipidut ken ti keyboardpagpilian ket naikeddeng iti false.
show.bs.offcanvas Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
shown.bs.offcanvas Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti offcanvas ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a makompleto). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})