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.

Na tejto stránke

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 dataatribú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ť marginalebo translatena .offcanvasprvok. Namiesto toho použite triedu ako nezávislý obalový prvok.

Animačný efekt tohto komponentu závisí od prefers-reduced-motionmediá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.

Obsah pre offcanvas je tu. Sem môžete umiestniť takmer akýkoľvek komponent Bootstrap alebo vlastné prvky.

<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 .showtriedu na prvku s .offcanvastriedou.

.offcanvasskryje obsah (predvolené)
.offcanvas.showzobrazuje obsah

Môžete použiť odkaz s hrefatribútom alebo tlačidlo s data-bs-targetatribútom. V oboch prípadoch data-bs-toggle="offcanvas"sa vyžaduje.

Prepojiť s href

Nejaký text ako zástupný symbol. V skutočnom živote môžete mať prvky, ktoré ste si vybrali. Páči sa mi to, text, obrázky, zoznamy atď.

<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-startumiestni mimo plátna naľavo od výrezu (zobrazené vyššie)
.offcanvas-endumiestni mimo plátna napravo od výrezu
.offcanvas-topumiestni mimo plátna do hornej časti výrezu
.offcanvas-bottomumiestni mimo plátna na spodok výrezu

Vyskúšajte horný, pravý a spodný príklad nižšie.

...

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

Pozadie

Posúvanie <body>prvku je zakázané, keď je viditeľné mimoplátno a jeho pozadie. Pomocou data-bs-scrollatribútu môžete prepínať <body>posúvanie a data-bs-backdropprepínať pozadie.

Skúste posunúť zvyšok stránky, aby ste videli túto možnosť v akcii.

.....

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:

.offcanvasskrýva obsah
.offcanvas.showzobrazuje obsah
.offcanvas-startskryje offplátno vľavo
.offcanvas-endskrýva mimoplátno vpravo
.offcanvas-bottomskryje 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-targetalebo hrefk prvku na automatické priradenie kontroly nad jedným prvkom mimo plátna. Atribút data-bs-targetakceptuje selektor CSS, na ktorý sa má použiť offcanvas. Nezabudnite pridať triedu offcanvasdo 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é .

Viac informácií nájdete v našej dokumentácii JavaScript .

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

Offcanvas

Ako to funguje

Príklady

Offcanvas komponenty

Offcanvas

Živá ukážka

Offcanvas

Umiestnenie

Offcanvas top

Offcanvas vpravo

Spodná časť Offcanvas

Pozadie

Farebné s rolovaním

Offcanvas s pozadím

V pozadí s rolovaním

Prístupnosť

Sass

Premenné

Použitie

Cez dátové atribúty

Cez JavaScript

možnosti

Metódy

Asynchrónne metódy a prechody

Diania