Offcanvas ƒe akpa aɖe

Tu axadzinu ɣaɣlawo ɖe wò dɔa me hena mɔfiame, 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, 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.

<div class="offcanvas offcanvas-start" 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 text-reset" 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.

<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 text-reset" 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" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

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.

...

<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 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<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 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Megbenyawo

Wotsia <body>element la ʋuʋu nu ne offcanvas kple eƒe megbenya le dzedzem. Zã data-bs-scrollnɔnɔmea nàtsɔ atrɔ asi le <body>ʋuʋu data-bs-backdropŋu eye nàtrɔ megbenya la.

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

.....

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

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<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" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<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">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>

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.

Sass ƒe nyawo

Nusiwo trɔna

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

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

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 kpee show.

To JavaScript dzi

Na wòawɔ dɔ kple asi kple:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-bs-, abe alesi wòle le data-bs-backdrop="".

Ŋkɔ	Ƒomevi	Gᴐmedzeƒe	Nuɖᴐɖᴐ
`backdrop`	boolean ƒe ƒuƒoƒo	`true`	De megbenya ɖe ŋutilã dzi esime offcanvas le ʋuʋu ɖi
`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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Nuwɔmɔnu	Nuɖᴐɖᴐ
`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ɔ).
`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ɔ).
`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ɔ).
`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

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ɖᴐɖᴐ
`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).
`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).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // 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

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

Offcanvas ƒe tame

Offcanvas ƒe ɖusime

Offcanvas ƒe gɔme

Megbenyawo

Wotsɔ agbalẽ xatsaxatsa de amae

Offcanvas kple megbenyawo

Wotsɔ agbalẽ xatsaxatsawo ɖo megbe nɛ

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

Sass ƒe nyawo

Nusiwo trɔna

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

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