Buuka ku bigambo ebikulu Buuka ku docs navigation
Check
in English

Okuva ku kanvaasi

Zimba sidebars ezikwekebwa mu pulojekiti yo okusobola 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, waggulu, 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 ezenjawulo.
  • 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.

Okuva ku kanvaasi
Ebirimu ku offcanvas bigenda wano. Osobola okuteeka kumpi ekitundu kyonna ekya Bootstrap oba ebintu eby’enjawulo wano.
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>

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
Okuva ku kanvaasi
Ebiwandiiko ebimu nga ekifo. Mu bulamu obw’amazima osobola okuba n’ebintu by’olonze. Nga, ebiwandiiko, ebifaananyi, enkalala, n’ebirala.
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>

Okuyiringisibwa kw’omubiri

Okutambula <body>elementi kulemesebwa nga offcanvas ne backdrop yaayo birabika. Kozesa data-bs-scrollekintu okusobozesa <body>okutambula.

Offcanvas nga eriko omubiri oguyiringisibwa

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

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>

Okutambula kw’omubiri n’okudda emabega

Osobola n’okusobozesa <body>okutambula ng’olina ekifaananyi ekirabika.

Backdrop nga eriko okuzingulula

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

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>

Ekifo ekitali kikyukakyuka (static backdrop).

Backdrop bweteekebwa ku static, offcanvas tejja kuggalawo nga onyiga ebweru waayo.

Okuva ku kanvaasi
Sijja kuggalawo singa onyiga ebweru wange.
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 enzirugavu

Yayongerwako mu v5.2.0

Kyusa endabika ya offcanvases ne utilities okusobola okuzikwataganya obulungi ku contexts ezenjawulo nga dark navbars. Wano twongerako .text-bg-darkku .offcanvasne .btn-close-whiteku okusobola .btn-closeokukola sitayiro entuufu ng’olina offcanvas enzirugavu. Bw’oba ​​olina ebikka munda, lowooza ku ky’okwongera .dropdown-menu-darkku .dropdown-menu.

Okuva ku kanvaasi

Teeka wano ebirimu ebitali ku kanvaasi.

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>

Okuddamu

Yayongerwako mu v5.2.0

Responsive offcanvas classes zikweka ebirimu ebweru w'ekifo eky'okulaba okuva mu breakpoint eragiddwa ne wansi. Waggulu w’ekifo ekyo eky’okumenya, ebirimu munda bijja kweyisa nga bulijjo. Okugeza, .offcanvas-lgekweka ebirimu mu offcanvas wansi w'ekifo lgeky'okumenya, naye eraga ebirimu waggulu w'ekifo lgeky'okumenya.

Kyuusa obunene bwa browser yo okulaga okukyusakyusa kwa offcanvas okuddamu.
Okuddamu offcanvas

Kino kirimu ebiri munda mu .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>

Responsive offcanvas classes ziriwo emitala ku buli breakpoint.

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

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.

Offcanvas waggulu
...
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 ku ddyo
...
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 wansi
...
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>

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.

CSS

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, offcanvas kati ekozesa enkyukakyuka za CSS ez'omu kitundu ku .offcanvasfor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

  --#{$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};

Enkyukakyuka za 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;

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-topakweka offcanvas waggulu
  • .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, kimanye nti okugoba okuva ebweru offcanvas tekukwatagana na ARIA Authoring Practices Guide dialog (modal) pattern . Kino kikole ku bulabe bwo.

Okuyita mu JavaScript

Ssobozesa mu ngalo ne:

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

Eby’okulondako

Nga eby'okulonda bwe bisobola okuyisibwa nga biyita mu bikwata ku data oba JavaScript, osobola okugattako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="{value}". Kakasa nti okyusa ekika kya case eky’erinnya ly’okulonda okuva ku “ camelCase ” okudda ku “ kebab-case ” ng’oyisa eby’okulonda ng’oyita mu data attributes. Okugeza, kozesa data-bs-custom-class="beautifier"mu kifo kya data-bs-customClass="beautifier".

Okuva ku Bootstrap 5.2.0, ebitundu byonna biwagira ekintu kya data ekiterekeddwa eky'okugezesadata-bs-config ekiyinza okuteeka ensengeka y'ebitundu ennyangu ng'olunyiriri lwa JSON. Ekintu bwe kiba data-bs-config='{"delay":0, "title":123}'n'ebintu data-bs-title="456", omuwendo ogusembayo titlegujja kuba 456era ebifaananyi bya data eby'enjawulo bijja kusazaamu emiwendo egyaweebwa ku data-bs-config. Okugatta ku ekyo, ebikwata ku data ebiriwo bisobola okuteeka emiwendo gya JSON nga data-bs-delay='{"show":0,"hide":150}'.

Erinnya Okuwandiika Okukosamu Okunnyonnyola
backdrop boolean oba olunyiriristatic true Siiga backdrop ku mubiri nga offcanvas eggule. Ekirala, lambika staticku backdrop etaggalawo offcanvas nga onyigiddwa.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Engeri Okunnyonnyola
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.
hide Ekweka ekintu ekitali kya kanvaasi. Edda eri omuyita nga ekintu ekitali kya kanvaasi tekinnakwekebwa ddala (kwe kugamba nga hidden.bs.offcanvasekintu tekinnabaawo).
show Alaga ekintu ekitali kya kanvaasi. Edda eri omuyita nga elementi ya offcanvas tennalagibwa ddala (kwe kugamba nga shown.bs.offcanvasekintu tekinnabaawo).
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.offcanvasoba hidden.bs.offcanvasekintu tekinnabaawo).

Ebibaddewo

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

Ekika ky’ekintu ekibaawo Okunnyonnyola
hide.bs.offcanvas Ekintu kino kikubwa amangu ddala hideng’enkola eyitiddwa.
hidden.bs.offcanvas Ekintu kino kikubwa nga ekintu ekitali kya kanvaasi kikwekeddwa okuva eri omukozesa (kijja kulinda enkyukakyuka za CSS okuggwa).
hidePrevented.bs.offcanvas Ekintu kino kikubwa nga offcanvas eragiddwa, backdrop yaayo eri staticera okunyiga ebweru wa offcanvas kukolebwa. Ekintu era kikubwa nga ekisumuluzo ky'okutoloka kinywezeddwa era keyboardeky'okulonda ne kiteekebwa ku false.
show.bs.offcanvas Ekintu kino kikuba amangu ddala nga showenkola ya instance eyitiddwa.
shown.bs.offcanvas Ekintu kino kikubwa nga ekintu ekitali kya kanvaasi kikoleddwa okulabika eri omukozesa (kijja kulinda enkyukakyuka za CSS okuggwa). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})