Holo i ka ʻike nui Holo i ka hoʻokele docs
Check
in English

Offcanvas

E kūkulu i nā ʻaoʻao ʻaoʻao huna i kāu papahana no ka hoʻokele, nā kaʻa kūʻai, a me nā mea hou aku me kekahi mau papa a me kā mākou plugin JavaScript.

Ma kēia ʻaoʻao

Pehea e hana ai

He ʻāpana ʻaoʻao ʻaoʻao ʻo Offcanvas i hiki ke hoʻololi ʻia ma o JavaScript e ʻike ʻia mai ka ʻaoʻao hema, ʻākau, luna, a i ʻole ka ʻaoʻao lalo o ka ʻaoʻao ʻike. Hoʻohana ʻia nā pihi a i ʻole nā ​​heleuma e like me nā mea hoʻomaka i hoʻopili ʻia i nā mea kikoʻī āu e hoʻololi ai, a dataua hoʻohana ʻia nā ʻano e kāhea i kā mākou JavaScript.

  • Hāʻawi ʻo Offcanvas i kekahi o nā code JavaScript like me nā modals. ʻO ka manaʻo, ua like lākou, akā he mau plugins kaʻawale.
  • Pēlā nō, hoʻoili ʻia kekahi kumu hoʻololi Sass no nā ʻano a me nā ana o offcanvas mai nā ʻano hoʻololi o ka modal.
  • Ke hōʻike ʻia, loaʻa i ka offcanvas kahi kāʻei paʻamau i hiki ke kaomi e hūnā i ka offcanvas.
  • E like me nā modals, hiki ke hōʻike ʻia hoʻokahi offcanvas i ka manawa.

Nā poʻo i luna! Hāʻawi ʻia pehea e mālama ai ʻo CSS i nā animation, ʻaʻole hiki iā ʻoe ke hoʻohana a i marginʻole translatema kahi .offcanvasmea. Akā, e hoʻohana i ka papa ma ke ʻano he mea hoʻopili kūʻokoʻa.

ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

Nā laʻana

ʻO nā ʻāpana canvas

Aia ma lalo kahi hiʻohiʻona offcanvas i hōʻike ʻia ma ka paʻamau (ma .showon .offcanvas). Loaʻa i ka Offcanvas ke kākoʻo no kahi poʻomanaʻo me kahi pihi pili a me kahi papa kino koho no kekahi padding. Manaʻo mākou e hoʻokomo i nā poʻomanaʻo offcanvas me nā hana hoʻokuʻu inā hiki, a i ʻole e hāʻawi i kahi hana hoʻokuʻu maopopo.

Offcanvas
Aia nā ʻike no ka offcanvas maanei. Hiki iā ʻoe ke kau i kahi mea Bootstrap a i ʻole nā ​​mea maʻamau ma aneʻi.
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 ola

E hoʻohana i nā pihi ma lalo nei e hōʻike a hūnā i kahi ʻāpana offcanvas ma o JavaScript e hoʻololi i ka .showpapa ma kahi mea me ka .offcanvaspapa.

  • .offcanvashuna maʻiʻo (paʻamau)
  • .offcanvas.showhōʻike maʻiʻo

Hiki iā ʻoe ke hoʻohana i kahi loulou me ka hrefʻano, a i ʻole ke pihi me ka data-bs-targetʻano. I nā hihia ʻelua, data-bs-toggle="offcanvas"pono ka mea.

Ka loulou me ka href
Offcanvas
ʻO kekahi kikokikona ma ke ʻano he wahi. Ma ke ola maoli hiki iā ʻoe ke loaʻa nā mea āu i koho ai. Like, kikokikona, kiʻi, papa inoa, etc.
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>

Owili kino

Hoʻopau ʻia ka ʻōwili ʻana i ka <body>element ke ʻike ʻia kahi offcanvas a me kona kua. E hoʻohana i ke data-bs-scrollʻano e hiki ai i ka holo ʻana <body>.

Offcanvas me ka ʻōwili kino

E hoʻāʻo e ʻōwili i ke koena o ka ʻaoʻao e ʻike i kēia koho i ka hana.

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>

ʻO ka ʻōwili kino a me ke kua

Hiki iā ʻoe ke ʻae i ka <body>ʻōwili ʻana me ke kua i ʻike ʻia.

Kāpae me ka ʻōwili

E hoʻāʻo e ʻōwili i ke koena o ka ʻaoʻao e ʻike i kēia koho i ka hana.

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>

Kāpae kūmau

Ke hoʻonoho ʻia ke kua i ka static, ʻaʻole e pani ka offcanvas ke kaomi ʻana ma waho.

Offcanvas
ʻAʻole wau e pani inā kaomi ʻoe ma waho oʻu.
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>

Kāpena ʻeleʻele

Hoʻohui ʻia ma v5.2.0

E hoʻololi i ke ʻano o nā offcanvases me nā pono hana e hoʻokūkū maikaʻi iā lākou i nā pōʻaiapili like ʻole e like me nā navbar ʻeleʻele. Eia mākou e hoʻohui .text-bg-darkai i ka .offcanvasa me .btn-close-whiteka .btn-closeno ke kāhiko kūpono me kahi kāwele ʻeleʻele. Inā loaʻa iā ʻoe nā hāʻule i loko, e noʻonoʻo e hoʻohui .dropdown-menu-darki .dropdown-menu.

Offcanvas

E kau i ka maʻiʻo offcanvas ma ʻaneʻi.

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>

Pane

Hoʻohui ʻia ma v5.2.0

Hūnā nā papa offcanvas pane i ka ʻike ma waho o ke awa ʻike mai kahi haʻi a i lalo. Ma luna aʻe o kēlā haʻihaʻi, e hana nā mea i loko e like me ka mea maʻamau. No ka laʻana, .offcanvas-lghūnā ʻia ka ʻike ma kahi canvas ma lalo o ka lghaʻihaʻi, akā e hōʻike ana i ka ʻike ma luna o ka lghaʻihaʻi.

E hoʻololi hou i kāu polokalamu kele pūnaewele e hōʻike i ka hoʻololi i waho o ka canvas.
Pane offcanvas

He ʻike kēia i loko o kahi .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>

Loaʻa nā papa offcanvas pane no kēlā me kēia breakpoint.

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

Hoʻokomo

ʻAʻohe wahi paʻamau no nā ʻāpana offcanvas, no laila pono ʻoe e hoʻohui i kekahi o nā papa hoʻololi ma lalo.

  • .offcanvas-startwaiho i ka canvas ma ka hema o ke awa nana (e hoike ana maluna)
  • .offcanvas-endkau i ka canvas ma ka ʻākau o ke awa nānā
  • .offcanvas-topkau i ka canvas ma luna o ke awa nānā
  • .offcanvas-bottomE waiho i ka canvas ma lalo o ka puka nānā

E ho'āʻo i nā hiʻohiʻona luna, ʻākau, a lalo ma lalo.

ʻO luna o waho
...
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 ʻākau
...
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>
ʻO lalo o ka canvas
...
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>

Hiki ke komo

No ka mea he kamaʻilio kumu ka offcanvas panel, e hōʻoia e hoʻohui aria-labelledby="..."—e kuhikuhi ana i ka inoa offcanvas—i .offcanvas. E hoʻomaopopo ʻaʻole pono ʻoe e hoʻohui role="dialog"no ka mea ua hoʻohui mākou iā ia ma o JavaScript.

CSS

Nā mea hoʻololi

Hoʻohui ʻia ma v5.2.0

Ma ke ʻano o ka hoʻololi ʻana o nā ʻano hoʻololi CSS o Bootstrap, hoʻohana ʻo offcanvas i nā ʻano CSS kūloko no ka hoʻomaikaʻi ʻana i ka manawa .offcanvasmaoli. Hoʻonohonoho ʻia nā waiwai no nā ʻano CSS ma o Sass, no laila ke kākoʻo mau ʻia nei ka hana maʻamau Sass.

  --#{$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};

Nā hoʻololi 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;

Hoʻohana

Hoʻohana ka plugin offcanvas i kekahi mau papa a me nā hiʻohiʻona e hoʻokele i ka hāpai kaumaha:

  • .offcanvashūnā i ka ʻike
  • .offcanvas.showhōʻike i ka ʻike
  • .offcanvas-starthuna i ka offcanvas ma ka hema
  • .offcanvas-endhūnā i ka offcanvas ma ka ʻākau
  • .offcanvas-tophuna i ka offcanvas ma luna
  • .offcanvas-bottomhuna i ka offcanvas ma lalo

Hoʻohui i kahi pihi hoʻokuʻu me ke data-bs-dismiss="offcanvas"ʻano, e hoʻoulu i ka hana JavaScript. E hoʻohana pono i ka <button>mea me ia no ka hana kūpono ma nā ʻaoʻao āpau.

Ma o nā hiʻohiʻona ʻikepili

Hoʻololi

Hoʻohui data-bs-toggle="offcanvas"a a i data-bs-targetʻole hrefi ka mea e hāʻawi ʻakomi i ka mana o hoʻokahi mea offcanvas. ʻAe ka ʻano i kahi mea koho CSS e hoʻopili i ka data-bs-targetoffcanvas i. E ʻoluʻolu e hoʻohui i ka papa offcanvasi ke ʻano offcanvas. Inā makemake ʻoe e wehe paʻamau, e hoʻohui i ka papa hou show.

Hoʻokuʻu

Hiki ke hoʻokō ʻia ka hoʻokuʻu ʻana me ke ʻano datama kahi pihi i loko o ka offcanvas e like me ka hōʻike ʻana ma lalo nei:

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

a i ʻole ma kahi pihi ma waho o ka canvas me ka hoʻohana ʻana i ka data-bs-targetmea i hōʻike ʻia ma lalo nei:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
ʻOiai ke kākoʻo ʻia nei nā ala ʻelua e kāpae i kahi offcanvas, e hoʻomanaʻo ʻaʻole i kūlike ka wehe ʻana mai waho o kahi offcanvas me ka ARIA Authoring Practices Guide dialog (modal) pattern . E hana i kēia ma kāu pilikia.

Ma o JavaScript

E ho'ā me ka lima me:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript, hiki iā ʻoe ke hoʻohui i kahi inoa koho i data-bs-, e like me ka data-bs-animation="{value}". E hōʻoia e hoʻololi i ke ʻano hihia o ka inoa koho mai " CamelCase " i " kebab-case " i ka wā e hāʻawi ai i nā koho ma o nā ʻano ʻikepili. No ka laʻana, hoʻohana data-bs-custom-class="beautifier"ma kahi o data-bs-customClass="beautifier".

E like me Bootstrap 5.2.0, kākoʻo nā ʻāpana āpau i kahi hiʻohiʻona ʻikepili i mālama ʻiadata-bs-config i hiki ke mālama i ka hoʻonohonoho ʻāpana maʻalahi ma ke ʻano he kaula JSON. Ke loaʻa nā ʻano mea data-bs-config='{"delay":0, "title":123}'a me data-bs-title="456"nā ʻano, ʻo ka titlewaiwai hope loa 456a na nā ʻano ʻikepili kaʻawale e kāpae i nā waiwai i hāʻawi ʻia ma data-bs-config. Eia kekahi, hiki i nā ʻikepili ʻikepili ke hoʻopaʻa i nā waiwai JSON e like me data-bs-delay='{"show":0,"hide":150}'.

inoa ʻAno Default wehewehe
backdrop boolean a i ʻole ke kaulastatic true E hoʻopili i kahi kāʻei kua ma ke kino i ka wā e wehe ana ka offcanvas. ʻO kahi ʻē aʻe, e kuhikuhi statici kahi kāʻei kua pani ʻole i ka offcanvas ke kaomi ʻia.
keyboard boolean true Pani i ka offcanvas ke paʻi ʻia ke kī pakele.
scroll boolean false E ʻae i ka hele ʻana o ke kino i ka wā e wehe ana ka offcanvas.

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

Ho'ā i kāu ʻike ma ke ʻano he mea offcanvas. ʻAe i kahi koho koho object.

Hiki iā ʻoe ke hana i kahi laʻana offcanvas me ka mea hana, no ka laʻana:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Kaʻina hana wehewehe
getInstance ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana offcanvas e pili ana me kahi mea DOM.
getOrCreateInstance ʻO ke ʻano static e hiki ai iā ʻoe ke kiʻi i ka laʻana offcanvas e pili ana i kahi mea DOM, a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.
hide Hūnā i kahi ʻeleʻele offcanvas. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea offcanvas (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.offcanvashanana).
show Hōʻike i kahi ʻāpana offcanvas. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea offcanvas (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.offcanvashanana).
toggle Hoʻololi i kahi ʻāpana offcanvas i hōʻike ʻia a hūnā paha. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia o ka offcanvas element (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.offcanvasa i ʻole).hidden.bs.offcanvas

Nā hanana

Hōʻike ka papa offcanvas o Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana offcanvas.

ʻAno hanana wehewehe
hide.bs.offcanvas Hoʻopau koke ʻia kēia hanana ke hidekāhea ʻia ke ʻano.
hidden.bs.offcanvas Hoʻopau ʻia kēia hanana i ka wā i hūnā ʻia ai kahi mea offcanvas mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
hidePrevented.bs.offcanvas Hoʻopau ʻia kēia hanana i ka wā e hōʻike ʻia ai ka offcanvas, kona kua a hoʻokō staticʻia kahi kaomi ma waho o ka offcanvas. Hoʻopau ʻia ka hanana i ke kaomi ʻana i ke kī pakele a hoʻonohonoho ʻia ke keyboardkoho i false.
show.bs.offcanvas Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
shown.bs.offcanvas Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai kahi ʻāpana offcanvas e ka mea hoʻohana (e kali no ka hoʻopau ʻana o CSS). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})