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 data
atributi 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 margin
ili translate
na .offcanvas
elementu. Umjesto toga, koristite klasu kao neovisni element za omatanje.
prefers-reduced-motion
medijskom 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 .show
na .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
<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 .show
klasu na elementu s .offcanvas
klasom.
.offcanvas
skriva sadržaj (zadano).offcanvas.show
prikazuje sadržaj
Možete koristiti vezu s href
atributom ili gumb s data-bs-target
atributom. U oba slučaja data-bs-toggle="offcanvas"
potrebno je.
Offcanvas
<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-start
postavlja offcanvas s lijeve strane prozora (prikazano gore).offcanvas-end
postavlja offcanvas s desne strane prozora.offcanvas-top
postavlja offcanvas na vrh prozora.offcanvas-bottom
postavlja 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-scroll
atribut za uključivanje/isključivanje <body>
pomicanja i data-bs-backdrop
prebacivanje 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">Backdroped 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;
Korištenje
Dodatak offcanvas koristi nekoliko klasa i atributa za rukovanje teškim radom:
.offcanvas
skriva sadržaj.offcanvas.show
prikazuje sadržaj.offcanvas-start
skriva offcanvas s lijeve strane.offcanvas-end
skriva offcanvas s desne strane.offcanvas-bottom
skriva 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
Dodajte data-bs-toggle="offcanvas"
i data-bs-target
ili href
elementu da biste automatski dodijelili kontrolu nad jednim offcanvas elementom. Atribut data-bs-target
prihvaća CSS selektor na koji se primjenjuje offcanvas. Obavezno dodajte klasu offcanvas
u offcanvas element. Ako želite da se prema zadanim postavkama otvori, dodajte dodatnu klasu show
.
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...
})