Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
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, 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 marfama 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 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
Qabiyyeen kan offcanvas ta'eef as deema. Qaama Bootstrap ykn elementoota amala kamiyyuu asitti kaa'uu dandeessa. 
<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

Qabduu 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. 
<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-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
... 
<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-scrollAmala garagalchuu jijjiiruuf <body>fi data-bs-backdropduubbee 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 'scroll' qabu

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

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;
$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-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 ta'e ala irraa ari'uun akkaataa dizaayinii qaaqa moodaalii WAI-ARIA wajjin akka wal hin simne yaada keessa galchi . Kana balaa mataa keetiin raawwadhu.

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 .

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:

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.offcanvasykn 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.offcanvastaatee hin uumamin dura).
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.
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 showmala fakkeenyaa waamamu battalumatti dhukaasa.
shown.bs.offcanvas Taatee kun kan dhukaafamu yeroo elementiin kanfaasiin ala fayyadamaaf akka mul'atu godhame (ce'umsa CSS xumuramuu eega).
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). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})