Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
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, ya likoló, 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.
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>

Démonstration en direct

Salelá ba boutons oyo ezali awa na nse mpo na kolakisa mpe kobomba eloko moko oyo ezali na toile te na nzela ya JavaScript oyo ezali kobongola .showkelasi na eloko moko oyo ezali 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.
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>

Kosala défilement ya nzoto

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 kofungola <body>défilement.

Offcanvas na défilement ya nzoto

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

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>

Défilement ya nzoto mpe fond d’écran

Okoki mpe kofungola <body>défilement na fond d’écran oyo ezali komonana.

Backdrop na défilement

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

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>

Fond d'écran statique

Ntango fond d’écran etiamaki na statique, offcanvas ekokangama te ntango ozali kofina libanda na yango.

Offcanvas ezali
Nako kanga te soki o cliquer libanda na ngai.
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 ya molili

Ebakisami na v5.2.0

Bobongola ndenge ya komonana ya ba offcanvases na ba utilitaires mpo na kokokanisa yango malamu na ba contextes différents lokola ba navbars ya molili. Awa tobakisi .text-bg-darkna .offcanvasmpe .btn-close-whitena .btn-closempo na kosala styling malamu na offcanvas ya molili. Soki ozali na ba dropdowns na kati, kanisá mpe kobakisa .dropdown-menu-darkna .dropdown-menu.

Offcanvas ezali

Botia ba contenus offcanvas awa.

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>

Koyanola

Ebakisami na v5.2.0

Ba classes ya offcanvas oyo ezo répondre ebombaka ba contenus libanda ya port de vue depuis point de rupture oyo elakisami pe na se. Likolo ya esika wana ya kobuka, makambo oyo ezali na kati ekozala na bizaleli lokola momeseno. Ndakisa, .offcanvas-lgebombaka makambo na kati ya offcanvas na nse ya esika ya lgkobuka, kasi elakisaka makambo oyo ezali likoló ya esika ya lgkobuka.

Bobongola bonene ya navigateur na yo mpo na kolakisa toggle ya offcanvas oyo ezali koyanola.
Offcanvas oyo ezo répondre

Oyo ezali makambo oyo ezali na kati ya .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>

Ba classes ya offcanvas oyo ezo répondre ezali na ngambo mosusu pona point de rupture moko na moko.

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

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
...
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 na droite
...
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 na nse
...
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>

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.

CSS

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, offcanvas esalela sikoyo ba variables CSS locales on .offcanvasmpo na personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

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

Ba variables ya 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;

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-topebombaka offcanvas na likolo
  • .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 dialogue (modal) ya ARIA Authoring Practices Guide . Salá yango na likama na yo moko.

Na nzela ya JavaScript

Activer manuellement na:

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

Makambo oyo okoki kopona

Lokola ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript, okoki kobakisa kombo ya option na data-bs-, lokola na data-bs-animation="{value}". Sala makasi o changer type ya cas ya kombo ya option depuis “ camelCase ” na “ kebab-case ” tango ozali koleka ba options via ba attributs ya ba données. Na ndakisa, salelá data-bs-custom-class="beautifier"na esika ya data-bs-customClass="beautifier".

Kobanda na Bootstrap 5.2.0, ba composants nionso esungaka attribut ya ba données réservées expérimentalesdata-bs-config oyo ekoki ko louer configuration ya composant simple lokola chaîne JSON. Tango élément moko ezali data-bs-config='{"delay":0, "title":123}'na na ba data-bs-title="456"attributs, valeur ya suka titleekozala 456mpe ba attributs ya ba données separates eko overrider ba valeurs oyo epesami na data-bs-config. En plus, ba attributs ya ba données oyo ezali ezali capable ya ko louer ba valeurs JSON lokola data-bs-delay='{"show":0,"hide":150}'.

Nkombo Lolenge Mbeba Ndimbola
backdrop boolean to na molongostatic true Pakola fond d'écran na nzoto tango offcanvas ezali polele. Na lolenge mosusu, lakisa staticmpo na fond d’écran oyo ekanga te offcanvas ntango ozali kofina.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metode Ndimbola
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.
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).
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).
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).

Makambo oyo esalemaki

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

Lolenge ya likambo Ndimbola
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).
hidePrevented.bs.offcanvas Evenement oyo ezo beta tango offcanvas elakisami, fond na yango ezali staticpe clic libanda ya offcanvas esalemi. Evenement ezo beta pe tango touche ya escape ezo finga pe keyboardoption etie na false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})