Trɔ yi nya veviwo gbɔ Trɔ yi docs navigation gbɔ
in English

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, 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ɔ.

Offcanvas ƒe akpa aɖe
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
Offcanvas ƒe akpa aɖe
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.

Offcanvas ƒe tame
... 
<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>
Offcanvas ƒe ɖusime
... 
<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>
Offcanvas ƒe gɔme
... 
<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.

Wotsɔ agbalẽ xatsaxatsa de amae

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

Offcanvas kple megbenyawo

.....

Megbenyawo kple agbalẽxatsaxatsa

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">Backdrop 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;
$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-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 kpee show.

Ɖ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 WAI-ARIA modal dialog design pattern o . Wɔ esia le wò ŋutɔ wò afɔku me.

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.offcanvasalo hidden.bs.offcanvasnudzɔ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.offcanvasnudzɔ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.offcanvasnudzɔ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ɔ showkpɔɖ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ɔ hidemɔ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...
})