Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

I-offcanvas

Yakha iibar ezifihlakeleyo kwiprojekthi yakho yokuhamba, iinqwelo zokuthenga, kunye nokunye ngeeklasi ezimbalwa kunye neplagi yethu yeJavaScript.

Kweli phepha

Ingaba isebenza kanjani

I-Offcanvas licandelo lebar esecaleni enokuthi iguqulwe ngeJavaScript ukuba ivele ukusuka ekhohlo, ekunene, okanye kumda osezantsi wezibuko lemboniselo. Amaqhosha okanye iiankile zisetyenziswa njengezichukumiso ezincanyathiselwe kwizinto ezithile oziguquguqulayo, kunye dataneempawu zisetyenziselwa ukubhenela iJavaScript yethu.

  • I-Offcanvas yabelana ngekhowudi efanayo yeJavaScript njengeemodali. Ngokwengqiqo, ziyafana, kodwa ziiplagi ezahlukeneyo.
  • Ngokufanayo, umthombo othile oguquguqukayo we-Sass kwizitayile ze-offcanvas kunye nemilinganiselo izuzwe njengelifa kwizinto eziguquguqukayo zemodal.
  • Xa ibonisiwe, i-offcanvas ibandakanya imvelaphi engasemva enokucofa ukufihla i-offcanvas.
  • Ngokufana neemodyuli, inye kuphela i-offcanvas inokuboniswa ngexesha.

Iintloko phezulu! Unikwe indlela iCSS ephatha ngayo oopopayi, awukwazi ukusebenzisa marginokanye translatekwinto .offcanvas. Endaweni yoko, sebenzisa iklasi njengento ezimeleyo yokusonga.

Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo wemidiya. Jonga icandelo leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .

Imizekelo

Amacandelo e-offcanvas

Ngezantsi ngumzekelo we-offcanvas oboniswa ngokungagqibekanga (nge- .showon .offcanvas). I-Offcanvas iquka inkxaso yentloko eneqhosha elisondeleyo kunye neklasi yomzimba ozikhethelayo kwisiqalo esithile padding. Sicebisa ukuba uquke iiheader zeoffcanvas kunye nezenzo zokugxotha nanini na xa kunokwenzeka, okanye unikezele ngesenzo sokugxotha okucacileyo.

I-offcanvas
Umxholo we-offcanvas uya apha. Ungabeka malunga nalo naliphi na icandelo leBootstrap okanye izinto zesiko apha. 
<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 ephilayo

Sebenzisa amaqhosha angezantsi ukubonisa kwaye ufihle into ye-offcanvas usebenzisa iJavaScript eguqula .showiklasi kwinto kunye .offcanvasneklasi.

  • .offcanvasifihla umxholo (okuhlala kukho)
  • .offcanvas.showibonisa umxholo

Ungasebenzisa ikhonkco kunye hrefnophawu, okanye iqhosha elinophawu data-bs-targetloyelelwano. Kuzo zombini ezi meko, data-bs-toggle="offcanvas"kuyafuneka.

Ikhonkco ne- href
I-offcanvas
Okunye okubhaliweyo njengesibambi-ndawo. Kubomi bokwenyani unokuba nezinto ozikhethileyo. Njengo, umbhalo, imifanekiso, uluhlu, njl. 
<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 kubekwa okungagqibekanga kwezixhobo ze-offcanvas, ngoko ke kufuneka udibanise enye yeeklasi zesilungisi ngezantsi;

  • .offcanvas-startibeka i-canvas ekhohlo kwindawo yokujonga (eboniswe ngasentla)
  • .offcanvas-endibeka i-offcanvas ngasekunene kwendawo yokujonga
  • .offcanvas-topibeka i-offcanvas phezu kwendawo yokujonga
  • .offcanvas-bottomibeka i-offcanvas ezantsi kwendawo yokujonga

Zama imizekelo ephezulu, ekunene, nasezantsi apha ngezantsi.

Offcanvas phezulu
... 
<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 ilungile
... 
<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>
Umzantsi we-offcanvas
... 
<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>

Ngasemva

Ukuskrola <body>into kuvaliwe xa i-offcanvas kunye nomqolo wayo ubonakala. Sebenzisa data-bs-scrolluphawu ukuguqula <body>ukuskrola kunye data-bs-backdropnokuguqula okusemva.

Ifakwe umbala ngokuskrola

Zama ukuskrola lonke iphepha ukuze ubone olu khetho lusebenza.

I-offcanvas enomva

.....

Ngasemva enokuskrola

Zama ukuskrola lonke iphepha ukuze ubone olu khetho lusebenza.

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

Ukufikeleleka

Kuba indawo yolawulo ye-offcanvas ngokwengqiqo yincoko yababini yemodal, qiniseka ukuba uyongeza aria-labelledby="..."-ubhekisa kwisihloko se-offcanvas-ku .offcanvas. Qaphela ukuba awudingi ukongeza role="dialog"kuba sele songeze ngeJavaScript.

Sass

Izinto eziguquguqukayo

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

Ukusetyenziswa

Iplagin ye-offcanvas isebenzisa iiklasi ezimbalwa kunye neempawu ukuphatha ukuphakamisa okunzima:

  • .offcanvasifihla umxholo
  • .offcanvas.showibonisa umxholo
  • .offcanvas-startifihla i-offcanvas ngasekhohlo
  • .offcanvas-endifihla i-offcanvas ngasekunene
  • .offcanvas-bottomifihla i-offcanvas ezantsi

Yongeza iqhosha lokugxotha kunye data-bs-dismiss="offcanvas"nophawu loyelelwano, oluqalisa ukusebenza kweJavaScript. Qinisekisa ukusebenzisa <button>ielementi kunye nayo ngokuziphatha okufanelekileyo kuzo zonke izixhobo.

Ngeempawu zedatha

Guqula

Yongeza data-bs-toggle="offcanvas"kunye ne data-bs-targetokanye hrefkwisiqalelo ukunika ngokuzenzekelayo ulawulo lwento enye ye-offcanvas. Uphawu data-bs-targetloyelelwano lwamkela umkhethi we-CSS ukuze kufakwe i-offcanvas kuyo. Qinisekisa ukuba wongeza iklasi offcanvaskwinto ye-offcanvas. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo show.

Gxotha

Ukugxothwa kunokufezekiswa ngophawu dataolukwiqhosha ngaphakathi kwe-offcanvas njengoko kubonisiwe ngezantsi:

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

okanye kwiqhosha elingaphandle kwekhanvasi usebenzisa oku data-bs-targetkubonisiwe ngezantsi:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ngelixa zombini iindlela zokugxotha i-offcanvas zixhaswa, hlala ukhumbula ukuba ukukhupha ngaphandle kwe-offcanvas akuhambelani ne-WAI-ARIA yendlela yoyilo lwencoko yencoko yababini iphethini . Yenza oku ngomngcipheko wakho.

NgeJavaScript

Vula ngesandla nge:

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-bs-, njengakwi data-bs-backdrop="".

Igama Uhlobo Ukuhlala kukho Inkcazo
backdrop boolean true Faka i-backdrop emzimbeni ngelixa i-offcanvas ivuliwe
keyboard boolean true Ivala i-offcanvas xa iqhosha lokubaleka licofa
scroll boolean false Vumela ukuskrola komzimba ngelixa i-offcanvas ivuliwe

Iindlela

Iindlela ze-Asynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

Yenza umxholo wakho njengento engaphandle kwekhanvasi. Yamkela iinketho ozikhethelayo object.

Unokwenza umzekelo we-offcanvas kunye nomakhi, umzekelo:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Indlela Inkcazo
toggle Iguqulela into ye-offcanvas ukuze iboniswe okanye ifihliwe. Ibuyisela kumnxebi phambi kokuba isici se-offcanvas siboniswe okanye sifihlwe (okt phambi kokuba isiganeko shown.bs.offcanvasokanye hidden.bs.offcanvasisiganeko senzeke).
show Ibonisa into yeoffcanvas. Ibuyisela kumnxebi phambi kokuba isici se-offcanvas siboniswe (okt phambi kokuba shown.bs.offcanvasisiganeko senzeke).
hide Ifihla into yeoffcanvas. Ibuyisela kumnxebi phambi kokuba isici se-offcanvas sifihlwe (okt phambi kokuba hidden.bs.offcanvasisiganeko senzeke).
getInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo we-offcanvas ohambelana nento yeDOM
getOrCreateInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo we-offcanvas onxulunyaniswa nento yeDOM, okanye wenze entsha ukuba ayiqalwanga.

Iziganeko

Udidi lwe-Bootstrap lwe-offcanvas luveza iminyhadala embalwa yokuqhagamshelwa ekusebenzeni kwe-offcanvas.

Uhlobo lomsitho Inkcazo
show.bs.offcanvas Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
shown.bs.offcanvas Esi siganeko sigxothwa xa into ye-offcanvas yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe).
hide.bs.offcanvas Esi siganeko sigxothwa ngokukhawuleza xa hideindlela sele ibizwa.
hidden.bs.offcanvas Esi siganeko sigxothwa xa into ye-offcanvas ifihliwe kumsebenzisi (iya kulinda iinguqu ze-CSS ukuba zigqibe). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})