Offcanvas
Zabudujte do svojho projektu skryté bočné panely pre navigáciu, nákupné košíky a ďalšie pomocou niekoľkých tried a nášho doplnku JavaScript.
Ako to funguje
Offcanvas je komponent bočného panela, ktorý možno prepnúť pomocou JavaScriptu tak, aby sa zobrazoval z ľavého, pravého alebo spodného okraja zobrazovanej oblasti. Tlačidlá alebo kotvy sa používajú ako spúšťače, ktoré sú pripojené ku konkrétnym prvkom, ktoré prepínate, a data
atribúty sa používajú na vyvolanie nášho JavaScriptu.
- Offcanvas zdieľa niektoré rovnaké kódy JavaScript ako modály. Koncepčne sú si dosť podobné, no ide o samostatné pluginy.
- Podobne niektoré zdrojové premenné Sass pre štýly a rozmery offcanvas sú zdedené z premenných modalu.
- Keď sa zobrazí, offcanvas obsahuje predvolené pozadie, na ktoré je možné kliknúť a skryť offcanvas.
- Podobne ako v prípade modálov je možné súčasne zobraziť iba jedno mimoplátno.
Hlavy hore! Vzhľadom na to, ako CSS spracováva animácie, nemôžete použiť margin
alebo translate
na .offcanvas
prvok. Namiesto toho použite triedu ako nezávislý obalový prvok.
prefers-reduced-motion
mediálneho dopytu. Pozrite si
časť so zníženým pohybom v našej dokumentácii o prístupnosti .
Príklady
Offcanvas komponenty
Nižšie je uvedený príklad mimo plátna, ktorý sa predvolene zobrazuje (prostredníctvom .show
) .offcanvas
. Offcanvas obsahuje podporu pre hlavičku s tlačidlom zavrieť a voliteľnú triedu tela pre niektoré počiatočné padding
. Odporúčame vám, aby ste vždy, keď je to možné, zahrnuli hlavičky offcanvas s akciami odmietnutia alebo poskytli explicitnú akciu odmietnutia.
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>
Živá ukážka
Pomocou nižšie uvedených tlačidiel môžete zobraziť a skryť prvok offcanvas prostredníctvom jazyka JavaScript, ktorý prepína .show
triedu na prvku s .offcanvas
triedou.
.offcanvas
skryje obsah (predvolené).offcanvas.show
zobrazuje obsah
Môžete použiť odkaz s href
atribútom alebo tlačidlo s data-bs-target
atribútom. V oboch prípadoch data-bs-toggle="offcanvas"
sa vyžaduje.
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>
Umiestnenie
Pre komponenty offcanvas neexistuje žiadne predvolené umiestnenie, takže musíte pridať jednu z tried modifikátorov nižšie;
.offcanvas-start
umiestni mimo plátna naľavo od výrezu (zobrazené vyššie).offcanvas-end
umiestni mimo plátna napravo od výrezu.offcanvas-top
umiestni mimo plátna do hornej časti výrezu.offcanvas-bottom
umiestni mimo plátna na spodok výrezu
Vyskúšajte horný, pravý a spodný príklad nižšie.
Offcanvas top
<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 vpravo
<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>
Spodná časť Offcanvas
<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>
Pozadie
Posúvanie <body>
prvku je zakázané, keď je viditeľné mimoplátno a jeho pozadie. Pomocou data-bs-scroll
atribútu môžete prepínať <body>
posúvanie a data-bs-backdrop
prepínať pozadie.
Farebné s rolovaním
Skúste posunúť zvyšok stránky, aby ste videli túto možnosť v akcii.
Offcanvas s pozadím
.....
V pozadí s rolovaním
Skúste posunúť zvyšok stránky, aby ste videli túto možnosť v akcii.
<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>
Prístupnosť
Keďže panel offcanvas je koncepčne modálnym dialógovým oknom, nezabudnite pridať aria-labelledby="..."
– s odkazom na názov offcanvas – do .offcanvas
. Všimnite si, že ho nemusíte pridávať role="dialog"
, pretože ho už pridávame prostredníctvom JavaScriptu.
Sass
Premenné
$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;
Použitie
Doplnok offcanvas využíva niekoľko tried a atribútov na zvládnutie ťažkého zdvíhania:
.offcanvas
skrýva obsah.offcanvas.show
zobrazuje obsah.offcanvas-start
skryje offplátno vľavo.offcanvas-end
skrýva mimoplátno vpravo.offcanvas-bottom
skryje offcanvas na dne
Pridajte tlačidlo odmietnutia s data-bs-dismiss="offcanvas"
atribútom, ktorý spustí funkciu JavaScript. Uistite sa, že <button>
prvok s ním používate na správne správanie vo všetkých zariadeniach.
Cez dátové atribúty
Pridajte data-bs-toggle="offcanvas"
a data-bs-target
alebo href
k prvku na automatické priradenie kontroly nad jedným prvkom mimo plátna. Atribút data-bs-target
akceptuje selektor CSS, na ktorý sa má použiť offcanvas. Nezabudnite pridať triedu offcanvas
do prvku offcanvas. Ak chcete, aby bola predvolene otvorená, pridajte ďalšiu triedu show
.
Cez JavaScript
Povoliť manuálne pomocou:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
možnosti
Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-bs-
, ako v data-bs-backdrop=""
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
backdrop |
boolovská hodnota | true |
Aplikujte pozadie na telo, kým je offcanvas otvorené |
keyboard |
boolovská hodnota | true |
Po stlačení klávesu Escape zatvorí mimoplátno |
scroll |
boolovská hodnota | false |
Povoliť rolovanie tela, kým je mimo plátna otvorené |
Metódy
Asynchrónne metódy a prechody
Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .
Aktivuje váš obsah ako prvok mimo plátna. Prijíma voliteľné možnosti object
.
Pomocou konštruktora môžete vytvoriť inštanciu mimo plátna, napríklad:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metóda | Popis |
---|---|
toggle |
Prepne prvok mimo plátna na zobrazený alebo skrytý. Vráti sa k volajúcemu predtým, ako sa prvok offcanvas skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.offcanvas alebo ).hidden.bs.offcanvas |
show |
Zobrazuje prvok mimo plátna. Vráti sa k volajúcemu skôr, než sa prvok offcanvas skutočne zobrazí (tj predtým, ako shown.bs.offcanvas nastane udalosť). |
hide |
Skryje prvok mimo plátna. Vráti sa k volajúcemu skôr, ako bol prvok offcanvas skutočne skrytý (tj pred výskytom hidden.bs.offcanvas udalosti). |
getInstance |
Statická metóda, ktorá vám umožňuje získať inštanciu offcanvas spojenú s prvkom DOM |
getOrCreateInstance |
Statická metóda, ktorá vám umožňuje získať inštanciu offcanvas priradenú k prvku DOM alebo vytvoriť novú v prípade, že nebola inicializovaná |
Diania
Trieda offcanvas Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkciám offcanvas.
Typ udalosti | Popis |
---|---|
show.bs.offcanvas |
Táto udalosť sa spustí okamžite po show zavolaní metódy inštancie. |
shown.bs.offcanvas |
Táto udalosť sa spustí, keď sa prvok offcanvas sprístupní používateľovi (bude čakať na dokončenie prechodov CSS). |
hide.bs.offcanvas |
Táto udalosť sa spustí okamžite po hide zavolaní metódy. |
hidden.bs.offcanvas |
Táto udalosť sa spustí, keď je prvok offcanvas skrytý pred používateľom (bude čakať na dokončenie prechodov CSS). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})