Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

Offcanvas ye

Kɛrɛfɛlan dogolenw jɔ i ka porozɛ kɔnɔ walasa ka taama, sannikɛ wotoro ani fɛn wɛrɛw ni kalan damadɔw ye ani an ka JavaScript plugin.

Nin ɲɛ in kan

A bɛ baara kɛ cogo min na

Offcanvas ye kɛrɛfɛyɔrɔ dɔ ye min bɛ se ka wuli ka bɔ JavaScript fɛ walasa ka bɔ filɛlikɛlan kinin fɛ, kinin fɛ, sanfɛ walima duguma da la. Butɔnw walima ankɔriw bɛ Kɛ i n’a fɔ fɛn minnu bɛ nɔrɔ fɛn kɛrɛnkɛrɛnnenw na i bɛ minnu Toggle, ani dataattributes bɛ Kɛ ka an ka JavaScript Weele.

  • Offcanvas bɛ JavaScript code kelen dɔw Jɛ ni modals ye. Hakilila ta fan fɛ, u bɛ ɲɔgɔn Bɔ kosɛbɛ, nka u ye 'plugin (dakun) danfaralenw ye.
  • O cogo kelen na, source Sass variables dɔw offcanvas ka cogoyaw ni dimensions bɛ ciyɛn sɔrɔ modal ka variables fɛ.
  • Ni a jirala, offcanvas kɔnɔ, kɔkannafɛn dɔ bɛ yen min bɛ se ka digi walasa ka offcanvas dogo.
  • I n’a fɔ modɛliw, offcanvas kelen dɔrɔn de bɛ se ka jira waati kelen na.

Kungolow bɛ wuli! Ni an y’a jateminɛ ko CSS bɛ animationw ɲɛnabɔ cogo min na, i tɛ se ka baara kɛ ni element dɔ ye marginwalima a kan. O nɔ na, ​​baara kɛ ni kalasi ye i n’a fɔ fɛn min bɛ kɛ ka fɛnw siri ɲɔgɔn na.translate.offcanvas

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Misaliw

Offcanvas yɔrɔw

Misali dɔ bɛ duguma min bɛ bɔ kanpaɲi na min bɛ jira ka kɛɲɛ ni a daminɛ ye (via .showon .offcanvas). Offcanvas kɔnɔ , dɛmɛ bɛ sɔrɔ kuncɛlan dɔ la ni butɔni dadon ye ani farikolo kalasi sugandilen dɔ daminɛ dɔw kama padding. An b’a ɲini aw fɛ aw ka offcanvas kuncɛlanw don ni bɔli walew ye ni a bɛ se ka kɛ tuma o tuma, walima ka bɔli wale jɛlen dɔ di.

Offcanvas ye
Kɔnɔkow ka ɲɛsin offcanvas ma, o bɛ taa yan. Aw bɛ se ka Bootstrap yɔrɔ walima ladamu fɛn o fɛn bila yan.
html ye 
<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 en direct

Baara kɛ ni butɔni minnu bɛ duguma walasa ka fɛn dɔ jira ani k’a dogo JavaScript fɛ min bɛ .showkalasi wuli fɛn dɔ kan ni .offcanvaskalasi ye.

  • .offcanvaskɔnɔkow dogo (default) .
  • .offcanvas.showbɛ kɔnɔkow jira

Aw bɛ se ka baara kɛ ni jɛgɛnsira ye ni o fɛn hrefye, walima ni butɔni ye min bɛ ni o fɛn data-bs-targetye. O ko fila bɛɛ la, a data-bs-toggle="offcanvas"wajibiyalen don.

Link ni href ye
Offcanvas ye
Sɛbɛn dɔw bɛ Kɛ yɔrɔ-yɔrɔ-ko ye. Ɲɛnamaya lakika kɔnɔ, i ye fɛn minnu sugandi, i bɛ se ka olu sɔrɔ. I n’a fɔ, sɛbɛnni, ja, lisi, a ɲɔgɔnnaw.
html ye 
<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>

Farikolo sɛgɛsɛgɛli

Eleman in sɛgɛsɛgɛli <body>bɛ bali ni offcanvas n’a kɔkanna bɛ ye. Baara kɛ ni o fɛn data-bs-scrollye walasa ka se ka <body>sɛgɛsɛgɛli kɛ.

Offcanvas ni farikolo sɛgɛsɛgɛli

A ɲini ka ɲɛ tɔ lajɛ walasa k’a ye ko nin sugandi in bɛ baara la.

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

Farikolo sɛgɛsɛgɛli ani kɔkannakow

Aw bɛ se fana ka <body>sɛgɛsɛgɛli kɛ ni kɔkanna yelen ye.

Backdrop ni scrolling ye

A ɲini ka ɲɛ tɔ lajɛ walasa k’a ye ko nin sugandi in bɛ baara la.

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

Backdrop statique ye

Ni kɔkanna bilalen don statiki la, offcanvas tɛna da tugu ni i ye a kɔkanna digi.

Offcanvas ye
N tɛna da Minɛ n'i ye n 'kɔnɔna digi.
html ye 
<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>

Dibi la offcanvas

A farala a kan v5.2.0 kɔnɔ

Offcanvases cogoya Changer ni utilités ye walasa u ka bɛn ka ɲɛ ni contextes différentes ye i n’a fɔ dibi navbars. Yan an bɛ dɔ fara ani .text-bg-darkka kan walasa ka cogoya ɲuman sɔrɔ ni dibi offcanvas ye. Ni fɛn dɔw bɛ aw kɔnɔ, aw bɛ a lajɛ fana ka dɔ fara a kan ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Offcanvas ye

Aw bɛ kunnafoni dɔw bila yan.

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

Jaabiw

A farala a kan v5.2.0 kɔnɔ

Offcanvas kalan minnu bɛ jaabi di, olu bɛ kɔnɔkow dogo filɛlikɛyɔrɔ kɔkan ka bɔ tiɲɛni yɔrɔ kofɔlen dɔ la ani duguma. O kariyɔrɔ sanfɛ, kɔnɔkow bɛna kɛ i n’a fɔ a bɛ kɛ cogo min na tuma bɛɛ. Misali la, .offcanvas-lga bɛ kɔnɔkow dogo offcanvas kɔnɔ lgkariyɔrɔ jukɔrɔ, nka a bɛ kɔnɔkow jira kariyɔrɔ sanfɛ lg.

Aw ye aw ka navigatɔrɔ bonya caman sɛmɛntiya walasa ka jaabi offcanvas toggle jira.
Offcanvas min bɛ jaabi di

Nin ye kɔnɔkow ye .offcanvas-lg.

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

Jaabi offcanvas kalanw bɛ sɔrɔ ka tɛmɛn breakpoint kelen-kelen bɛɛ kama.

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

Yɔrɔ bilali

Default placement tɛ offcanvas components la, o la i ka kan ka modifier classes dɔ fara a kan min bɛ duguma.

  • .offcanvas-startbɛ offcanvas bila viewport kinin fɛ (a jiralen bɛ sanfɛ) .
  • .offcanvas-endbɛ offcanvas bila viewport kinin fɛ
  • .offcanvas-topbɛ offcanvas bila viewport sanfɛ
  • .offcanvas-bottombɛ offcanvas bila viewport jukɔrɔ

Aw bɛ sanfɛla, kininbolo ani duguma misaliw lajɛ minnu bɛ duguma.

Offcanvas sanfɛ
...
html ye 
<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 ka kan
...
html ye 
<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 duguma
...
html ye 
<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>

Seko ni dɔnko

Ikomi panneau offcanvas ye hakilinata ye modal dialogue ye, aw ye aw jija ka fara aria-labelledby="..."—ka ɲɛsin offcanvas tɔgɔ ma—ka kan .offcanvas. A kɔlɔsi ko i mago t’a la ka dɔ fara a kan role="dialog"bawo an b’a fara a kan kaban JavaScript fɛ.

CSS ye

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ dɔ ye min bɛ ka wuli ka bɔ a nɔ na, ​​offcanvas bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .offcanvaswalasa ka waati yɛrɛyɛrɛ ladamuni yiriwa. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$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 bεε bε bεn

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

Baarakɛcogo

Offcanvas plugin bɛ baara Kɛ ni kalasi damadɔ ni fɛn dɔw ye walasa ka girinmanw kɔrɔtacogo ɲɛnabɔ:

  • .offcanvasbɛ kɔnɔkow dogo
  • .offcanvas.showbɛ kɔnɔkow jira
  • .offcanvas-startbɛ offcanvas dogo kinin fɛ
  • .offcanvas-endbɛ offcanvas dogo kinin fɛ
  • .offcanvas-topbɛ offcanvas dogo sanfɛ
  • .offcanvas-bottombɛ offcanvas dogo duguma

Butɔn dɔ fara a kan ka bɔ baara la ni o data-bs-dismiss="offcanvas"fɛnsɛbɛn ye, o min bɛ JavaScript baarakɛcogo daminɛ. Aw ye aw jija ka baara kɛ ni <button>element ye n’a ye walasa ka taamacogo ɲuman sɔrɔ minɛnw bɛɛ kɔnɔ.

Donanw ka fɛnɲɛnɛmaw fɛ

Toggle (Tɔgɔtɔgɔnin).

Fàra data-bs-toggle="offcanvas"ni a data-bs-targetwalima hrefka Kɛ element (fɛn) ye walasa ka a yɛrɛma ka control (yɔrɔ) Di fɛn kelen offcanvas (fɛn) ma. Attribut data-bs-targetbɛ sɔn CSS sugandili ma walasa ka offcanvas kɛ a kan. Aw ye aw jija ka kalasi fara offcanvasoffcanvas element kan. N'i b'a fɛ a ka da wuli, i ka kalansen wɛrɛ fara a kan show.

Ka gɛn

Baara bɛ se ka kɛ ni fɛn dataye min bɛ butɔni dɔ kan offcanvas kɔnɔ i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ:

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

walima butɔni dɔ kan min bɛ offcanvas kɔkan ni baara kɛ ni data-bs-targeti n’a fɔ a jiralen bɛ cogo min na jukɔrɔ:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Hali ni fɛɛrɛ fila bɛɛ bɛ dɛmɛ ka bɔ kanpaɲi kɔkan, aw k’a to aw hakili la ko ka bɔ kɛnɛ kan ka bɔ kanpaɲi kɔkan, o tɛ bɛn ARIA Authoring Practices Guide dialog (modal) pattern ma . Aw bɛ o kɛ aw yɛrɛ ka farati la.

JavaScript fɛ

A bɛ se ka baara kɛ ni bolo ye ni:

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

Sugandili minnu bɛ kɛ

I n’a fɔ sugandiliw bɛ se ka tɛmɛ data attributes walima JavaScript fɛ, i bɛ se ka sugandi tɔgɔ dɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-animation="{value}". Aw ye aw jija ka sugandili tɔgɔ ka case suguya Changer ka bɔ “ camelCase ” la ka kɛ “ kebab-case ” ye ni aw bɛ sugandiliw tɛmɛ data attributes fɛ. Misali la, baara kɛ data-bs-custom-class="beautifier"ni data-bs-customClass="beautifier".

Kabini Bootstrap 5.2.0, yɔrɔw bɛɛ bɛ dɛmɛ don kunnafoni- falen-falen-yɔrɔ-ko -kɛcogodata-bs-config dɔ la min bɛ se ka yɔrɔw labɛncogo nɔgɔmanw bila i n’a fɔ JSON sɛrɛ. Ni fɛn dɔ bɛ data-bs-config='{"delay":0, "title":123}'ni ni data-bs-title="456"fɛnw ye, nafa laban titlebɛna kɛ 456ani kunnafoni danfaralenw bɛna nafaw wuli minnu dira data-bs-config. O tɛmɛnen 'kɔ, kunnafoni-falen-falen-minɛn minnu bɛ yen olu bɛ Se ka JSON nafaw Ladon i n'a fɔ data-bs-delay='{"show":0,"hide":150}'.

Tɔ̀gɔ Ka sɛbɛen masin na Fɔlɔ Cogojirali
backdrop boolean walima jiribolostatic true Aw bɛ kɔkanna dɔ kɛ farikolo kan ka a sɔrɔ offcanvas da wulilen don. O cogo kelen na, i ka ɲɛfɔli statickɛ kɔkannafɛn dɔ kan min tɛ offcanvas datugu ni a digilen don.
keyboard boolean ye true A bɛ offcanvas datugu ni escape key digilen don.
scroll boolean ye false Aw bɛ a to farikolo ka wuli ka a sɔrɔ offcanvas da wulilen don.

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

A bɛ i ka kɔnɔkow baara i n’a fɔ offcanvas element. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

Aw bɛ se ka instance offcanvas dɔ da ni constructeur ye, misali la:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Kɛcogo Cogojirali
getInstance Static method min b’a to i bɛ se ka offcanvas instance sɔrɔ min bɛ tali kɛ DOM element dɔ la.
getOrCreateInstance Static method min b’a To i bɛ se ka offcanvas instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, walima ka kura Dabɔ n’a sɔrɔla a ma daminɛ.
hide A bɛ fɛn dɔ dogo min tɛ kanpaɲi ye. A bɛ Segin welebaga ma sani offcanvas element ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko hidden.bs.offcanvasin ka Kɛ).
show A bɛ fɛn dɔ jira min tɛ kanpaɲi ye. A bɛ segin welebaga ma sanni offcanvas element ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.offcanvaskɛlen ka kɛ).
toggle A bɛ fɛn dɔ wuli ka bɔ kanpaɲi na ka taa jira walima ka dogo. A bɛ segin welebaga ma sanni offcanvas element ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.offcanvaswalima hidden.bs.offcanvasko kɛlen ka kɛ).

Ko minnu kɛra

Bootstrap ka offcanvas kalan bɛ ko damadɔw jira kɛnɛ kan walasa ka hooking kɛ offcanvas baarakɛcogo la.

Ko kɛlen suguya Cogojirali
hide.bs.offcanvas O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hidefɛɛrɛ in Weelela.
hidden.bs.offcanvas O ko in bɛ Fɔ ni 'fɛn dɔ dogolen dòn baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
hidePrevented.bs.offcanvas O ko in bɛ Fɔ ni offcanvas jirala, a kɔkanna ye staticani offcanvas kɔkanna clic bɛ Kɛ. Ko in fana bɛ ci ni boli butɔni digilen don ani keyboardsugandili kɛra false.
show.bs.offcanvas O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni showmisali fɛɛrɛ Weelela.
shown.bs.offcanvas O ko in bɛ Fɔ ni 'fɛn dɔ Kɛra 'fɛn ye min tɛ 'fɛn ye min bɛ Se ka Ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})