Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Offcanvas

V svoj projekt vgradite skrite stranske vrstice za navigacijo, nakupovalne vozičke in drugo z nekaj razredi in našim vtičnikom JavaScript.

Na tej strani

Kako deluje

Offcanvas je komponenta stranske vrstice, ki jo je mogoče preklopiti prek JavaScripta, da se prikaže z levega, desnega ali spodnjega roba vidnega polja. Gumbi ali sidra se uporabljajo kot sprožilci, ki so pripeti na določene elemente, ki jih preklapljate, dataatributi pa se uporabljajo za priklic našega JavaScripta.

  • Offcanvas ima nekaj iste kode JavaScript kot modali. Konceptualno sta si precej podobna, vendar sta ločena vtičnika.
  • Podobno so nekatere izvorne spremenljivke Sass za sloge in dimenzije offcanvas podedovane iz modalnih spremenljivk.
  • Ko je offcanvas prikazan, vključuje privzeto ozadje, ki ga lahko kliknete, da skrijete offcanvas.
  • Podobno kot pri modalih je lahko naenkrat prikazan samo en offcanvas.

Glavo pokonci! Glede na to, kako CSS obravnava animacije, ne morete uporabiti marginali translatena .offcanvaselementu. Namesto tega uporabite razred kot neodvisen ovojni element.

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Primeri

Komponente Offcanvas

Spodaj je primer zunaj platna, ki je privzeto prikazan (prek .showna .offcanvas). Offcanvas vključuje podporo za glavo z gumbom za zapiranje in izbirni razred telesa za nekatere začetnice padding. Predlagamo, da glave offcanvas vključite z dejanji opustitve, kadar koli je to mogoče, ali zagotovite izrecno dejanje opustitve.

Offcanvas
Sem gre vsebina za offcanvas. Tukaj lahko postavite skoraj katero koli komponento Bootstrap ali elemente po meri. 
<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>

Demo v živo

Uporabite spodnje gumbe za prikaz in skrivanje elementa offcanvas prek JavaScripta, ki preklopi .showrazred na elementu z .offcanvasrazredom.

  • .offcanvasskrije vsebino (privzeto)
  • .offcanvas.showprikazuje vsebino

Uporabite lahko povezavo z hrefatributom ali gumb z data-bs-targetatributom. V obeh primerih data-bs-toggle="offcanvas"je potrebno.

Povezava z href
Offcanvas
Nekaj ​​besedila kot ograda. V resničnem življenju lahko imate elemente, ki ste jih izbrali. Všečkajte, besedilo, slike, sezname itd. 
<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>

Umestitev

Za komponente offcanvas ni privzete postavitve, zato morate dodati enega od spodnjih razredov modifikatorjev;

  • .offcanvas-startpostavi offcanvas na levo od vidnega polja (prikazano zgoraj)
  • .offcanvas-endpostavi offcanvas na desno stran vidnega polja
  • .offcanvas-toppostavi offcanvas na vrh vidnega polja
  • .offcanvas-bottompostavi offcanvas na dno vidnega polja

Preizkusite zgornje, desne in spodnje primere spodaj.

Top iz platna
... 
<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 desno
... 
<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>
Dno iz platna
... 
<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>

Ozadje

Drsenje po <body>elementu je onemogočeno, ko sta vidna izven platna in njegovo ozadje. Uporabite data-bs-scrollatribut za preklop <body>drsenja in data-bs-backdroppreklop ozadja.

Barvno s pomikanjem

Poskusite se pomakniti po preostalem delu strani, da vidite to možnost v akciji.

Offcanvas z ozadjem

.....

Ozadje z drsenjem

Poskusite se pomakniti po preostalem delu strani, da vidite to možnost v akciji.

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

Dostopnost

Ker je plošča offcanvas konceptualno modalno pogovorno okno, ne pozabite dodati aria-labelledby="..."—ki se nanaša na naslov offcanvas—v .offcanvas. Upoštevajte, da vam ni treba dodajati, role="dialog"saj ga že dodajamo prek JavaScripta.

Sass

Spremenljivke

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

Uporaba

Vtičnik offcanvas uporablja nekaj razredov in atributov za obvladovanje težkega dela:

  • .offcanvasskriva vsebino
  • .offcanvas.showprikazuje vsebino
  • .offcanvas-startskrije offcanvas na levi
  • .offcanvas-endskrije offcanvas na desni
  • .offcanvas-bottomskrije offcanvas na dnu

Dodajte gumb za opustitev z data-bs-dismiss="offcanvas"atributom, ki sproži funkcijo JavaScript. Ne pozabite uporabiti <button>elementa z njim za pravilno delovanje v vseh napravah.

Preko podatkovnih atributov

Preklopi

Dodajte data-bs-toggle="offcanvas"in data-bs-targetali hrefelementu, da samodejno dodelite nadzor nad enim elementom offcanvas. Atribut data-bs-targetsprejme izbirnik CSS za uporabo offcanvas. Ne pozabite dodati razreda offcanvaselementu offcanvas. Če želite, da se privzeto odpre, dodajte dodatni razred show.

Odpusti

Zavrnitev je mogoče doseči z dataatributom na gumbu znotraj platna , kot je prikazano spodaj:

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

ali na gumbu zunaj platna z uporabo, data-bs-targetkot je prikazano spodaj:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Čeprav sta podprta oba načina za opustitev offcanvas, ne pozabite, da se opustitev zunaj offcanvas ne ujema z vzorcem oblikovanja modalnega pogovornega okna WAI-ARIA . To storite na lastno odgovornost.

Prek JavaScripta

Omogoči ročno z:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-, kot v data-bs-backdrop="".

Ime Vrsta Privzeto Opis
backdrop logično true Nanesite ozadje na telo, medtem ko je offcanvas odprt
keyboard logično true Zapre offcanvas, ko pritisnete tipko za izhod
scroll logično false Dovoli drsenje telesa, ko je offcanvas odprt

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

Aktivira vašo vsebino kot element offcanvas. Sprejema neobvezne možnosti object.

Primerek offcanvas lahko ustvarite s konstruktorjem, na primer:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metoda Opis
toggle Preklopi element zunaj platna na prikazan ali skrit. Vrne se klicatelju, preden je element offcanvas dejansko prikazan ali skrit (tj. preden pride do dogodka shown.bs.offcanvasali ).hidden.bs.offcanvas
show Prikazuje element zunaj platna. Vrne se klicatelju, preden je bil element offcanvas dejansko prikazan (tj. preden shown.bs.offcanvaspride do dogodka).
hide Skrije element zunaj platna. Vrne se klicatelju, preden je bil element offcanvas dejansko skrit (tj. preden hidden.bs.offcanvaspride do dogodka).
getInstance Statična metoda, ki vam omogoča pridobitev primerka offcanvas, povezanega z elementom DOM
getOrCreateInstance Statična metoda, ki vam omogoča pridobitev primerka offcanvas, povezanega z elementom DOM, ali ustvarjanje novega, če ni bil inicializiran

Dogodki

Bootstrapov razred offcanvas izpostavlja nekaj dogodkov za priključitev na funkcionalnost offcanvas.

Vrsta dogodka Opis
show.bs.offcanvas Ta dogodek se sproži takoj, ko showse pokliče metoda primerka.
shown.bs.offcanvas Ta dogodek se sproži, ko je element offcanvas viden uporabniku (počakal bo na dokončanje prehodov CSS).
hide.bs.offcanvas Ta dogodek se sproži takoj, ko hideje bila metoda poklicana.
hidden.bs.offcanvas Ta dogodek se sproži, ko je bil element offcanvas skrit pred uporabnikom (bo počakal, da se zaključijo prehodi CSS). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})