Okuva ku kanvaasi

Zimba sidebars ezikwekebwa mu pulojekiti yo okutambulira, ebigaali by'okugula, n'ebirala n'ebibiina ebitonotono ne JavaScript plugin yaffe.

Ku muko guno

Engeri gye kikola

Offcanvas kitundu kya sidebar ekiyinza okukyusibwa okuyita mu JavaScript okulabika okuva ku kkono, ku ddyo, oba wansi ku bbali w'ekifo eky'okulaba. Buttons oba anchors zikozesebwa nga triggers eziyungibwa ku elements ebitongole by’okyusakyusa, era dataattributes zikozesebwa okuyita JavaScript yaffe.

Offcanvas egabana ebimu ku koodi ya JavaScript y’emu ne modals. Mu ndowooza, zifaanagana nnyo, naye nga zibeera plugins ez’enjawulo.
Mu ngeri y’emu, enkyukakyuka ezimu ez’ensibuko Sass ez’emisono n’ebipimo bya offcanvas zisikira okuva mu nkyukakyuka za modal.
Bwe kiragibwa, offcanvas erimu ekifaananyi ekisookerwako ekiyinza okunyigibwa okukweka offcanvas.
Okufaananako ne modals, offcanvas emu yokka esobola okulagibwa omulundi gumu.

Emitwe gigulumivu! Kubanga CSS gy'ekwatamu ebifaananyi ebirina obulamu, tosobola kukozesa marginoba translateku .offcanvaselementi. Wabula, kozesa ekibiina nga ekintu ekyetongodde eky’okuzinga.

Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Eby’okulabirako

Ebitundu ebitali bya kanvaasi

Wansi waliwo ekyokulabirako kya offcanvas ekiragiddwa nga bwe kibadde (via .showon .offcanvas). Offcanvas erimu okuwagira omutwe nga guliko button y'okuggalawo n'ekibiina ky'omubiri eky'okwesalirawo ku bimu ebisookerwako padding. Tukuwa amagezi nti oteekemu emitwe egy'ebweru wa kanvaasi n'ebikolwa eby'okugoba buli lwe kiba kisoboka, oba okuwa ekikolwa eky'okugoba eky'olwatu.

Ebirimu ku offcanvas bigenda wano. Osobola okuteeka kumpi ekitundu kyonna ekya Bootstrap oba ebintu eby’enjawulo wano.

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

Live demo

Kozesa obutambi wansi okulaga n’okukweka ekintu ekitali kya kanvaasi ng’oyita mu JavaScript ekyusa .showkiraasi ku kintu ne .offcanvaskiraasi.

.offcanvasakweka ebirimu (ebisookerwako) .
.offcanvas.showeraga ebirimu

Osobola okukozesa enkolagana n'ekintu href, oba bbaatuuni eriko data-bs-targetekintu. Mu mbeera zombi, the data-bs-toggle="offcanvas"is required.

Link ne href

Ebiwandiiko ebimu nga ekifo. Mu bulamu obw’amazima osobola okuba n’ebintu by’olonze. Nga, ebiwandiiko, ebifaananyi, enkalala, n’ebirala.

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

Okuteekebwa mu kifo

Tewali kuteekebwa kwa kusooka kwa bitundu bya offcanvas, kale olina okwongerako ekimu ku bika by'ebikyusa wansi;

.offcanvas-starteteeka offcanvas ku kkono w'ekifo eky'okulaba (ekiragiddwa waggulu)
.offcanvas-endateeka offcanvas ku ddyo w'ekifo eky'okulaba
.offcanvas-topateeka offcanvas waggulu ku viewport
.offcanvas-bottomateeka offcanvas wansi ku viewport

Gezaako ebyokulabirako eby’okungulu, ku ddyo, ne wansi wansi.

...

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

...

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

...

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

Ennyuma

Okutambula <body>elementi kulemesebwa nga offcanvas ne backdrop yaayo birabika. Kozesa data-bs-scrollattribute okukyusa <body>scrolling n'okukyusa data-bs-backdropbackdrop.

Gezaako okutambula ku lupapula olusigaddeyo okulaba eky’okulonda kino nga kikola.

.....

Gezaako okutambula ku lupapula olusigaddeyo okulaba eky’okulonda kino nga kikola.

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

Okutuuka ku bantu

Okuva ekipande ekitali kya kanvaasi mu ndowooza bwe kiri eky’okukubaganya ebirowoozo eky’engeri, kakasa nti ogattako aria-labelledby="..."—okujuliza omutwe ogutali gwa kanvaasi —ku .offcanvas. Weetegereze nti teweetaaga kwongerako role="dialog"okuva lwe twayongerako dda nga tuyita mu JavaScript.

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Enkozesa

Plugin ya offcanvas ekozesa kiraasi ntono n'ebintu okukwata okusitula ebizito:

.offcanvasakweka ebirimu
.offcanvas.showeraga ebirimu
.offcanvas-startakweka offcanvas ku kkono
.offcanvas-endakweka offcanvas ku ddyo
.offcanvas-bottomakweka offcanvas wansi

Okwongerako bbaatuuni y'okugoba n'ekintu data-bs-dismiss="offcanvas", ekivaako enkola ya JavaScript. Kakasa nti okozesa <button>elementi nayo okusobola okweyisa obulungi mu byuma byonna.

Okuyita mu bikwata ku data

Okukyusakyusa

Okwongerako data-bs-toggle="offcanvas"ne a data-bs-targetoba hrefku elementi okugaba otomatika okufuga elementi emu offcanvas. Ekintu data-bs-targetkikkiriza ekisunsula CSS okukozesa offcanvas ku. Kakasa nti ogattako kiraasi offcanvasku elementi ya offcanvas. Bw'oba oyagala kiggule nga kisookerwako, yongera ku kiraasi ey'okugattako show.

Okusiibula

Okugoba kuyinza okutuukirira n'ekintu ekiri dataku bbaatuuni munda mu offcanvas nga bwe kiragibwa wansi:

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

oba ku button ebweru wa offcanvas nga okozesa data-bs-targetnga bwekiragibwa wansi:

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

Wadde nga engeri zombi ez'okugoba offcanvas ziwagirwa, kuuma mu birowoozo nti okugoba okuva ebweru offcanvas tekukwatagana na WAI-ARIA modal dialog design pattern . Kino kikole ku bulabe bwo.

Okuyita mu JavaScript

Ssobozesa mu ngalo ne:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-, nga mu data-bs-backdrop="".

Erinnya	Okuwandiika	Okukosamu	Okunnyonnyola
`backdrop`	boolean	`true`	Siiga backdrop ku mubiri nga offcanvas eggule
`keyboard`	boolean	`true`	Eggalawo offcanvas nga escape key enyigiddwa
`scroll`	boolean	`false`	Kiriza omubiri okutambula nga offcanvas eggule

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

Ekola ebirimu byo nga ekintu ekitali ku kanvaasi. Akkiriza eby'okulonda eby'okwesalirawo object.

Osobola okukola ekifaananyi ekitali kya kanvaasi n'omuzimbi, okugeza:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Engeri	Okunnyonnyola
`toggle`	Ekyusa ekintu ekitali ku kanvaasi okulaga oba okukwekebwa. Edda eri omuyita nga ekintu ekitali kya kanvaasi tekinnalagibwa oba okukwekebwa ddala (kwe kugamba nga `shown.bs.offcanvas`oba `hidden.bs.offcanvas`ekintu tekinnabaawo).
`show`	Alaga ekintu ekitali kya kanvaasi. Edda eri omuyita nga elementi ya offcanvas tennalagibwa ddala (kwe kugamba nga `shown.bs.offcanvas`ekintu tekinnabaawo).
`hide`	Ekweka ekintu ekitali kya kanvaasi. Edda eri omuyita nga ekintu ekitali kya kanvaasi tekinnakwekebwa ddala (kwe kugamba nga `hidden.bs.offcanvas`ekintu tekinnabaawo).
`getInstance`	Enkola ya static ekusobozesa okufuna offcanvas instance ekwatagana ne DOM element
`getOrCreateInstance`	Enkola ya static ekusobozesa okufuna offcanvas instance ekwatagana ne DOM element, oba okukola empya singa teyali etandikibwawo

Ebibaddewo

Bootstrap's offcanvas class eraga ebitonotono ebibaawo olw'okukwata mu nkola ya offcanvas.

Ekika ky’ekintu ekibaawo	Okunnyonnyola
`show.bs.offcanvas`	Ekintu kino kikuba amangu ddala nga `show`enkola ya instance eyitiddwa.
`shown.bs.offcanvas`	Ekintu kino kikubwa nga ekintu ekitali kya kanvaasi kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za CSS okuggwa).
`hide.bs.offcanvas`	Ekintu kino kikubwa amangu ddala `hide`ng’enkola eyitiddwa.
`hidden.bs.offcanvas`	Ekintu kino kikubwa nga ekintu ekitali kya kanvaasi kikwekeddwa okuva eri omukozesa (kijja kulinda enkyukakyuka za CSS okuggwa).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Okuva ku kanvaasi

Engeri gye kikola

Eby’okulabirako

Ebitundu ebitali bya kanvaasi

Okuva ku kanvaasi

Live demo

Okuva ku kanvaasi

Okuteekebwa mu kifo

Offcanvas waggulu

Offcanvas ku ddyo

Offcanvas wansi

Ennyuma

Langi eriko okuzingulula

Offcanvas nga eriko ekifaananyi eky’emabega

Backdrop nga eriko okuzingulula

Okutuuka ku bantu

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

Enkozesa

Okuyita mu bikwata ku data

Okukyusakyusa

Okusiibula

Okuyita mu JavaScript

Eby’okulondako

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Ebibaddewo