I-offcanvas
Yakha iibar ezifihlakeleyo kwiprojekthi yakho yokuhamba, iinqwelo zokuthenga, kunye nokunye ngeeklasi ezimbalwa kunye neplagi yethu yeJavaScript.
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 data
neempawu 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 margin
okanye translate
kwinto .offcanvas
. Endaweni yoko, sebenzisa iklasi njengento ezimeleyo yokusonga.
prefers-reduced-motion
kumbuzo wemidiya. Jonga icandelo
leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .
Imizekelo
Amacandelo e-offcanvas
Ngezantsi ngumzekelo we-offcanvas oboniswa ngokungagqibekanga (nge- .show
on .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
<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 .show
iklasi kwinto kunye .offcanvas
neklasi.
.offcanvas
ifihla umxholo (okuhlala kukho).offcanvas.show
ibonisa umxholo
Ungasebenzisa ikhonkco kunye href
nophawu, okanye iqhosha elinophawu data-bs-target
loyelelwano. Kuzo zombini ezi meko, data-bs-toggle="offcanvas"
kuyafuneka.
I-offcanvas
<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-start
ibeka i-canvas ekhohlo kwindawo yokujonga (eboniswe ngasentla).offcanvas-end
ibeka i-offcanvas ngasekunene kwendawo yokujonga.offcanvas-top
ibeka i-offcanvas phezu kwendawo yokujonga.offcanvas-bottom
ibeka 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-scroll
uphawu ukuguqula <body>
ukuskrola kunye data-bs-backdrop
nokuguqula okusemva.
Ifakwe umbala ngokuskrola
Zama ukuskrola lonke iphepha ukuze ubone olu khetho lusebenza.
I-offcanvas enomva
.....
Ngasemva ngokuskrola
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">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>
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;
Ukusetyenziswa
Iplagin ye-offcanvas isebenzisa iiklasi ezimbalwa kunye neempawu ukuphatha ukuphakamisa okunzima:
.offcanvas
ifihla umxholo.offcanvas.show
ibonisa umxholo.offcanvas-start
ifihla i-offcanvas ngasekhohlo.offcanvas-end
ifihla i-offcanvas ngasekunene.offcanvas-bottom
ifihla 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
Yongeza data-bs-toggle="offcanvas"
kunye ne data-bs-target
okanye href
kwisiqalelo ukunika ngokuzenzekelayo ulawulo lwento enye ye-offcanvas. Uphawu data-bs-target
loyelelwano lwamkela umkhethi we-CSS ukuze kufakwe i-offcanvas kuyo. Qinisekisa ukuba wongeza iklasi offcanvas
kwinto ye-offcanvas. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo show
.
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 zeAsynchronous kunye notshintsho
Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba inguqu iqalisiwe kodwa ingekapheli . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .
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.offcanvas okanye hidden.bs.offcanvas isiganeko senzeke). |
show |
Ibonisa into yeoffcanvas. Ibuyisela kumnxebi phambi kokuba isici se-offcanvas siboniswe (okt phambi kokuba shown.bs.offcanvas isiganeko senzeke). |
hide |
Ifihla into yeoffcanvas. Ibuyisela kumnxebi phambi kokuba isici se-offcanvas sifihlwe (okt phambi kokuba hidden.bs.offcanvas isiganeko 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 yokudibanisa nokusebenza kwe-offcanvas.
Uhlobo lomsitho | Inkcazo |
---|---|
show.bs.offcanvas |
Esi siganeko sivutha ngokukhawuleza xa show kubizwa 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 hide indlela 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...
})