Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
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.

Kako radi

Offcanvas je komponenta bočne trake koja se putem JavaScripta može uključiti i prikazati s lijevog, desnog ili donjeg ruba okvira za prikaz. 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.
<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

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.
<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 zadani položaj za offcanvas komponente, tako da 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
...
<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 od 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>

Pozadina

Pomicanje <body>elementa je onemogućeno kada su vidljivi offcanvas i njegova pozadina. Upotrijebite data-bs-scrollatribut za uključivanje/isključivanje <body>pomicanja i data-bs-backdropprebacivanje pozadine.

U boji s pomicanjem

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

Offcanvas s pozadinom

.....

Pozadina s pomicanjem

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

<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

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.

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-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 uzorku dizajna modalnog dijaloškog okvira WAI-ARIA . Učinite to 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)
})

Mogućnosti

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 Zadano Opis
backdrop Booleov true Nanesite pozadinu na tijelo dok je offcanvas otvoren
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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
metoda Opis
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
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).
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).
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

Događaji

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

Vrsta događaja Opis
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).
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).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})