Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
in English

I-offcanvas

Yakha amabha aseceleni afihliwe kuphrojekthi yakho yokuzulazula, izinqola zokuthenga, nokuningi ngamakilasi ambalwa kanye ne-plugin yethu ye-JavaScript.

Kuleli khasi

Isebenza kanjani

I-Offcanvas ingxenye yebha eseceleni engashintshwa nge-JavaScript ukuze ivele kwesokunxele, kwesokudla, noma ekugcineni konqenqema lwembobo yokubuka. Izinkinobho noma amahange asetshenziswa njengezibangeli ezinamathiselwe kuzinto ezithile ozishintshayo, futhi dataizibaluli zisetshenziselwa ukunxenxa i-JavaScript yethu.

  • I-Offcanvas yabelana ngekhodi ye-JavaScript efanayo njengamamodali. Ngokomqondo, ziyefana, kodwa zingama-plugin ahlukene.
  • Ngokufanayo, umthombo othile oguquguqukayo we-Sass wezitayela nobukhulu be-offcanvas buzuzwa njengefa kusukela kokuguquguqukayo kwe-modal.
  • Uma kuboniswa, i-offcanvas ihlanganisa okwasemuva okuzenzakalelayo okungachofozwa ukuze kufihlwe i-offcanvas.
  • Ngokufana namamodeli, kungaboniswa i-offcanvas eyodwa kuphela ngesikhathi.

Amakhanda phezulu! Uma kunikezwe ukuthi i-CSS iphatha kanjani ukugqwayiza, awukwazi ukusebenzisa marginnoma translateku- .offcanvaselementi. Kunalokho, sebenzisa ikilasi njengento yokugoqa ezimele.

Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Izibonelo

Izingxenye ze-offcanvas

Ngezansi kunesibonelo se-offcanvas esiboniswa ngokuzenzakalelayo (nge- .showon .offcanvas). I-offcanvas ihlanganisa ukusekelwa kwesihloko esinenkinobho yokuvala kanye nesigaba somzimba ozikhethela sona ekuqaleni okuthile padding. Siphakamisa ukuthi ufake izihloko ze-offcanvas ngezenzo zokucashisa noma nini lapho kunokwenzeka, noma unikeze isenzo sokuchitha esisobala.

I-offcanvas
Okuqukethwe kwe-offcanvas kuya lapha. Ungabeka cishe noma iyiphi ingxenye ye-Bootstrap noma ama-elementi angokwezifiso lapha. 
<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>

Idemo ebukhoma

Sebenzisa izinkinobho ezingezansi ukuze ubonise futhi ufihle i-elementi ye-offcanvas usebenzisa i-JavaScript eguqula .showikilasi entweni .offcanvasngeklasi.

  • .offcanvasifihla okuqukethwe (okuzenzakalelayo)
  • .offcanvas.showikhombisa okuqukethwe

Ungasebenzisa isixhumanisi hrefesinesibaluli, noma inkinobho data-bs-targetenesibaluli. Kuzo zombili izimo, data-bs-toggle="offcanvas"kuyadingeka.

Xhumanisa ne- href
I-offcanvas
Omunye umbhalo njengesimeli. Empilweni ungaba nezakhi ozikhethile. Njengokuthi, umbhalo, izithombe, uhlu, njll. 
<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>

Ukubekwa

Akukho ukubekwa okuzenzakalelayo kwezingxenye ze-offcanvas, ngakho-ke kufanele wengeze iklasi elilodwa lesilungisi ngezansi;

  • .offcanvas-startbeka ikhanvasi kwesokunxele sembobo yokubuka (eboniswe ngenhla)
  • .offcanvas-endibeka amakhanvasi kwesokudla sembobo yokubuka
  • .offcanvas-topibeka amakhanvasi phezulu kwendawo yokubuka
  • .offcanvas-bottomibeka amakhanvasi phansi kwembobo yokubuka

Zama izibonelo ezingenhla, kwesokudla, nezingezansi ngezansi.

Okuphezulu kwe-offcanvas
... 
<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>
I-offcanvas kwesokudla
... 
<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>
Phansi kwekhanvasi
... 
<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>

Ingemuva

Ukuskrola i- <body>elementi kukhutshaziwe uma i-offcanvas nokwasemuva kwayo kubonakala. Sebenzisa data-bs-scrollisibaluli ukuze uguqule <body>ukuskrola futhi data-bs-backdropuguqule okwasemuva.

Inemibala enokuskrola

Zama ukuskrola lonke ikhasi ukuze ubone le nketho isebenza.

I-offcanvas enengemuva

.....

Ingemuva elinokuskrola

Zama ukuskrola lonke ikhasi ukuze ubone le nketho isebenza.

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

Ukufinyeleleka

Njengoba iphaneli ye-offcanvas ngokomqondo iyingxoxo eyimodeli, qiniseka ukuthi uyengeza aria-labelledby="..."—ubhekisela kusihloko se-offcanvas—ku- .offcanvas. Qaphela ukuthi awudingi ukungeza role="dialog"njengoba sesivele sengeze nge-JavaScript.

Sass

Okuguquguqukayo

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

Ukusetshenziswa

I-plugin ye-offcanvas isebenzisa amakilasi ambalwa nezimfanelo ukuphatha ukuphakamisa okusindayo:

  • .offcanvasifihla okuqukethwe
  • .offcanvas.showikhombisa okuqukethwe
  • .offcanvas-startifihla i-offcanvas ngakwesobunxele
  • .offcanvas-endifihla i-offcanvas ngakwesokudla
  • .offcanvas-bottomifihla i-offcanvas phansi

Engeza inkinobho yokucashisa data-bs-dismiss="offcanvas"ngesibaluli, esicupha ukusebenza kwe-JavaScript. Qiniseka ukuthi usebenzisa i- <button>elementi nayo ngokuziphatha okufanele kuwo wonke amadivayisi.

Ngezibaluli zedatha

Guqula

Engeza data-bs-toggle="offcanvas"kanye data-bs-targetnoma hrefku-elementi ukuze unikeze ngokuzenzakalelayo ukulawula kwento eyodwa ye-offcanvas. Isibaluli data-bs-targetsamukela isikhethi se-CSS ongafaka kuso i-offcanvas. Qiniseka ukuthi ungeza ikilasi offcanvaskusici se-offcanvas. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe show.

Cashisa

Ukuxoshwa kungafinyelelwa ngesibaluli esisenkinobho engaphakathi kwekhanvasidata njengoba kuboniswe ngezansi:

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

noma enkinobho engaphandle kwekhanvasi usebenzisa lokhu data-bs-targetokuboniswe ngezansi:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Nakuba zombili izindlela zokucashisa i-offcanvas zisekelwa, khumbula ukuthi ukucashisa ngaphandle kwekhanvasi akufani nephethini yedizayini ye-WAI-ARIA yemodi yengxoxo . Yenza lokhu ngokuzifaka wena engozini.

Nge-JavaScript

Nika amandla ngokwenza nge:

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-, njengaku data-bs-backdrop="".

Igama Uhlobo Okuzenzakalelayo Incazelo
backdrop boolean true Faka okwasemuva emzimbeni ngenkathi i-offcanvas ivuliwe
keyboard boolean true Ivala i-offcanvas uma ukhiye we-escape ucindezelwa
scroll boolean false Vumela ukuskrola komzimba ngenkathi i-offcanvas ivuliwe

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

Yenza okuqukethwe kwakho kusebenze njengengxenye ye-offcanvas. Yamukela izinketho ozikhethela object.

Ungakha isenzakalo se-offcanvas nomakhi, isibonelo:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Indlela Incazelo
toggle Iguqula into ye-offcanvas iboniswe noma ifihlwe. Ibuyela kofonayo ngaphambi kokuba isici se-offcanvas siboniswe noma sifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.offcanvasnoma hidden.bs.offcanvasisigameko).
show Ibonisa isici se-offcanvas. Ibuyela kofonayo ngaphambi kokuba kuboniswe isici se-offcanvas (okungukuthi ngaphambi kokuthi shown.bs.offcanvaskwenzeke umcimbi).
hide Ifihla isici se-offcanvas. Ibuyela kofonayo ngaphambi kokuba isici se-offcanvas sifihlwe (okungukuthi ngaphambi kokuthi hidden.bs.offcanvaskwenzeke umcimbi).
getInstance Indlela emile ekuvumela ukuthi uthole isenzakalo se- offcanvas esihlotshaniswa nento ye-DOM
getOrCreateInstance Indlela emile ekuvumela ukuthi uthole isenzakalo se- offcanvas esihlotshaniswa nento ye-DOM, noma udale entsha uma kwenzeka ingaqaliswanga

Imicimbi

Ikilasi le-offcanvas le-Bootstrap lidalula imicimbi embalwa yokuxhunywa ekusebenzeni kwe-offcanvas.

Uhlobo lomcimbi Incazelo
show.bs.offcanvas Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
shown.bs.offcanvas Lo mcimbi uxoshwa lapho isici se-offcanvas senziwe sabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
hide.bs.offcanvas Lo mcimbi uxoshwa ngokushesha lapho hideindlela isibiziwe.
hidden.bs.offcanvas Lo mcimbi uxoshwa lapho isici se-offcanvas sifihliwe kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})