Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Kanfaasiin ala

Pirojektii kee keessatti barruulee cinaa dhokatan ijaari, navigeeshinii, gaarii bittaa fi kkf gita muraasaa fi pilaaginii JaavaScript keenyaan.

Fuula kana irratti

Akkaataa itti hojjetu

Offcanvas qaama barruu cinaa kan karaa JaavaScript jijjiiruun qarqara bitaa, mirgaa, gubbaa, ykn jalaa buufata ilaalchaa irraa mul'achuu danda'uudha. Qabduu ykn anchors akka kaka'umsaa kanneen elementoota murtaa'oo ati jijjiirtutti maxxananitti fayyadamu, fi dataamaloonni 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 marginykn translateirratti fayyadamuu hin dandeessu . .offcanvasInumaayyuu, gita akka qaama marfata of danda'etti fayyadami.

Bu'aan sochii qaama kanaa prefers-reduced-motiongaaffii 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 .showon .offcanvas). Offcanvas deeggarsa mataduree qaree cufuu qabuu fi gita qaama filannoo jalqabaa tokko tokkoof of keessatti qabata padding. Yeroo danda'ametti matadureewwan kanvaasiin ala gochaalee hojii irraa ari'uu waliin akka hammattu, ykn tarkaanfii hojii irraa ari'uu ifa ta'e akka kennitu yaada kennina.

Kanfaasiin ala
Qabiyyeen offcanvas'f as deema. Qaama Bootstrap ykn elementoota amala kamiyyuu asitti kaa'uu dandeessa.
html 
<div class="offcanvas offcanvas-start show" 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" 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 .showgita qaama .offcanvasgita waliin irratti jijjiiru agarsiisuu fi dhoksuuf.

  • .offcanvasqabiyyee dhoksa (durtii) .
  • .offcanvas.showqabiyyee agarsiisa

hrefHidhaa amaloota waliin, ykn qaree amaloota waliin fayyadamuu dandeessa data-bs-target. Haala lamaan keessatti, the data-bs-toggle="offcanvas"ni barbaachisa.

href waliin walqabsiisi
Kanfaasiin ala
Barruu tokko tokko akka iddooqaatti. Jireenya dhugaa keessatti elementoota filatte qabaachuu dandeessa. Akka, barreeffama, fakkii, tarreewwanii fi kkf.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Qaama scroll gochuu

Qabeentaa <body>garagalchuun yeroo kanfaasiin ala fi duubbee isaa mul'atu ni hanqifama. data-bs-scrollMarsaa dandeessisuuf amaloota fayyadami <body>.

Offcanvas kan qaama scroll qabu

Filannoo kana hojiidhaan arguuf fuula hafe garagalchuuf yaali.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Qaama scrolling fi duubbee

<body>Akkasumas , duubbee mul'atuun garagalchuu dandeessisuu dandeessa .

Duubbee kan 'scroll' qabu

Filannoo kana hojiidhaan arguuf fuula hafe garagalchuuf yaali.

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

Duubbee istaatiksii

Yeroo duubbee gara static qindaa'u, offcanvas yeroo ala cuqaastu hin cufamu.

Kanfaasiin ala
Yoo naan ala cuqaastan hin cufamu.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Offcanvas dukkanaa'aa

v5.2.0 keessatti dabalameera

Bifa offcanvases faayidaa waliin jijjiiri haala adda addaa akka navbars dukkanaa'aa wajjin haala gaariin walsimsiisuuf. Asitti offcanvas dukkanaa'aa ta'een sirriitti styling gochuuf and .text-bg-darkto irratti daballa. Yoo keessaa dropdowns qabaatte, akkasumas gara ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Kanfaasiin ala

Qabiyyee offcanvas as kaa'i.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Deebii kan kennu

v5.2.0 keessatti dabalameera

Gitiiwwan kanfaasiin ala deebii kennan qabiyyee bal'ina ilaalchaa ala jiru bakka cabbii ifteessame irraa fi gadi dhoksu. Qabxii cabbii sanaa olitti qabiyyeen keessa jiru akkuma barame amala qabaata. Fakkeenyaaf, qabiyyee kanfaasiin ala jiru keessaa tuqaa ciccituu .offcanvas-lggadi dhoksa lg, garuu qabiyyee tuqaa ciccituu olitti agarsiisa lg.

Jijjiirraa offcanvas deebii kennu agarsiisuuf guddina biraawzari kee jijjiiri.
Deebii kan kennu offcanvas

Kun qabiyyee keessaa .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Kutaaleen deebii kennan kanfaasiin ala tokkoon tokkoon qabxii cabsuuf qaxxaamuranii ni argamu.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Ramaddii

Qaamolee offcanvas'f iddoon durtii hin jiru, kanaafuu gita fooyyessaa armaan gadii keessaa tokko dabaluu qabda.

  • .offcanvas-startoffcanvas bitaa viewport irratti kaa'a (armaan olitti agarsiifame) .
  • .offcanvas-endoffcanvas mirga viewport irratti kaa'a
  • .offcanvas-topoffcanvas gubbaa viewport irratti kaa'a
  • .offcanvas-bottomoffcanvas jala viewport irratti kaa'a

Fakkeenya gubbaa, mirgaa fi jalaa armaan gadii yaali.

Offcanvas gubbaa
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas mirgaa
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas jalatti
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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 .

CSS jedhamuun beekama

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama mala jijjiiramoota CSS guddachaa jiran Bootstrap, offcanvas amma jijjiiramoota CSS naannoo on fayyadama .offcanvasdhuunfachiisa yeroo dhugaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Jijjiiramoota Sass

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

Fayyadama

Ijaarsiin offcanvas gitaalee fi amaloota muraasa fayyadama kaasuun ulfaataa to'achuuf:

  • .offcanvasqabiyyee dhoksa
  • .offcanvas.showqabiyyee agarsiisa
  • .offcanvas-startoffcanvas bitaa irratti dhoksa
  • .offcanvas-endoffcanvas kan mirgaa jiru dhoksa
  • .offcanvas-topgubbaa irratti offcanvas dhoksa
  • .offcanvas-bottomoffcanvas 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

Toggle gochuu

To'annoo qaama kanfaasiin ala tokkoo ofumaan ramaduuf data-bs-toggle="offcanvas"fi a data-bs-targetykn gara qaamaatti dabali . hrefAmalli data-bs-targetfilannoo CSS kan offcanvas irratti hojii irra oolchuuf fudhata. offcanvasGitaa gara elementii kanfaasiin ala ta'etti dabaluu kee mirkaneessi . Yoo durtii akka banamu barbaadde, gita dabalataa dabali show.

Balleessuu

dataHojii irraa ari'uun amaloota button offcanvas keessa jiru irratti akka armaan gadiitti galma ga'uu danda'a :

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

ykn button offcanvas ala jirudata-bs-target irratti akka armaan gadiitti fayyadamuun :

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Karaaleen lamaan kanfaasiin ala kuffisuu kan deeggaraman yoo ta'u, kanfaasiin ala ala irraa ari'uun akkaataa qaaqa (moodaalii) Qajeelfama Shaakala Barreessuu ARIA waliin akka wal hin simne yaada keessa galchi . Kana balaa mataa keetiin raawwadhu.

Karaa JaavaScript

Harkaan dandeessisi:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Maqaa Akaakuu Durtii dha Ibsa
backdrop boolean ykn tarreestatic true Yeroo offcanvas banaa ta'etti qaama irratti backdrop dibadhu. Akka filannootti, staticduubbee yeroo cuqaafamu kanfaasiin ala hin cufneef ifteessi.
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 .

Odeeffannoo dabalataaf galmee JaavaScript keenya ilaali .

Qabiyyee kee akka elementii kanfaasiin ala ta'etti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

Ijaarsa waliin fakkeenya kanfaasiin ala uumuu dandeessa, fakkeenyaaf:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Mala Ibsa
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.
hide Qaama kanfaasiin ala dhoksa. Qabeentiin kanfaasiin ala qabatamaan osoo hin dhokatiin dura (jechuunis hidden.bs.offcanvastaatee osoo hin uumamin dura) gara waamichaatti deebi'a.
show Qaama kanfaasiin ala agarsiisa. Qaamni offcanvas qabatamaan osoo hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo shown.bs.offcanvastaatee hin uumamin dura).
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.offcanvasykn hin uumamin dura hidden.bs.offcanvas).

Taateewwan

Bootstrap's offcanvas class taateewwan muraasa gara dalagaa offcanvas hooking gochuuf saaxila.

Gosa taatee Ibsa
hide.bs.offcanvas Taatee kun yeroo hidemala waamame battalumatti dhukaafama.
hidden.bs.offcanvas Taatee kun yeroo elementiin kanfaasiin ala fayyadamaa irraa dhokate ni dhukaafama (ce'umsa CSS xumuramuu eega).
hidePrevented.bs.offcanvas Taatee kun kan dhukaafamu yeroo kanfaasiin ala agarsiifamu, duubni isaa staticfi cuqaasiin ala kanfaasiin ala raawwatamudha. Taatee akkasumas yeroo furtuun miliquu dhiibamee fi keyboardfilannoo gara false.
show.bs.offcanvas Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
shown.bs.offcanvas Taatee kun kan dhukaafamu yeroo elementiin kanfaasiin ala fayyadamaaf mul'atu taasifame (ce'umsa CSS xumuramuu eega). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})