Kanfaasiin ala
Pirojektii kee keessatti barruulee cinaa dhokatan ijaari, navigeeshinii, gaarii bittaa fi kkf gita muraasaa fi pilaaginii JaavaScript keenyaan.
Akkaataa itti hojjetu
Offcanvas qaama barruu cinaa kan karaa JaavaScript jijjiiruun qarqara bitaa, mirgaa, ykn jalaa buufata ilaalchaa irraa mul'achuu danda'uudha. Qabduu ykn anchors akka kaka'umsaa kanneen elementoota murtaa'oo ati jijjiirtutti maxxananitti fayyadamu, fi data
amaloonni JaavaScript keenya waamuuf fayyadamu.
- Offcanvas koodii JaavaScript tokko tokko akka moodaalotaatti qooddata. Yaad-rimeedhaan, isaan baay'ee wal fakkaatu, garuu isaan pilaaginii adda addaati.
- Haaluma walfakkaatuun, jijjiiramoonni Sass madda tokko tokko akkaataa fi dimenshinii offcanvas jijjiiramoota moodaalichaa irraa dhaalamu.
- Yeroo agarsiifamu, offcanvas duubbee durtii kan offcanvas dhoksuuf cuqaasuu danda'u of keessatti qabata.
- Moodaalota wajjin wal fakkaatuun, yeroo tokkotti kanfaasiin ala tokko qofa agarsiisuu danda'a.
Mataa ol qaba! Akkaataa CSS sochiiwwan itti qabatu kennameef, elementii tokko fayyadamuu margin
ykn translate
irratti fayyadamuu hin dandeessu . .offcanvas
Inumaayyuu, gita akka qaama marfata of danda'etti fayyadami.
prefers-reduced-motion
gaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali
.
Fakkeenyaaf
Qaamolee kanfaasiin ala jiran
Armaan gaditti fakkeenya offcanvas kan durtii agarsiifame (karaa .show
on .offcanvas
). Offcanvas deeggarsa mataduree qaree cufuu qabuu fi gita qaama filannoo jalqabaa tokko tokkoof of keessatti qabata padding
. Yeroo danda'ametti mata dureewwan kanvaasiin ala ta'an tarkaanfiiwwan hojii irraa ari'uu waliin akka hammattu, ykn tarkaanfii hojii irraa ari'uu ifa ta'e akka kennitu yaada kennina.
Kanfaasiin ala
<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>
Deemoo kallattiin
Qabduulee armaan gadii fayyadamii qaama kanfaasiin ala karaa JaavaScript kan .show
gita qaama .offcanvas
gita waliin irratti jijjiiru agarsiisuu fi dhoksuuf.
.offcanvas
qabiyyee dhoksa (durtii) ..offcanvas.show
qabiyyee agarsiisa
href
Hidhaa amaloota waliin, ykn qaree amaloota waliin fayyadamuu dandeessa data-bs-target
. Haala lamaan keessatti, the data-bs-toggle="offcanvas"
ni barbaachisa.
Kanfaasiin ala
<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>
Ramaddii
Qaamolee offcanvas'f iddoon durtii hin jiru, kanaafuu gita fooyyessaa armaan gadii keessaa tokko dabaluu qabda;
.offcanvas-start
offcanvas bitaa viewport irratti kaa'a (armaan olitti agarsiifame) ..offcanvas-end
offcanvas mirga viewport irratti kaa'a.offcanvas-top
offcanvas gubbaa viewport irratti kaa'a.offcanvas-bottom
offcanvas jala viewport irratti kaa'a
Fakkeenya gubbaa, mirgaa fi jalaa armaan gadii yaali.
Offcanvas gubbaa
<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 mirgaa
<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 jalatti
<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>
Duubbee
Qabeentaa <body>
garagalchuun yeroo kanfaasiin ala fi duubbee isaa mul'atu ni hanqifama. data-bs-scroll
Amala garagalchuu jijjiiruuf <body>
fi data-bs-backdrop
duubbee jijjiiruuf fayyadami .
Halluu kan qabu yoo ta'u, kan 'scroll' ta'e
Filannoo kana hojiidhaan arguuf fuula hafe garagalchuuf yaali.
Offcanvas kan duubbee qabu
.....
Duubbee kan ta'e kan 'scroll' ta'e
Filannoo kana hojiidhaan arguuf fuula hafe garagalchuuf yaali.
<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>
Dhaqqabummaa
Paaneliin kanfaasiin ala yaad-rimeedhaan qaaqa moodaalii waan ta'eef, dabaluu kee mirkaneessi aria-labelledby="..."
—mata duree kanfaasiin ala wabeeffachuun—gara .offcanvas
. role="dialog"
Hubadhaa duraanuu karaa JavaScript waan itti daballeef dabaluun isin hin barbaachisu .
Sass jedhama
Jijjiiramoota
$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;
Fayyadama
Ijaarsiin offcanvas gitaalee fi amaloota muraasa fayyadama kaasuun ulfaataa to'achuuf:
.offcanvas
qabiyyee dhoksa.offcanvas.show
qabiyyee agarsiisa.offcanvas-start
offcanvas bitaa irratti dhoksa.offcanvas-end
offcanvas kan mirgaa jiru dhoksa.offcanvas-bottom
offcanvas jalatti dhoksa
Qabduu ari'uu data-bs-dismiss="offcanvas"
amaloota waliin dabali, kunis dalagaa JaavaScript kakaasa. <button>
Meeshaalee hunda irratti amala sirrii ta'eef elementii isa waliin fayyadamuu kee mirkaneessi .
Karaa amaloota deetaa
To'annoo qaama kanfaasiin ala tokkoo ofumaan ramaduuf data-bs-toggle="offcanvas"
fi a data-bs-target
ykn gara qaamaatti dabali . href
Amalli data-bs-target
filannoo CSS kan offcanvas irratti hojii irra oolchuuf fudhata. offcanvas
Gitaa gara elementii kanfaasiin ala ta'etti dabaluu kee mirkaneessi . Yoo durtii akka banamu barbaadde, gita dabalataa dabali show
.
Karaa JaavaScript
Harkaan dandeessisi:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Filannoowwan
Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-
, akkuma keessatti dabali data-bs-backdrop=""
.
Maqaa | Akaakuu | Durtii dha | Ibsa |
---|---|---|---|
backdrop |
boolee | true |
Yeroo offcanvas banaa ta'etti qaama irratti backdrop dibadhu |
keyboard |
boolee | true |
Yeroo furtuun miliquu dhiibamu offcanvas cufa |
scroll |
boolee | false |
Yeroo offcanvas banaa ta'ee qaama scroll hayyami |
Malawwan
Malawwanii fi ce’umsawwan wal hin simne
Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .
Qabiyyee kee akka elementii kanfaasiin ala ta'etti hojii irra oolcha. Filannoo filannoo tokko fudhata object
.
Ijaarsa waliin fakkeenya kanfaasiin ala uumuu dandeessa, fakkeenyaaf:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Mala | Ibsa |
---|---|
toggle |
Qaama kanfaasiin ala gara agarsiifame ykn dhokateetti jijjiira. Qabeentiin kanfaasiin ala qabatamaan osoo hin agarsiifamiin ykn hin dhokatiin dura gara waamichaatti deebi'a (jechuunis osoo taatee shown.bs.offcanvas ykn hin uumamin dura hidden.bs.offcanvas ). |
show |
Qaama kanfaasiin ala agarsiisa. Qaamni offcanvas qabatamaan osoo hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo shown.bs.offcanvas taatee hin uumamin dura). |
hide |
Qaama kanfaasiin ala dhoksa. Qabeentiin kanfaasiin ala qabatamaan osoo hin dhokatiin dura (jechuunis hidden.bs.offcanvas taatee osoo hin uumamin dura) gara waamichaatti deebi'a. |
getInstance |
Mala istaatiksii kan fakkeenya offcanvas elementii DOM waliin walqabate argachuuf si dandeessisu |
getOrCreateInstance |
Mala istaatiksii kan fakkeenya offcanvas elementii DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu |
Taateewwan
Bootstrap's offcanvas class taateewwan muraasa gara dalagaa offcanvas hooking gochuuf saaxila.
Gosa taatee | Ibsa |
---|---|
show.bs.offcanvas |
Taatee kun yeroo show mala fakkeenyaa waamamu battalumatti dhukaasa. |
shown.bs.offcanvas |
Taatee kun kan dhukaafamu yeroo elementiin kanfaasiin ala fayyadamaaf mul'atu taasifame (ce'umsa CSS xumuramuu eega). |
hide.bs.offcanvas |
Taatee kun yeroo hide mala waamame battalumatti dhukaafama. |
hidden.bs.offcanvas |
Taatee kun yeroo elementiin kanfaasiin ala fayyadamaa irraa dhokate ni dhukaafama (ce'umsa CSS xumuramuu eega). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})