Salá koleka na makambo ya ntina Salta na navigation ya docs
in English

Offcanvas ezali

Tongela ba barres côtés oyo ebombami na kati ya projet na yo mpo na navigation, ba chariots ya kosomba, mpe mingi mosusu na mwa ba classes mpe plugin na biso ya JavaScript.

Na lokasa oyo

Ndenge oyo esalaka

Offcanvas ezali eteni ya barre ya mopanzi oyo ekoki kobongola na nzela ya JavaScript mpo ebima uta na nsɔngɛ ya lobɔkɔ ya mwasi, ya mobali to ya nse ya esika ya kotala. Ba boutons to ba ancres esalelamaka lokola ba déclencheur oyo ekangami na ba éléments spécifiques oyo ozali ko toggler, mpe databa attributs esalelamaka mpo na ko invoquer JavaScript na biso.

  • Offcanvas ekabolaka mwa ndambo ya code ya JavaScript ndenge moko na ba modal. Na makanisi, bazali mpenza ndenge moko, kasi bazali ba plugins ekeseni.
  • Ndenge moko mpe, ba variables mosusu ya Sass ya source mpo na ba styles mpe ba dimensions ya offcanvas ezwamaka na ba variables ya modal.
  • Ntango elakisami, offcanvas ezali na fond d’écran ya liboso oyo okoki kofina mpo na kobomba offcanvas.
  • Ndenge moko na ba modals, kaka offcanvas moko nde ekoki kolakisa na mbala moko.

Mitó likoló! Soki totali ndenge CSS esimbaka ba animations, okoki te kosalela marginto translatena .offcanvasélément moko. Na esika ya kosala bongo, salelá kelasi lokola eloko ya kokanga oyo ezali na boyokani te.

Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

Bandakisa

Ba composants ya hors toile

Awa na se ezali ndakisa ya offcanvas oyo elakisami na ndenge ya libela (via .showon .offcanvas). Offcanvas ezali na lisungi mpo na motó na bouton ya kokanga mpe kelasi ya nzoto oyo okoki kopona mpo na mwa ebandeli padding. Tozali kopesa likanisi ete otia mitó ya makambo ya libanda ya toile na misala ya bolongolami ntango nyonso oyo likoki ezali, to opesa mosala ya bolongolami ya polele.

Offcanvas ezali
Contenu pona offcanvas ekendaka awa. Okoki kotia kaka soki composant nionso ya Bootstrap to ba éléments personnalisés awa. 
<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>

Démonstration en direct

Salelá ba boutons oyo ezali awa na nse mpo na kolakisa mpe kobomba eleman moko ya libanda ya toile na nzela ya JavaScript oyo ezali kobongola .showkelasi na eleman moko na .offcanvaskelasi.

  • .offcanvasebombaka makambo oyo ezali na kati (ya liboso) .
  • .offcanvas.showelakisaka makambo oyo ezali na kati

Okoki kosalela lien oyo ezali na hrefattribut, to bouton oyo ezali na data-bs-targetattribut. Na makambo nyonso mibale, data-bs-toggle="offcanvas"esɛngami.

Lien na href
Offcanvas ezali
Makomi mosusu lokola esika oyo batyaka esika. Na vie ya solo okoki kozala na ba éléments oyo oponi. Lokola, makomi, bilili, baliste, etc. 
<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>

Botiami na esika

Ezali na placement par défaut te mpo na ba composants offcanvas, yango wana esengeli obakisa moko ya ba classes ya modificateur oyo ezali awa na se;

  • .offcanvas-startetie offcanvas na loboko ya mwasi ya esika ya kotala (elakisami likolo) .
  • .offcanvas-endetie offcanvas na loboko ya mobali ya esika ya kotala
  • .offcanvas-topetie offcanvas na likolo ya viewport
  • .offcanvas-bottometie offcanvas na nse ya esika ya kotala

Meká bandakisa ya likoló, ya lobɔkɔ ya mobali mpe ya nse oyo ezali awa na nse.

Likolo ya libanda ya toile
... 
<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 na droite
... 
<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 na nse
... 
<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>

Backdrop ya sima

Défilement ya <body>élément ezali désactivé tango offcanvas na fond d'écran na yango ezali komonana. Salelá data-bs-scrollattribut mpo na kobongola <body>défilement mpe data-bs-backdropmpo na kobongola fond d’écran.

Coloré na défilement

Meká kosala défilement na lokasa oyo etikali mpo na komona option oyo ezali kosala.

Offcanvas na fond d'écran

.....

Backdroped na ba défilement

Meká kosala défilement na lokasa oyo etikali mpo na komona option oyo ezali kosala.

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

Kozala na makoki ya kozwa yango

Lokola panneau hors toile ezali conceptuellement dialogue modal, sala makasi obakisa aria-labelledby="..."—kosala référence na titre ya offcanvas —na .offcanvas. Yeba que oza na besoin ya kobakisa role="dialog"te puisque tobakisi yango déjà via JavaScript.

Sass oyo azali

Ba variables oyo ezali

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

Kosalela yango

Plugin offcanvas esalelaka mwa ba classes na ba attributs pona ko gérer levage ya kilo:

  • .offcanvasebombaka makambo oyo ezali na kati
  • .offcanvas.showelakisaka makambo oyo ezali na kati
  • .offcanvas-startebombaka offcanvas na gauche
  • .offcanvas-endebombaka offcanvas na lobɔkɔ ya mobali
  • .offcanvas-bottomebombaka offcanvas na nse

Bakisa bouton ya koboya na data-bs-dismiss="offcanvas"attribut, oyo e déclencher fonctionnalité ya JavaScript. Bozala sûr ya kosalela <button>élément na yango pona comportement propre na kati ya ba appareils nionso.

Na nzela ya ba attributs ya ba données

Bakisa data-bs-toggle="offcanvas"mpe a data-bs-targetto hrefna élément mpo na ko assigner automatiquement contrôle ya élément moko hors toile. Attribut data-bs-targetendimi moponi ya CSS mpo na kosalela offcanvas na yango. Bozala sûr ya kobakisa classe offcanvasna élément offcanvas. Soki olingi ete efungwama na ndenge ya liboso, bakisá kelasi ya kobakisa show.

Na nzela ya JavaScript

Activer manuellement na:

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

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-bs-, lokola na data-bs-backdrop="".

Nkombo Lolenge Mbeba Ndimbola
backdrop boolean true Pakola fond d'écran na nzoto tango offcanvas ezali polele
keyboard boolean true Ekangaka offcanvas ntango ozali kofina fungola ya kokima
scroll boolean false Tika nzoto esala défilement tango offcanvas ezali polele

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

Active contenus na yo lokola élément hors toile. Andimi ba options moko ya option object.

Okoki kosala instance ya offcanvas na constructeur, ndakisa:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metode Ndimbola
toggle Ezali kobongola eleman moko ya libanda ya toile mpo na kolakisa to kobombama. Ezongi na mobengi yambo ete eleman ya libanda ya toile elakisama to ebombama mpenza (elingi koloba liboso ete likambo shown.bs.offcanvasto hidden.bs.offcanvasesalema).
show Ezali kolakisa eleman moko ya libanda ya toile. Ezongi na mobengi yambo ete eleman ya libanda ya toile elakisama mpenza (elingi koloba liboso ete shown.bs.offcanvaslikambo esalema).
hide Ebombaka élément moko ya libanda ya toile. Ezongi na mobengi yambo ete eleman ya libanda ya toile ebombama mpenza (elingi koloba liboso ete hidden.bs.offcanvaslikambo esalema).
getInstance Méthode statique oyo e permettre yo ozua instance offcanvas associée na élément DOM
getOrCreateInstance Méthode statique oyo e permettre yo ozua instance ya offcanvas oyo ezo sangana na élément DOM, to o créer ya sika au cas où ebandaki ko initialiser te

Makambo oyo esalemaki

Kelasi ya libanda ya toile ya Bootstrap ebimisaka mwa makambo mpo na kokanga na mosala ya libanda ya toile.

Lolenge ya likambo Ndimbola
show.bs.offcanvas Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami.
shown.bs.offcanvas Evenement oyo ezo beta tango élément offcanvas esalemi visible na usager (ekozela ba transitions ya CSS esila).
hide.bs.offcanvas Evenement oyo ebetamaka mbala moko tango hideméthode ebengami.
hidden.bs.offcanvas Evenement oyo ezo beta tango élément offcanvas ebombami na mosaleli (ekozela ba transitions ya CSS esila). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})