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.

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

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.

...

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

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.

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

.....

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

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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

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

Toggle na esika na yango

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.

Kolongola

Kolongolama ekoki kosalema na dataattribut oyo ezali na bouton moko na kati ya offcanvas ndenge emonisami awa na nse:

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

to na bouton moko libanda ya offcanvas kosalelaka data-bs-targetndenge emonisami awa na nse:

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

Atako banzela nyonso mibale ya koboya offcanvas esungami, kobosana te ete kobwaka uta libanda ya offcanvas ekokani te na motindo ya bokeli dialogue modal WAI-ARIA . Salá yango na likama na yo moko.

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.offcanvas`to `hidden.bs.offcanvas`esalema).
`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.offcanvas`likambo 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.offcanvas`likambo 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 offcanvas associée na élément DOM, to kosala ya sika au cas où ezalaki initialisé te

Makambo oyo esalemaki

Bootstrap ya offcanvas classe e exposer mua ba événements pona ko crochet na fonctionnalité offcanvas.

Lolenge ya likambo	Ndimbola
`show.bs.offcanvas`	Evenement oyo ezo beta mbala moko tango `show`mé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 `hide`mé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...
})

Offcanvas ezali

Ndenge oyo esalaka

Bandakisa

Ba composants ya hors toile

Offcanvas ezali

Démonstration en direct

Offcanvas ezali

Botiami na esika

Likolo ya libanda ya toile

Offcanvas na droite

Offcanvas na nse

Backdrop ya sima

Coloré na défilement

Offcanvas na fond d'écran

Fond d'écran na défilement

Kozala na makoki ya kozwa yango

Sass oyo azali

Ba variables oyo ezali

Kosalela yango

Na nzela ya ba attributs ya ba données

Toggle na esika na yango

Kolongola

Na nzela ya JavaScript

Makambo oyo okoki kopona

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Makambo oyo esalemaki