Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
Check
in English

Offcanvas

Ugradite skrivene bočne trake u svoj projekt za navigaciju, kolica za kupnju i više s nekoliko klasa i našim JavaScript dodatkom.

Na ovoj stranici

Kako radi

Offcanvas je komponenta bočne trake koja se putem JavaScripta može prebaciti tako da se prikazuje s lijevog, desnog, gornjeg ili donjeg ruba prozora. Gumbi ili sidra koriste se kao okidači koji su pridruženi određenim elementima koje mijenjate, a dataatributi se koriste za pozivanje našeg JavaScripta.

  • Offcanvas dijeli dio istog JavaScript koda kao modali. Konceptualno su prilično slični, ali su zasebni dodaci.
  • Slično tome, neke izvorne Sass varijable za offcanvasove stilove i dimenzije naslijeđene su od modalnih varijabli.
  • Kada se prikaže, offcanvas uključuje zadanu pozadinu na koju se može kliknuti da se sakrije offcanvas.
  • Slično modalima, samo jedan offcanvas može biti prikazan u jednom trenutku.

Glavu gore! S obzirom na to kako CSS obrađuje animacije, ne možete koristiti marginili translatena .offcanvaselementu. Umjesto toga, koristite klasu kao neovisni element za omatanje.

Učinak animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak smanjenog kretanja u našoj dokumentaciji o pristupačnosti .

Primjeri

Offcanvas komponente

Ispod je primjer izvan platna koji je prikazan prema zadanim postavkama (putem .showna .offcanvas). Offcanvas uključuje podršku za zaglavlje s gumbom za zatvaranje i neobaveznu klasu tijela za neki početni padding. Predlažemo da uključite offcanvas zaglavlja s radnjama odbacivanja kad god je to moguće ili pružite izričitu 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

Upotrijebite gumbe u nastavku za prikaz i skrivanje offcanvas elementa putem JavaScripta koji izmjenjuje .showklasu na elementu s .offcanvasklasom.

  • .offcanvasskriva sadržaj (zadano)
  • .offcanvas.showprikazuje sadržaj

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

Veza s href
Offcanvas
Neki tekst kao rezervirano mjesto. U stvarnom životu možete imati elemente koje ste odabrali. Lajk, tekst, slike, popisi 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>

Pomicanje tijela

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

Offcanvas s pomicanjem tijela

Pokušajte pomicati ostatak stranice kako biste vidjeli ovu opciju na djelu.

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

Pokušajte pomicati ostatak stranice kako biste vidjeli ovu opciju na djelu.

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

Kad je pozadina postavljena na statičnu, offcanvas se neće zatvoriti kada se klikne izvan njega.

Offcanvas
Neću zatvoriti ako klikneš 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>

Tamno van platna

Dodano u v5.2.0

Promijenite izgled offcanvases pomoću uslužnih programa kako biste ih bolje uskladili s različitim kontekstima poput tamnih navigacijskih traka. Ovdje dodajemo .text-bg-darki .offcanvasza pravilan stil s tamnim offcanvas-om .btn-close-white. .btn-closeAko unutar imate padajuće izbornike, razmislite o dodavanju .dropdown-menu-darku .dropdown-menu.

Offcanvas

Ovdje postavite offcanvas sadržaj.

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>

Uzvratni

Dodano u v5.2.0

Responzivne offcanvas klase skrivaju sadržaj izvan okvira za prikaz od navedene prijelomne točke naniže. Iznad te prijelomne točke, sadržaj unutar će se ponašati kao i obično. Na primjer, .offcanvas-lgskriva sadržaj u offcanvas ispod lgprijelomne točke, ali prikazuje sadržaj iznad lgprijelomne točke.

Promijenite veličinu preglednika kako biste prikazali responzivni offcanvas prekidač.
Responzivni 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>

Responzivne offcanvas klase dostupne su za svaku prijelomnu točku.

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

Plasman

Ne postoji zadani položaj za offcanvas komponente, pa morate dodati jednu od klasa modifikatora u nastavku.

  • .offcanvas-startpostavlja offcanvas s lijeve strane prozora (prikazano gore)
  • .offcanvas-endpostavlja offcanvas s desne strane prozora
  • .offcanvas-toppostavlja offcanvas na vrh prozora
  • .offcanvas-bottompostavlja offcanvas na dno prozora

Isprobajte gornji, desni i donji primjer u nastavku.

Vrh od platna
...
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>
Dno od platna
...
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

Budući da je panel offcanvas konceptualno modalni dijaloški okvir, svakako dodajte aria-labelledby="..."—referenciranje naslova offcanvas-a u .offcanvas. Imajte na umu da ne morate dodavati role="dialog"jer ga već dodajemo putem JavaScripta.

CSS

Varijable

Dodano u v5.2.0

Kao dio Bootstrapovog pristupa CSS varijablama koji se razvija, offcanvas sada koristi lokalne CSS varijable .offcanvasza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

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

Korištenje

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

  • .offcanvasskriva sadržaj
  • .offcanvas.showprikazuje sadržaj
  • .offcanvas-startskriva offcanvas s lijeve strane
  • .offcanvas-endskriva offcanvas s desne strane
  • .offcanvas-topskriva offcanvas na vrhu
  • .offcanvas-bottomskriva offcanvas na dnu

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

Preko atributa podataka

Prebacivanje

Dodajte data-bs-toggle="offcanvas"i data-bs-targetili hrefelementu da biste automatski dodijelili kontrolu nad jednim offcanvas elementom. Atribut data-bs-targetprihvaća CSS selektor na koji se primjenjuje offcanvas. Obavezno dodajte klasu offcanvasu offcanvas element. Ako želite da se prema zadanim postavkama otvori, dodajte dodatnu klasu show.

Odbaciti

Odbacivanje se može postići dataatributom na gumbu unutar platna kao što je prikazano u nastavku:

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

ili na gumb izvan platna koristeći data-bs-targetkako 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 za odbacivanje offcanvas-a, imajte na umu da odbacivanje izvan offcanvas-a ne odgovara dijaloškom (modalnom) uzorku Vodiča za autorske prakse ARIA . Učinite to 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))

Mogućnosti

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 vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije 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 sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane 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 Zadano Opis
backdrop booleov ili nizstatic true Nanesite pozadinu na tijelo dok je offcanvas otvoren. Alternativno, odredite staticza pozadinu koja ne zatvara platno kada se klikne.
keyboard Booleov true Zatvara offcanvas kada se pritisne tipka za izlaz.
scroll Booleov false Dopusti pomicanje tijela dok je offcanvas otvoren.

Metode

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

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

Aktivira vaš sadržaj kao element izvan platna. Prihvaća izborne opcije object.

Možete stvoriti offcanvas instancu s konstruktorom, na primjer:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
metoda Opis
getInstance Statička metoda koja vam omogućuje da dobijete offcanvas instancu povezanu s DOM elementom.
getOrCreateInstance Statička metoda koja vam omogućuje dobivanje offcanvas instance povezane s DOM elementom ili stvaranje nove u slučaju da nije inicijalizirana.
hide Skriva element izvan platna. Vraća se pozivatelju prije nego što je offcanvas element zapravo skriven (tj. prije nego što se hidden.bs.offcanvasdogađaj dogodi).
show Prikazuje element izvan platna. Vraća se pozivatelju prije nego što je offcanvas element stvarno prikazan (tj. prije nego što se shown.bs.offcanvasdogađaj dogodi).
toggle Prebacuje element izvan platna na prikazan ili skriven. Vraća se pozivatelju prije nego što se offcanvas element stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.offcanvasili ).hidden.bs.offcanvas

Događaji

Bootstrapova klasa offcanvas izlaže nekoliko događaja za spajanje na offcanvas funkcionalnost.

Vrsta događaja Opis
hide.bs.offcanvas Ovaj događaj se pokreće odmah nakon hidepoziva metode.
hidden.bs.offcanvas Ovaj se događaj pokreće kada je offcanvas element skriven od korisnika (pričekat će da se CSS prijelazi završe).
hidePrevented.bs.offcanvas Ovaj se događaj pokreće kada se prikaže offcanvas, njegova pozadina je statici klik izvan offcanvasa se izvede. 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 aktivira se odmah kada showse pozove metoda instance.
shown.bs.offcanvas Ovaj se događaj pokreće kada je element offcanvas učinjen vidljivim korisniku (pričekat će da se CSS prijelazi završe). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})