Offcanvas

Ugradite skrivene bočne trake u svoj projekat za navigaciju, kolica za kupovinu i još mnogo toga uz nekoliko klasa i naš JavaScript dodatak.

Na ovoj stranici

Kako radi

Offcanvas je komponenta bočne trake koja se može prebaciti preko JavaScripta da bi se pojavila s lijeve, desne ili donje ivice prozora za prikaz. Dugmad ili sidra se koriste kao okidači koji su pričvršćeni za određene elemente koje prebacujete, a dataatributi se koriste za pozivanje našeg JavaScripta.

Offcanvas dijeli dio istog JavaScript koda kao i modali. Konceptualno su prilično slični, ali su odvojeni dodaci.
Slično, neke izvorne Sass varijable za stilove i dimenzije offcanvas-a su naslijeđene od modalnih varijabli.
Kada je prikazano, offcanvas uključuje zadanu pozadinu na koju možete kliknuti da biste sakrili offcanvas.
Slično modalima, istovremeno se može prikazati samo jedno van platna.

Glavu gore! S obzirom na to kako CSS rukuje animacijama, ne možete koristiti marginili translatena .offcanvaselementu. Umjesto toga, koristite klasu kao nezavisni element omota.

Efekt animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak o smanjenom pokretu u našoj dokumentaciji o pristupačnosti .

Primjeri

Komponente van platna

Ispod je primjer van platna koji je prikazan po defaultu (preko .showna .offcanvas). Offcanvas uključuje podršku za zaglavlje s dugmetom za zatvaranje i opcionu klasu tijela za neke početne padding. Predlažemo da uključite zaglavlja izvan platna s radnjama odbacivanja kad god je to moguće, ili da navedete eksplicitnu radnju odbacivanja.

Sadržaj za offcanvas ide ovdje. Ovdje možete postaviti bilo koju Bootstrap komponentu ili prilagođene elemente.

<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 uživo

Koristite dugmad ispod da prikažete i sakrijete element van platna putem JavaScripta koji uključuje .showklasu na elementu sa .offcanvasklasom.

.offcanvassakriva sadržaj (zadano)
.offcanvas.showprikazuje sadržaj

Možete koristiti vezu sa hrefatributom ili dugme sa data-bs-targetatributom. U oba slučaja data-bs-toggle="offcanvas"je potrebno.

Link sa href

Neki tekst kao čuvar mjesta. U stvarnom životu možete imati elemente koje ste odabrali. Lajkovi, tekst, slike, liste 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>

Plasman

Ne postoji podrazumevani položaj za komponente van platna, tako da morate dodati jednu od klasa modifikatora ispod;

.offcanvas-startpostavlja van platna lijevo od okvira za prikaz (prikazano iznad)
.offcanvas-endpostavlja van platna na desnoj strani prozora za prikaz
.offcanvas-toppostavlja offcanvas na vrh prozora za prikaz
.offcanvas-bottompostavlja offcanvas na dno prozora za prikaz

Isprobajte gornji, desni i donji primjer u nastavku.

...

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

Pozadina

Pomicanje <body>elementa je onemogućeno kada su vidljivi vanplatno i njegova pozadina. Koristite data-bs-scrollatribut da biste uključili <body>skrolovanje i data-bs-backdropprebacili pozadinu.

Pokušajte skrolovati ostatak stranice da vidite ovu opciju u akciji.

.....

Pokušajte skrolovati ostatak stranice da vidite ovu opciju u 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>

Pristupačnost

Pošto je panel van platna konceptualno modalni dijalog, obavezno dodajte aria-labelledby="..."—pozivajući se na naslov van platna—u .offcanvas. Imajte na umu da ne morate dodavati role="dialog"jer ga već dodajemo putem JavaScripta.

Sass

Varijable

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

Upotreba

Dodatak offcanvas koristi nekoliko klasa i atributa za rukovanje teškim dizanjima:

.offcanvassakriva sadržaj
.offcanvas.showprikazuje sadržaj
.offcanvas-startsakriva vanplatno na lijevoj strani
.offcanvas-endsakriva offcanvas sa desne strane
.offcanvas-bottomskriva vanplatno na dnu

Dodajte dugme za odbacivanje sa data-bs-dismiss="offcanvas"atributom, koji pokreće JavaScript funkcionalnost. Obavezno koristite <button>element s njim za pravilno ponašanje na svim uređajima.

Preko atributa podataka

Prebaci

Dodajte data-bs-toggle="offcanvas"i a data-bs-targetili hrefelementu da automatski dodijelite kontrolu nad jednim elementom van platna. Atribut data-bs-targetprihvaća CSS selektor za primjenu offcanvasa na. Obavezno dodajte klasu offcanvaselementu offcanvas. Ako želite da se zadano otvori, dodajte dodatnu klasu show.

Odbaci

Otpuštanje se može postići pomoću dataatributa na dugmetu unutar platna kao što je prikazano u nastavku:

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

ili na dugme izvan platna koristeći data-bs-targetkao što je prikazano u nastavku:

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

Iako su podržana oba načina odbacivanja izvan platna, imajte na umu da odbacivanje izvan platna ne odgovara WAI-ARIA modalnom obrascu dizajna dijaloga . Uradite ovo na vlastitu odgovornost.

Preko JavaScripta

Omogućite ručno pomoću:

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

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka, dodajte naziv opcije u data-bs-, kao u data-bs-backdrop="".

Ime	Tip	Default	Opis
`backdrop`	boolean	`true`	Primijenite pozadinu na tijelo dok je van platna otvoreno
`keyboard`	boolean	`true`	Zatvara izvan platna kada se pritisne tipka za izlaz
`scroll`	boolean	`false`	Dozvolite pomicanje tijela dok je van platna otvoreno

Metode

Asinhrone metode i prijelazi

Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija .

Aktivira vaš sadržaj kao element van platna. Prihvata opcione opcije object.

Možete kreirati instancu van platna pomoću konstruktora, na primjer:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Metoda	Opis
`toggle`	Prebacuje element van platna na prikazan ili skriven. Vraća se pozivaocu prije nego što je element offcanvas zapravo prikazan ili skriven (tj. prije nego što se dogodi događaj `shown.bs.offcanvas`ili ).`hidden.bs.offcanvas`
`show`	Prikazuje element van platna. Vraća pozivaocu prije nego što je element offcanvas stvarno prikazan (tj. prije nego što se `shown.bs.offcanvas`događaj dogodi).
`hide`	Sakriva element van platna. Vraća se pozivaocu prije nego što je element offcanvas zapravo skriven (tj. prije nego što se `hidden.bs.offcanvas`događaj dogodi).
`getInstance`	Statička metoda koja vam omogućava da dobijete instancu offcanvas povezana sa DOM elementom
`getOrCreateInstance`	Statička metoda koja vam omogućava da dobijete instancu offcanvas povezana sa DOM elementom ili kreirate novu u slučaju da nije inicijalizirana

Događaji

Bootstrap-ova offcanvas klasa izlaže nekoliko događaja za spajanje na offcanvas funkcionalnost.

Vrsta događaja	Opis
`show.bs.offcanvas`	Ovaj događaj se aktivira odmah kada `show`se pozove metoda instance.
`shown.bs.offcanvas`	Ovaj događaj se pokreće kada element van platna postane vidljiv korisniku (će čekati da se CSS tranzicije dovrše).
`hide.bs.offcanvas`	Ovaj događaj se pokreće odmah kada je `hide`metoda pozvana.
`hidden.bs.offcanvas`	Ovaj događaj se pokreće kada je element offcanvas skriven od korisnika (će čekati da se CSS prijelazi dovrše).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Kako radi

Primjeri

Komponente van platna

Offcanvas

Demo uživo

Offcanvas

Plasman

Offcanvas top

Offcanvas desno

Offcanvas bottom

Pozadina

Obojeno pomicanjem

Vanplatno sa pozadinom

Pozadina sa pomicanjem

Pristupačnost

Sass

Varijable

Upotreba

Preko atributa podataka

Prebaci

Odbaci

Preko JavaScripta

Opcije

Metode

Asinhrone metode i prijelazi

Događaji