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

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

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.

...

<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 offcanvas i njegova pozadina. Upotrijebite data-bs-scrollatribut za uključivanje/isključivanje <body>pomicanja i data-bs-backdropprebacivanje pozadine.

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

.....

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.offcanvas`ili ).`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.offcanvas`događ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.offcanvas`događ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 `show`se 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 `hide`poziva 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...
})

Offcanvas

Kako radi

Primjeri

Offcanvas komponente

Offcanvas

Demo uživo

Offcanvas

Plasman

Vrh od platna

Offcanvas desno

Dno od platna

Pozadina

U boji s pomicanjem

Offcanvas s pozadinom

Pozadina s pomicanjem

Pristupačnost

Sass

Varijable

Korištenje

Preko atributa podataka

Prebacivanje

Odbaciti

Preko JavaScripta

Mogućnosti

Metode

Asinkrone metode i prijelazi

Događaji