Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Ɔfkanvas

Bil saydbar dɛn we ayd insay yu prɔjek fɔ nevigishɔn, shopin kat, ɛn ɔda tin dɛn wit sɔm klas dɛn ɛn wi JavaSkript plɔgin.

Na dis pej

Aw i de wok

Offcanvas na wan saydba kɔmpɔnɛnt we yu kin chenj bay JavaSkript fɔ apia frɔm di lɛft, rayt, ɔ dɔŋ edj na di viupɔt. Dɛn kin yuz bɔtin ɔ anka dɛn as trig dɛn we dɛn kin ataya to sɔm patikyula tin dɛn we yu kin tɔgl, ɛn datadɛn kin yuz atribyut dɛn fɔ kɔl wi JavaSkript.

  • Offcanvas de sheb sɔm pan di sem JavaSkript kɔd dɛn lɛk modal dɛn. Fɔ kɔnsɛpt, dɛn rili fiba, bɔt dɛn na difrɛn plɔgin dɛn.
  • Semweso, sɔm sɔs Sass vɛriɔbul dɛn fɔ ɔfkanvas in stayl ɛn dimɛnshɔn dɛn de inhɛrit frɔm di modal in vɛriɔbul dɛn.
  • We dɛn sho am, ɔfkanvas gɛt difɔlt bakdrop we yu kin klik fɔ ayd di ɔfkanvas.
  • Semweso lɛk modals, na wan ɔfkanvas nɔmɔ dɛn kin sho wan tɛm.

Hed dɛn de ɔp! Given aw CSS de handle animashɔn, yu nɔ go ebul fɔ yuz marginɔ translatepan wan .offcanvasɛlimɛnt. Bifo dat, yuz di klas as indipɛndɛnt wrap ɛlimɛnt.

Di animashɔn ifɛkt fɔ dis kɔmpɔnɛnt de dipen pan di prefers-reduced-motionmidia kwɛstyɔn. Si di ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .

Ɛgzampul dɛn

Di komponent dɛn we de na di ɔfkanvas

Dis dɔŋ ya na wan ɔfkanvas ɛgzampul we dɛn sho bay difɔlt (via .showon .offcanvas). Offcanvas inklud sɔpɔt fɔ wan hεda wit wan klos bɔtin ɛn wan opshɔnal bɔdi klas fɔ sɔm initial padding. Wi de advays yu fɔ put ɔfkanvas hεda dɛn wit dismis akshɔn ɛnitɛm we i pɔsibul, ɔ gi wan klia dismis akshɔn.

Ɔfkanvas
Kontinyu fɔ di ɔfkanvas de go ya. Yu kin put jɔs lɛk ɛni Bootstrap kɔmpɔnɛnt ɔ kɔstɔm ɛlimɛnt dɛn ya. 
<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>

Layf dɛmo

Yuz di bɔtin dɛn we de dɔŋ fɔ sho ɛn ayd wan ɔfkanvas ɛlimɛnt tru JavaSkript we de tɔgl di .showklas pan wan ɛlimɛnt wit di .offcanvasklas.

  • .offcanvasde ayd di tin dɛn we de insay (difɔlt) .
  • .offcanvas.showsho wetin de insay

Yu kin yuz wan link wit di hrefatribyut, ɔ wan bɔtin wit di data-bs-targetatribyut. Insay dɛn tu kes ya, data-bs-toggle="offcanvas"dɛn nid fɔ du di.

Link wit href
Ɔfkanvas
Sɔm tɛks as pleshɔlda. In rial layf yu kin gɛt di ɛlimɛnt dɛn we yu dɔn pik. Lɛk, tɛks, pikchɔ dɛn, list dɛn, ɛn ɔda tin dɛn. 
<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>

Di ples we dɛn fɔ put am

No difɔlt ples nɔ de fɔ ɔfkanvas kɔmpɔnɛnt dɛn, so yu fɔ ad wan pan di modifya klas dɛn we de dɔŋ ya;

  • .offcanvas-startde put ɔfkanvas na di lɛft say na di say usay dɛn de si di tin dɛn (we dɛn sho ɔp)
  • .offcanvas-endde put ɔfkanvas na di rayt say na di say usay dɛn de si di pikchɔ
  • .offcanvas-topde put ɔfkanvas na di tap na di say we dɛn de si di pikchɔ
  • .offcanvas-bottomde put ɔfkanvas na di bɔt ɔf di viupɔt

Tray di ɛgzampul dɛn we de ɔp, rayt, ɛn dɔŋ dɔŋ ya.

Ɔfkanvas na di tɔp
... 
<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>
Offkanvas rayt
... 
<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>
Offkanvas na di bottom
... 
<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>

Bakgrɔn fɔ di pikchɔ

Skrol di <body>elemɛnt nɔ de wok we yu si wan ɔfkanvas ɛn in bakdrop. Yuz di data-bs-scrollatribyut fɔ chenj di <body>skrol ɛn data-bs-backdropfɔ chenj di bakdrop.

Kɔlɔ wit skrol

Tray fɔ skrol di ɔda pat dɛn na di pej fɔ si dis opshɔn de wok.

Offcanvas wit bakdrop

.....

Bakgrɔn wit skrol

Tray fɔ skrol di ɔda pat dɛn na di pej fɔ si dis opshɔn de wok.

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

Di we aw pɔsin kin ebul fɔ go de

Bikɔs di ɔfkanvas panɛl na kɔnsɛptwal wan modal dayalɔg, mek shɔ se yu ad aria-labelledby="..."—rɛfrɛns di ɔfkanvas taytul—to .offcanvas. Notis se yu nɔ nid fɔ ad role="dialog"bikɔs wi dɔn ɔlrɛdi ad am bay JavaSkript.

Sass we bin de

Di tin dɛn we kin chenj

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

Aw fɔ yuz am

Di ɔfkanvas plɔgin de yuz sɔm klas ɛn atribyut dɛn fɔ handle di ebi liftin:

  • .offcanvasde ayd di tin dɛn we de insay
  • .offcanvas.showsho di tin dɛn we de insay
  • .offcanvas-startayd di ɔfkanvas na di lɛft
  • .offcanvas-endayd di ɔfkanvas na di rayt say
  • .offcanvas-bottomde ayd di ɔfkanvas we de dɔŋ

Ad wan dismis bɔtin wit di data-bs-dismiss="offcanvas"atribyut, we de mek di JavaSkript wok. Mek shɔ se yu yuz di <button>ɛlimɛnt wit am fɔ biev fayn akɔdin to ɔl di divays dɛn.

Via data atribyut dɛn

Toggle fɔ di wan dɛn we de

Ad data-bs-toggle="offcanvas"ɛn wan data-bs-targetɔ hrefto di ɛlimɛnt fɔ ɔtomɛtik asaynd kɔntrol fɔ wan ɔfkanvas ɛlimɛnt. Di data-bs-targetatribyut de aksept wan CSS sɛlɛktɔ fɔ aplay di ɔfkanvas to. Mek shɔ se yu ad di klas offcanvasto di ɔfkanvas ɛlimɛnt. If yu want fɔ mek i opin difɔlt, ad di ɔda klas show.

Pul

Yu kin ebul fɔ dismis wit di dataatribyut we de na wan bɔtin insay di ɔfkanvas lɛk aw dɛn sho dɔŋ ya:

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

ɔ pan wan bɔtin we de na do na di ɔfkanvas yuz di data-bs-targetlɛk aw dɛn sho dɔŋ ya:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Pan ɔl we dɛn sɔpɔt ɔl tu di we dɛn fɔ dismis wan ɔfkanvas, mɛmba se fɔ dismis frɔm ɔdasay wan ɔfkanvas nɔ de mach di WAI-ARIA modal dayalɔg dizayn patɛn . Du dis pan yu yon risk.

Yu kin yuz JavaSkript fɔ yuz am

Enable manually wit:

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

Di tin dɛn we yu kin pik fɔ du

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-bs-, lɛk insay data-bs-backdrop="".

Nem Kayn Balans Tɔk bɔt
backdrop boolean we dɛn kɔl true Put bakdrop pan bɔdi we ɔfkanvas opin
keyboard boolean we dɛn kɔl true Klos di ɔfkanvas we yu prɛs di ɛspɛk ki
scroll boolean we dɛn kɔl false Alaw fɔ skrol di bɔdi we di ɔfkanvas opin

Di we aw dɛn de du am

Asynchronous mεtכd dεm εn transishכn dεm

Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .

Si wi JavaSkript dɔkyumentri fɔ no mɔ .

Aktiv yu kɔntinyu as ɔfkanvas ɛlimɛnt. Aksept wan opshɔnal opshɔn dɛn object.

Yu kin mek wan ɔfkanvas instans wit di kɔnstrɔkta, fɔ ɛgzampul:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
We Tɔk bɔt
toggle Toggles wan ɔfkanvas ɛlimɛnt fɔ sho ɔ ayd. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili sho ɔ ayd (dat na bifo di shown.bs.offcanvasɔ hidden.bs.offcanvasivin apin).
show Sho wan ɔfkanvas ɛlimɛnt. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili sho (dat na bifo di shown.bs.offcanvasivin apin).
hide Ayd wan ɔfkanvas ɛlimɛnt. Ritɔn to di pɔsin we kɔl bifo di ɔfkanvas ɛlimɛnt dɔn rili ayd (dat na bifo di hidden.bs.offcanvasivin apin).
getInstance Statik we de alaw yu fɔ gɛt di ɔfkanvas instans we gɛt fɔ du wit wan DOM ɛlimɛnt
getOrCreateInstance Statik we de alaw yu fɔ gɛt di ɔfkanvas instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am

Di tin dɛn we kin apin

Bootstrap in ɔfkanvas klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay ɔfkanvas funkshɔnaliti.

Di kayn tin we apin Tɔk bɔt
show.bs.offcanvas Dis ivent de faya wantɛm wantɛm we dɛn kɔl di showinstans mɛtɔd.
shown.bs.offcanvas Dis ivent de faya we dɛn dɔn mek wan ɔfkanvas ɛlimɛnt fɔ si to di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn).
hide.bs.offcanvas Dis ivent de faya wantɛm wantɛm we hidedɛn dɔn kɔl di we aw dɛn de du am.
hidden.bs.offcanvas Dis ivent de faya we dɛn dɔn ayd wan ɔfkanvas ɛlimɛnt frɔm di yuza (go wet fɔ mek CSS transishɔn dɛn dɔn). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})