Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

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ý je možné prepínať pomocou JavaScriptu tak, aby sa zobrazoval z ľavého, pravého, horného alebo spodného okraja výrezu. 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 modálu.
  • 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.

Offcanvas
Obsah pre offcanvas je tu. Sem môžete umiestniť takmer akýkoľvek komponent Bootstrap alebo vlastné prvky.
html 
<div class="offcanvas offcanvas-start show" 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" 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
Offcanvas
Nejaký text ako zástupný symbol. V skutočnom živote môžete mať prvky, ktoré ste si vybrali. Like, text, obrázky, zoznamy atď.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Rolovanie tela

Posúvanie <body>prvku je zakázané, keď je viditeľné mimoplátno a jeho pozadie. Pomocou data-bs-scrollatribútu povolíte <body>posúvanie.

Offcanvas s rolovaním tela

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

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Posúvanie tela a pozadie

Môžete tiež povoliť <body>posúvanie s viditeľnou kulisou.

Pozadie s rolovaním

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

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

Statické pozadie

Keď je pozadie nastavené na statické, offcanvas sa nezatvorí, keď kliknete mimo neho.

Offcanvas
Nezatvorím, ak kliknete mimo mňa.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Tmavé mimoplátno

Pridané vo verzii 5.2.0

Zmeňte vzhľad mimoplátna pomocou nástrojov, aby ste ich lepšie prispôsobili rôznym kontextom, ako sú tmavé navigačné panely. Tu pridávame .text-bg-darkk .offcanvasa .btn-close-whitepre .btn-closesprávny styling s tmavým offcanvasom. Ak máte rozbaľovacie ponuky, zvážte aj pridanie .dropdown-menu-darkdo .dropdown-menu.

Offcanvas

Sem umiestnite obsah mimo plátna.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Responzívne

Pridané vo verzii 5.2.0

Responzívne triedy offcanvas skryjú obsah mimo zobrazovanej oblasti od určeného bodu prerušenia a nadol. Nad týmto bodom prerušenia sa obsah bude správať ako zvyčajne. Napríklad .offcanvas-lgskryje obsah na mimoplátne pod lgbodom prerušenia, ale zobrazí obsah nad lgbodom prerušenia.

Zmeňte veľkosť prehliadača tak, aby sa zobrazoval responzívny prepínač offcanvas.
Responzívne offcanvas

Toto je obsah v rámci súboru .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Pre každý bod prerušenia sú dostupné responzívne triedy offcanvas.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

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.

Offcanvas top
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas vpravo
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Spodná časť Offcanvas
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS

Premenné

Pridané vo verzii 5.2.0

Ako súčasť vyvíjajúceho sa prístupu premenných CSS od Bootstrapu, offcanvas teraz používa lokálne premenné CSS zapnuté .offcanvasna vylepšené prispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

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-topskryje offcanvas na vrchu
  • .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

Prepnúť

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.

Odmietnuť

Odmietnutie je možné dosiahnuť pomocou dataatribútu na tlačidle mimo plátna , ako je uvedené nižšie:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

alebo na tlačidlo mimo plátna pomocou data-bs-targetnižšie uvedeného:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Hoci sú podporované oba spôsoby zrušenia mimoplátna, majte na pamäti, že zrušenie mimo plátna sa nezhoduje s dialógovým (modálnym) vzorom dialógového okna ARIA Authoring Practices Guide . Robte to na vlastné riziko.

Cez JavaScript

Povoliť manuálne pomocou:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

možnosti

Keďže možnosti možno odovzdať prostredníctvom atribútov údajov alebo jazyka JavaScript, môžete pridať názov možnosti k data-bs-, ako v data-bs-animation="{value}". Pri odovzdávaní možností cez atribúty údajov nezabudnite zmeniť typ prípadu názvu možnosti z „ camelCase “ na „ kebab-case “. Napríklad použite data-bs-custom-class="beautifier"namiesto data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všetky komponenty podporujú experimentálny atribút rezervovaných údajov data-bs-config, ktorý môže obsahovať jednoduchú konfiguráciu komponentu ako reťazec JSON. Ak má prvok atribúty data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné atribúty údajov prepíšu hodnoty uvedené na data-bs-config. Existujúce dátové atribúty môžu navyše obsahovať hodnoty JSON ako data-bs-delay='{"show":0,"hide":150}'.

názov Typ Predvolené Popis
backdrop boolean alebo reťazecstatic true Aplikujte pozadie na telo, kým je offcanvas otvorené. Prípadne zadajte staticpozadie, ktoré po kliknutí nezatvorí mimoplátno.
keyboard boolovská hodnota true Po stlačení klávesu Escape zatvorí mimoplátno.
scroll boolovská hodnota false Povoliť posúvanie 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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metóda Popis
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á.
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.offcanvasudalosti).
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.offcanvasnastane udalosť).
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.offcanvasalebo ).hidden.bs.offcanvas

Diania

Trieda offcanvas Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkciám offcanvas.

Typ udalosti Popis
hide.bs.offcanvas Táto udalosť sa spustí okamžite po hidezavolaní 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).
hidePrevented.bs.offcanvas Táto udalosť sa spustí, keď sa zobrazí offcanvas, jeho pozadie statica vykoná sa kliknutie mimo offcanvas. Udalosť sa spustí aj po stlačení klávesu Escape a nastavení keyboardmožnosti na false.
show.bs.offcanvas Táto udalosť sa spustí okamžite pri showvolaní 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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})