Offcanvas ƒe akpa aɖe

Tu axadzinu ɣaɣlawo ɖe wò dɔa me hena mɔzɔzɔ, nuƒleɖakawo, kple bubuwo kple klass ʋee aɖewo kple míaƒe JavaScript ƒe kpeɖeŋutɔ.

Le axa sia dzi

Ale si wòwɔa dɔe

Offcanvas nye axadzinu ƒe akpa aɖe si woate ŋu atrɔ to JavaScript dzi be wòadze tso nukpɔkpɔa ƒe miame, ɖusime, etame, alo ete. Wozãa abɔtawo alo sekewo abe nusiwo aʋã wo ene siwo wotsɔ kpe ɖe nu tɔxɛ siwo nètrɔna ŋu, eye datawozãa nɔnɔmewo tsɔ yɔa míaƒe JavaScript.

Offcanvas ma JavaScript ƒe kɔda ɖeka ma ke ƒe ɖewo abe modals ene. Le susu nu la, woɖi wo nɔewo kura, gake wonye plugins vovovowo.
Nenema ke wonyi Sass ƒe tɔtrɔ aɖewo tsoƒe na offcanvas ƒe atsyãwo kple didimewo tso modal ƒe tɔtrɔwo me.
Ne woɖee fia la, offcanvas la dea megbenya si woɖo ɖi si dzi nàte ŋu azi be nàɣla offcanvas la ɖe eme.
Abe alesi wòle le modals gome ene la, offcanvas ɖeka koe woate ŋu aɖe afia le ɣeyiɣi ɖeka me.

Tawo yi dzi! Ne míebu alesi CSS wɔa nu ɖe nɔnɔmetatawo ŋui ŋu la, màte ŋu azã marginalo translateanɔ .offcanvaselement aɖe dzi o. Ke boŋ zã klass la abe nu babla ƒe akpa si le eɖokui si ene.

Akpa sia ƒe nɔnɔmetata ƒe ŋusẽkpɔɖeamedzi nɔ te ɖe prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .

Kpɔɖeŋuwo

Offcanvas ƒe akpa aɖewo

Le ete la, offcanvas ƒe kpɔɖeŋu si woɖe fia le gɔmedzedzea me (to .showon .offcanvas). Offcanvas ƒe akpa aɖewoe nye kpekpeɖeŋu na tanya si me wotu abɔta ɖo kple ŋutilã ƒe hatsotso si woate ŋu atia na gbãtɔ aɖewo padding. Míele aɖaŋu ɖom be nàtsɔ offcanvas headers akpe ɖe dɔmeɖeɖe ƒe afɔɖeɖewo ŋu ɣesiaɣi si wòanya wɔ, alo nàna gbegbe ƒe afɔɖeɖe si me kɔ.

Emenyawo na offcanvas la yi afisia. Àteŋu atsɔ Bootstrap ƒe akpa ɖesiaɖe kloe alo nusiwo wowɔ ɖe ɖoɖo nu la ade afisia.

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>

Live demo ƒe wɔwɔfia

Zã abɔta siwo le ete nàtsɔ aɖe offcanvas element aɖe afia ahaɣlae to JavaScript si trɔa .showklass la ɖe element aɖe dzi kple .offcanvasklass la dzi.

.offcanvasɣlaa emenyawo (si woɖo ɖi) .
.offcanvas.showɖea emenyawo fiana

Àte ŋu azã kadodo si me hrefnɔnɔmea le, alo abɔta si me data-bs-targetnɔnɔmea le. Le go eveawo siaa me la, data-bs-toggle="offcanvas"wobia tso ame si.

Kadodo kple href

Nuŋɔŋlɔ aɖewo abe teƒeɖoɖo ene. Le agbe ŋutɔŋutɔ me la, nu siwo nètia la ate ŋu anɔ asiwò. Abe, nuŋɔŋlɔ, nɔnɔmetatawo, xexlẽdzesiwo, kple bubuawo ene.

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>

Ŋutilã ƒe agbalẽxatsaxatsa

Wotsia <body>element la ʋuʋu nu ne offcanvas kple eƒe megbenya le dzedzem. Zã data-bs-scrollnɔnɔmea nàtsɔ ana <body>ʋuʋu nawɔ dɔ.

Te kpɔ nàʋu axaa ƒe akpa mamlɛa be nàkpɔ tiatia sia le dɔ wɔm.

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>

Ŋutilã ƒe agbalẽxatsaxatsa kple megbenyawo

Àte ŋu awɔ <body>agbalẽxatsaxatsa kple megbenya si woate ŋu akpɔ hã.

Te kpɔ nàʋu axaa ƒe akpa mamlɛa be nàkpɔ tiatia sia le dɔ wɔm.

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>

Static megbenyawo

Ne woɖo backdrop ɖe static dzi la, offcanvas la matu ne èzi edzi le egodo o.

Nyematu ne èzi nye gota o.

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>

Viviti ƒe offcanvas

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Trɔ offcanvases ƒe dzedzeme kple utilities be woasɔ nyuie wu ɖe nɔnɔme vovovowo abe viviti navbars ene. Afisiae míetsɔ kpe .text-bg-darkɖe .offcanvaskple .btn-close-whiteɖe ŋu .btn-closehena atsyã nyuitɔ kple offcanvas viviti. Ne dropdowns le asiwò le eme la, bu eŋu kpɔ be yeatsɔe akpe .dropdown-menu-darkɖe .dropdown-menu.

Da offcanvas nyatakakawo ɖe afisia.

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>

Nyaŋuɖoɖo

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Offcanvas klass siwo ɖoa nya ŋu la ɣlaa nyatakaka siwo le nukpɔkpɔa godo tso gbagbãƒe si woɖo ɖi kple anyime. Le gbagbãƒe ma tame la, nusiwo le eme la awɔ nu abe alesi wònɔna ɖaa ene. Le kpɔɖeŋu me, .offcanvas-lgɣlaa nyawo ɖe offcanvas me le lgbreakpoint la te, gake eɖea emenyawo fiana le lgbreakpoint la tame.

Trɔ wò browser ƒe lolome be wòaɖe offcanvas toggle si ɖoa nya ŋu la afia.

Esia nye nusiwo le eme le .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>

Offcanvas klass siwo ɖoa nya ŋu la li le goawo katã me na breakpoint ɖesiaɖe.

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

Amewo ɖoɖo ɖe teƒe aɖe

Womeɖo teƒe aɖeke si woɖo ɖi na offcanvas ƒe akpawo o, eyata ele be nàtsɔ tɔtrɔ ƒe hatsotso siwo le ete la dometɔ ɖeka akpe ɖe eŋu.

.offcanvas-starttsɔa offcanvas ɖoa nukpɔkpɔƒea ƒe miame (woɖee fia le etame) .
.offcanvas-endtsɔa offcanvas ɖoa nukpɔkpɔƒea ƒe ɖusime
.offcanvas-toptsɔa offcanvas ɖoa nukpɔkpɔƒea tame
.offcanvas-bottomtsɔa offcanvas ɖoa nukpɔkpɔƒea ƒe gɔme

Te kpɔɖeŋu siwo le etame, ɖusime, kple ete la kpɔ le ete.

...

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>

...

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>

...

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>

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Esi wònye be offcanvas panel la nye modal dialog le susu nu ta la, kpɔ egbɔ be yetsɔ kpe ɖe aria-labelledby="..."—si ƒo nu tso offcanvas ƒe tanya ŋu—ɖe .offcanvas. De dzesii be mehiã be nàtsɔe akpe ɖe eŋu o role="dialog"elabena míetsɔe kpe ɖe eŋu xoxo to JavaScript dzi.

CSS ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, offcanvas zãa nutoa me CSS tɔtrɔwo fifia le .offcanvashena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwo ƒe ŋgɔyiyi si wodo ɖe ŋgɔ. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

  --#{$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 ƒe tɔtrɔwo

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

Zãzã

Offcanvas plugin la zãa klass ʋee aɖewo kple nɔnɔmewo tsɔ kpɔa kpekpeme kɔkɔa gbɔ:

.offcanvasɣlaa emenyawo
.offcanvas.showɖea emenyawo fiana
.offcanvas-startɣlaa offcanvas la ɖe miame
.offcanvas-endɣlaa offcanvas la ɖe ɖusime
.offcanvas-topɣlaa offcanvas la ɖe etame
.offcanvas-bottomɣlaa offcanvas la ɖe ete

Tsɔ dismiss button kpe ɖe data-bs-dismiss="offcanvas"attribute la ŋu, si aʋã JavaScript ƒe dɔwɔwɔ. Kpɔ egbɔ be yezã <button>element la kplii hena nuwɔna nyuitɔ le mɔ̃wo katã dzi.

To nyatakaka ƒe nɔnɔmewo dzi

Trɔ asi le eŋu

Tsɔ data-bs-toggle="offcanvas"kple a data-bs-targetalo hrefkpe ɖe element la ŋu be nàde dɔ asi na offcanvas element ɖeka ƒe dziɖuɖu le eɖokui si. Nɔnɔmea data-bs-targetxɔa CSS tiatia aɖe be woatsɔ awɔ offcanvas la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la offcanvaskpe ɖe offcanvas element la ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu la kpeeshow .

Ɖe asi le eŋu

Woateŋu awɔ dɔmeɖeɖe kple datanɔnɔme si le abɔta aɖe dzi le offcanvas la me abe alesi woɖee fia le ete ene:

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

alo le abɔta aɖe si le offcanvas godo dzi to data-bs-targetalesi woɖee fia le ete la zazã me:

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

Togbɔ be wodo alɔ mɔ eveawo siaa be woaɖe asi le offcanvas ŋu hã la, nenɔ susu me na wò be ɖeɖe ɖa tso offcanvas godo mesɔ kple ARIA Authoring Practices Guide dialog (modal) ƒe nɔnɔme o o . Wɔ esia le wò ŋutɔ wò afɔku me.

To JavaScript dzi

Na wòawɔ dɔ kple asi kple:

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

Tiatiawɔblɔɖewo

Esi woateŋu atsɔ tiatiawɔnuwo ato nyatakaka nɔnɔmewo alo JavaScript dzi ta la, àteŋu atsɔ tiatia ŋkɔ akpe ɖe data-bs-, abe alesi wòle le data-bs-animation="{value}". Kpɔ egbɔ be yetrɔ tiatia ŋkɔa ƒe case type tso “ camelCase ” yi “ kebab-case ” ne èle tiatiaawo tom to data attributes dzi. Le kpɔɖeŋu me, zãe data-bs-custom-class="beautifier"ɖe data-bs-customClass="beautifier".

Tso Bootstrap 5.2.0 dzi la, akpaawo katã doa alɔ dodokpɔ ƒe nyatakaka si wodzra ɖo ƒe nɔnɔme data-bs-configsi ateŋu axɔ akpa ƒe ɖoɖo bɔbɔe abe JSON ka ene. Ne element aɖe si data-bs-config='{"delay":0, "title":123}'kple data-bs-title="456"nɔnɔmewo le la, asixɔxɔ mamlɛtɔ titleanye 456eye nyatakaka nɔnɔme vovovoawo axɔ asixɔxɔ siwo wona le data-bs-config. Tsɔ kpe ɖe eŋu la, nyatakaka ƒe nɔnɔme siwo li fifia te ŋu tsɔa JSON ƒe asixɔxɔwo abe data-bs-delay='{"show":0,"hide":150}'.

Ŋkɔ	Ƒomevi	Gᴐmedzeƒe	Nuɖᴐɖᴐ
`backdrop`	boolean alo kaƒoƒoa`static`	`true`	De megbenya ɖe ŋutilã dzi esime offcanvas le ʋuʋu ɖi. Alo, gblɔ `static`na megbenya si metua offcanvas ne wozi edzi o.
`keyboard`	boolean ƒe ƒuƒoƒo	`true`	Doa offcanvas la ne wozi escape key dzi.
`scroll`	boolean ƒe ƒuƒoƒo	`false`	Ðe mɔ na ŋutilã ƒe agbalẽxatsaxatsa esime offcanvas le ʋuʋu ɖi.

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo .

Ewɔa wò nyatakakawo ŋudɔ abe offcanvas element ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

Àteŋu awɔ offcanvas ƒe kpɔɖeŋu kple xɔtula, le kpɔɖeŋu me:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Nuwɔmɔnu	Nuɖᴐɖᴐ
`getInstance`	Static mɔnu si ɖea mɔ na wò be nàxɔ offcanvas ƒe kpɔɖeŋu si do ƒome kple DOM ƒe akpa aɖe.
`getOrCreateInstance`	Static mɔnu si ɖea mɔ na wò be nàxɔ offcanvas ƒe kpɔɖeŋu si do ƒome kple DOM element, alo awɔ yeye nenye be womedze egɔme o.
`hide`	Ɣla offcanvas ƒe akpa aɖe. Trɔ yi yɔla gbɔ hafi woɣla offcanvas element la ŋutɔŋutɔ (si nye hafi `hidden.bs.offcanvas`nudzɔdzɔa nadzɔ).
`show`	Fia offcanvas ƒe akpa aɖe. Trɔ yi yɔla gbɔ hafi woɖe offcanvas element la fia ŋutɔŋutɔ (si nye hafi `shown.bs.offcanvas`nudzɔdzɔa nadzɔ).
`toggle`	Trɔa offcanvas element aɖe be woaɖee afia alo aɣlae. Trɔ yi yɔla gbɔ hafi woɖe offcanvas element la fia ŋutɔŋutɔ alo ɣlae (si nye hafi `shown.bs.offcanvas`alo `hidden.bs.offcanvas`nudzɔdzɔa nadzɔ).

Nudzɔdzɔwo

Bootstrap ƒe offcanvas klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe offcanvas dɔwɔwɔ me.

Nudzɔdzɔ ƒomevi	Nuɖᴐɖᴐ
`hide.bs.offcanvas`	Wodaa tu nudzɔdzɔ sia enumake ne woyɔ `hide`mɔnua vɔ.
`hidden.bs.offcanvas`	Woɖea nudzɔdzɔ sia ne woɣla offcanvas element aɖe ɖe zãla la (alala be CSS ƒe tɔtrɔwo nawu enu).
`hidePrevented.bs.offcanvas`	Wodoa nudzɔdzɔ sia ne woɖe offcanvas la fia, eƒe megbenyawo nye `static`eye wowɔ ʋuʋu le offcanvas la godo. Woɖea nudzɔdzɔa hã ne wozi sisi ƒe safuia dzi eye woɖo `keyboard`tiatia la ɖe `false`.
`show.bs.offcanvas`	Nudzɔdzɔ sia doa dzo enumake ne woyɔ `show`kpɔɖeŋu mɔnu la.
`shown.bs.offcanvas`	Woɖea nudzɔdzɔ sia ne wowɔ offcanvas element aɖe be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas ƒe akpa aɖe

Ale si wòwɔa dɔe

Kpɔɖeŋuwo

Offcanvas ƒe akpa aɖewo

Offcanvas ƒe akpa aɖe

Live demo ƒe wɔwɔfia

Offcanvas ƒe akpa aɖe

Ŋutilã ƒe agbalẽxatsaxatsa

Offcanvas kple ŋutilã ƒe agbalẽxatsaxatsa

Ŋutilã ƒe agbalẽxatsaxatsa kple megbenyawo

Megbenyawo kple agbalẽxatsaxatsa

Static megbenyawo

Offcanvas ƒe akpa aɖe

Viviti ƒe offcanvas

Offcanvas ƒe akpa aɖe

Nyaŋuɖoɖo

Offcanvas si ɖoa nya ŋu

Amewo ɖoɖo ɖe teƒe aɖe

Offcanvas ƒe tame

Offcanvas ƒe ɖusime

Offcanvas ƒe gɔme

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

CSS ƒe ƒuƒoƒo

Nusiwo trɔna

Sass ƒe tɔtrɔwo

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Trɔ asi le eŋu

Ɖe asi le eŋu

To JavaScript dzi

Tiatiawɔblɔɖewo

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

Nudzɔdzɔwo