Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
Check
in English

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, gornje 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.

Offcanvas
Sadržaj za offcanvas ide ovdje. Ovdje možete postaviti bilo koju Bootstrap komponentu ili prilagođene elemente.
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>

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

Pomeranje tela

Pomicanje <body>elementa je onemogućeno kada su vidljivi vanplatno i njegova pozadina. Koristite data-bs-scrollatribut da omogućite <body>pomicanje.

Van platna s pomicanjem tijela

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

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>

Pomicanje tijela i pozadina

Također možete omogućiti <body>pomicanje s vidljivom pozadinom.

Pozadina sa pomicanjem

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

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>

Statička pozadina

Kada je pozadina postavljena na statičnu, van platna se neće zatvoriti kada kliknete izvan njega.

Offcanvas
Neću zatvoriti ako kliknete izvan mene.
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>

Dark offcanvas

Dodato u v5.2.0

Promijenite izgled vanplatna pomoću uslužnih programa kako biste ih bolje uskladili s različitim kontekstima kao što su tamne navigacijske trake. Ovdje dodajemo i .text-bg-darkdo za pravilno stiliziranje tamnog platna. Ako imate padajuće liste unutar, razmislite o dodavanju u ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Offcanvas

Ovdje postavite sadržaj van platna.

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>

Responsive

Dodato u v5.2.0

Odazivne klase van platna sakrivaju sadržaj izvan okvira za prikaz od određene tačke prekida i naniže. Iznad te tačke prekida, sadržaj unutar će se ponašati kao i obično. Na primjer, .offcanvas-lgsakriva sadržaj izvan platna ispod lgtačke prekida, ali prikazuje sadržaj iznad lgtačke prekida.

Promenite veličinu vašeg pretraživača da biste prikazali reaktivni prekidač van platna.
Responsive offcanvas

Ovo je sadržaj unutar .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>

Odazivne klase van platna dostupne su za svaku tačku prekida.

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

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.

Offcanvas top
...
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 desno
...
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 bottom
...
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>

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.

CSS

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, offcanvas sada koristi lokalne CSS varijable uključene .offcanvasza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

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

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

  • .offcanvassakriva sadržaj
  • .offcanvas.showprikazuje sadržaj
  • .offcanvas-startsakriva vanplatno na lijevoj strani
  • .offcanvas-endsakriva offcanvas sa desne strane
  • .offcanvas-topskriva van platna na vrhu
  • .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 vanplatna 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 oba načina odbacivanja van platna podržana, imajte na umu da odbacivanje izvan platna ne odgovara dijaloškom (modalnom) uzorku ARIA vodiča za autorske prakse . Uradite ovo na vlastitu odgovornost.

Preko JavaScripta

Omogućite ručno pomoću:

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

Opcije

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite tip slučaja naziva opcije iz “ camelCase ” u “ kebab-case ” prilikom prosljeđivanja opcija putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjesto data-bs-customClass="beautifier".

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može smjestiti jednostavnu konfiguraciju komponente kao JSON string. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456i odvojeni atributi podataka će nadjačati vrijednosti date na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Ime Tip Default Opis
backdrop boolean ili stringstatic true Primijenite pozadinu na tijelo dok je van platna otvoreno. Alternativno, navedite staticza pozadinu koja ne zatvara offcanvas kada se klikne.
keyboard boolean true Zatvara offcanvas kada se pritisne tipka escape.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metoda Opis
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.
hide Sakriva element van platna. Vraća se pozivaocu prije nego što je element offcanvas zapravo skriven (tj. prije nego što se hidden.bs.offcanvasdogađaj dogodi).
show Prikazuje element van platna. Vraća pozivaocu prije nego što je element offcanvas stvarno prikazan (tj. prije nego što se shown.bs.offcanvasdogađaj dogodi).
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.offcanvasili ).hidden.bs.offcanvas

Događaji

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

Vrsta događaja Opis
hide.bs.offcanvas Ovaj događaj se pokreće odmah kada je hidemetoda pozvana.
hidden.bs.offcanvas Ovaj događaj se pokreće kada je element van platna skriven od korisnika (će čekati da se CSS tranzicije dovrše).
hidePrevented.bs.offcanvas Ovaj događaj se pokreće kada je izvan platna prikazano, njegova pozadina statici kada se izvrši klik izvan platna. Događaj se također pokreće kada se pritisne tipka za izlaz i keyboardopcija je postavljena na false.
show.bs.offcanvas Ovaj događaj se aktivira odmah kada showse pozove metoda instance.
shown.bs.offcanvas Ovaj događaj se pokreće kada se element van platna učini vidljivim korisniku (će pričekati da se CSS tranzicije dovrše). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})