Offcanvas
Ku dhis baararka qarsoon mashruucaaga hagidda, gawaarida wax iibsiga, iyo wax ka badan oo leh dhawr fasal iyo plugin JavaScript.
Sida ay u shaqeyso
Offcanvas waa qayb dhinac ah oo lagu rogi karo JavaScript si ay uga muuqato bidix, midig, ama cidhifka hoose ee daawashada. Badhamada ama barroosinnada waxaa loo isticmaalaa kiciyeyaasha ku dheggan walxo gaar ah oo aad beddesho, sifadana data
waxa loo isticmaalaa in lagu yeedho JavaScript-kayaga.
- Offcanvas waxa ay la wadaagtaa qaar ka mid ah koodka JavaScript ee moodalka. Fikrad ahaan, aad bay isugu dhow yihiin, laakiin waa plugins gaar ah.
- Sidoo kale, qaar ka mid ah ilaha Sass doorsoomayaasha qaababka offcanvas iyo cabbirada ayaa laga dhaxlay doorsoomayaasha modal.
- Marka la tuso, offcanvas waxaa ku jira meel aan toos ahayn oo la riixi karo si loo qariyo dusha ka baxsan.
- Si la mid ah moodooyinka, hal mar oo kaliya ayaa la tusi karaa shisheeyaha.
Madaxa kor u qaad! Marka la eego sida ay CSS u maamusho animations, ma isticmaali kartid margin
ama ma isticmaali translate
kartid shay .offcanvas
. Taa beddelkeeda, u isticmaal fasalka sidii curiye duubid oo madaxbannaan.
prefers-reduced-motion
waydiinta warbaahinta. Eeg
qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .
Tusaalooyinka
Qaybaha Offcanvas
Hoos waxaa ku yaal tusaale ka baxsan kanvas oo lagu muujiyey si toos ah (oo loo sii marayo .show
) .offcanvas
. Offcanvas waxaa ka mid ah taageerada madaxa oo leh badhanka u dhow iyo fasalka jidhka ikhtiyaariga ah ee bilowga ah padding
. Waxaan kuu soo jeedineynaa inaad ku darto madax-madax ka baxsan oo leh ficillada la eryo mar kasta oo ay suurtagal tahay, ama bixi tallaabo cayr ah oo cad.
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>
Muujinta tooska ah
Isticmaal badhannada hoose si aad u muujiso oo aad u qariso curiyaha bannaanka ah adigoo isticmaalaya JavaScript kaas oo u rogaya .show
fasalka curiyaha .offcanvas
fasalka.
.offcanvas
waxa uu qarinayaa (default).offcanvas.show
waxay muujinaysaa nuxurka
Waxaad isticmaali kartaa xiriiriye leh href
sifada, ama badhan sifada leh data-bs-target
. Labada xaaladoodba, data-bs-toggle="offcanvas"
waa loo baahan yahay.
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>
Meelaynta
Ma jirto meelayn gaar ah oo loogu talagalay qaybaha canvas-ka-baxsan, markaa waa inaad ku dartaa mid ka mid ah fasallada wax ka beddelka ee hoose;
.offcanvas-start
meel kabaxsan dhanka bidix ee daawashada (kor lagu muujiyay).offcanvas-end
dhigaya offcanvas dhanka midig ee daawashada.offcanvas-top
meela offcanvas dusha sare ee daawashada.offcanvas-bottom
dhigaya offcanvas xagga hoose ee daawashada
Isku day tusaalooyinka sare, midig, iyo hoose ee hoose.
dusha ka baxsan
<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 midig
<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 hoose
<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>
Backdrop
Duubista <body>
cunsurka waa naafo marka dusha sare iyo gadaashiisa la arko. Isticmaal data-bs-scroll
sifada si aad u rogto rog -rogid <body>
oo data-bs-backdrop
aad u rogato gadaasha dambe.
Midab leh duubid
Isku day inaad rogto bogga intiisa kale si aad u aragto doorashadan ficil ahaan.
Offcanvas oo leh gadaal
......
Dib u duubid leh
Isku day inaad rogto bogga intiisa kale si aad u aragto doorashadan ficil ahaan.
<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>
Helitaanka
Maadaama guddiga offcanvas uu fikrad ahaan yahay wada hadal modal, hubi inaad ku darto aria-labelledby="..."
- tixraacaya cinwaanka offcanvas-to .offcanvas
. Ogow uma baahnid inaad ku dartorole="dialog"
maadaama aan mar hore ku darnay JavaScript.
Sass
Kala duwanaansho
$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;
Isticmaalka
Furaha offcanvas wuxuu isticmaalaa dhowr fasalo iyo sifooyin si loo xakameeyo qaadista culus:
.offcanvas
qariya waxa ku jira.offcanvas.show
waxay muujinaysaa nuxurka.offcanvas-start
wuxuu qariyaa dusha sare ee bidixda.offcanvas-end
wuxuu qariyaa dusha sare ee midig.offcanvas-bottom
wuxuu qariyaa dusha sare ee canvas-ka
Ku dar badhanka cayrinta oo leh data-bs-dismiss="offcanvas"
sifada, taas oo kicinaysa shaqaynta JavaScript. U hubso inaad u isticmaasho <button>
curiyaha leh hab-dhaqan habboon dhammaan qalabka.
Iyada oo loo marayo sifooyinka xogta
Ku dar data-bs-toggle="offcanvas"
iyo a data-bs-target
ama href
curiyaha si si toos ah loogu meeleeyo kantaroolka hal canvas ka baxsan. Sifadu data-bs-target
waxay aqbashaa xulashada CSS si loogu dabaqo dusha sare. Hubi inaad fasalka offcanvas
ku darto walxaha shisheeyaha ah. Haddii aad rabto inuu furmo, ku dar fasalka dheeraadka ahshow
.
Iyadoo loo marayo JavaScript
Ku oggolow gacanta:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Ikhtiyaarada
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-
, sida ku jira data-bs-backdrop=""
.
Magaca | Nooca | Asal ahaan | Sharaxaada |
---|---|---|---|
backdrop |
booliyan | true |
Codso duleelka dambe ee jirka inta canvas furan yahay |
keyboard |
booliyan | true |
Waxay xirtaa galalka bannaanka marka furaha baxsadka la riixo |
scroll |
booliyan | false |
Oggolow in jidhka la rogo inta canvas furan yahay |
Hababka
Hababka iyo kala-guurka aan isku midka ahayn
Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxa dheer, hab ku baaqaya qayb ka-wareejin ah waa la iska indhatiraa .
Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .
Waxay u hawlgelisaa macluumaadkaaga sidii cunsur-ka-baxsan. Aqbala ikhtiyaarka ikhtiyaariga ah object
.
Waxaad ku samayn kartaa tusaale ka baxsan kan wax dhisaha, tusaale ahaan:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Habka | Sharaxaada |
---|---|
toggle |
U beddelaa walxaha canvas ka baxsan si loo muujiyo ama loo qariyo. Ku soo noqda qofka soo wacaya ka hor inta aan xubinta canvas-ka ah run ahaantii la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.offcanvas ama hidden.bs.offcanvas dhacdada dhicin). |
show |
Waxay muujisaa cunsur ka baxsan canvas Ku soo noqda qofka soo wacaya ka hor inta aan dhab ahaantii la tusin cunsurka bannaanka (tusaale ka hor intaanay shown.bs.offcanvas dhacdada dhicin). |
hide |
Waxay qarisaa walxaha canvas ka baxsan. Ku soo noqda qofka soo wacaya ka hor inta aan la qarinin qaybta canvas-ka ah (tusaale ka hor intaanay hidden.bs.offcanvas dhacdada dhicin). |
getInstance |
Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaale ka baxsan canvas oo la xidhiidha curiyaha DOM |
getOrCreateInstance |
Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaale ka baxsan canvas oo la xidhiidha walxaha DOM, ama abuurto mid cusub haddii aan la bilaabin |
Dhacdooyinka
Bootstrap's offcanvas fasalka wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xidhidhiyaha shaqada offcanvas.
Nooca dhacdada | Sharaxaada |
---|---|
show.bs.offcanvas |
Dhacdadani waxay isla markaaba gubataa marka show habka tusaalaha la yiraahdo. |
shown.bs.offcanvas |
Dhacdadan waxa la eryaa marka cunsur-ka-baxsan la tusay isticmaaluhu (waxay sugi doontaa inta CSS ka wareejinta la dhammaystirayo). |
hide.bs.offcanvas |
Dhacdadan ayaa isla markiiba la eryaa marka hide habka loo waco. |
hidden.bs.offcanvas |
Dhacdadan waxa la eryaa marka cunsur-ka-baxsan laga qariyay isticmaalaha (waxay sugi doontaa inta CSS kala guurka la dhamaystirayo). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})