Offcanvas

Zabudujte do svého projektu skryté postranní panely pro navigaci, nákupní košíky a další pomocí několika tříd a našeho pluginu JavaScript.

Na této straně

Jak to funguje

Offcanvas je komponenta postranního panelu, kterou lze pomocí JavaScriptu přepínat tak, aby se zobrazovala z levého, pravého nebo spodního okraje výřezu. Tlačítka nebo kotvy se používají jako spouštěče, které jsou připojeny ke konkrétním prvkům, které přepínáte, a dataatributy se používají k vyvolání našeho JavaScriptu.

Offcanvas sdílí některé ze stejného kódu JavaScript jako modály. Koncepčně jsou si dost podobné, ale jedná se o samostatné pluginy.
Podobně některé zdrojové proměnné Sass pro styly a rozměry offcanvas jsou zděděny z proměnných modalu.
Když se zobrazí, offcanvas obsahuje výchozí pozadí, na které lze kliknout a skrýt offcanvas.
Podobně jako u modalů lze současně zobrazit pouze jedno mimo plátno.

Hlavy vzhůru! Vzhledem k tomu, jak CSS zpracovává animace, nemůžete použít marginnebo translatena .offcanvasprvek. Místo toho použijte třídu jako nezávislý prvek obtékání.

Efekt animace této komponenty závisí na prefers-reduced-motiondotazu na média. Podívejte se na část s omezeným pohybem v naší dokumentaci přístupnosti .

Příklady

Offcanvas komponenty

Níže je uveden příklad offcanvas, který je zobrazen ve výchozím nastavení (přes .show) .offcanvas. Offcanvas obsahuje podporu pro záhlaví s tlačítkem pro zavření a volitelnou třídu těla pro některé počáteční soubory padding. Doporučujeme, abyste zahrnuli záhlaví offcanvas s akcemi zavření, kdykoli je to možné, nebo poskytli explicitní akci zavření.

Obsah pro offcanvas je zde. Zde můžete umístit téměř jakoukoli komponentu Bootstrap nebo 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é demo

Pomocí níže uvedených tlačítek můžete zobrazit a skrýt prvek offcanvas prostřednictvím JavaScriptu, který přepíná .showtřídu na prvku s .offcanvastřídou.

.offcanvasskryje obsah (výchozí)
.offcanvas.showzobrazuje obsah

Můžete použít odkaz s hrefatributem nebo tlačítko s data-bs-targetatributem. V obou případech data-bs-toggle="offcanvas"je požadováno.

Propojit s href

Nějaký text jako zástupný symbol. V reálném životě můžete mít prvky, které jste si vybrali. Like, text, obrázky, seznamy atd.

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

Umístění

Pro komponenty offcanvas neexistuje žádné výchozí umístění, takže musíte přidat jednu z níže uvedených tříd modifikátorů;

.offcanvas-startumístí mimo plátno nalevo od výřezu (zobrazeno výše)
.offcanvas-endumístí mimo plátno napravo od výřezu
.offcanvas-topumístí mimo plátno v horní části výřezu
.offcanvas-bottomumístí mimo plátno na spodní část výřezu

Vyzkoušejte příklady nahoře, vpravo a dole níže.

...

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

Pozadí

Posouvání <body>prvku je zakázáno, když je viditelné mimo plátno a jeho pozadí. Pomocí data-bs-scrollatributu můžete přepínat <body>rolování a data-bs-backdroppřepínat pozadí.

Zkuste posouvat zbytek stránky, abyste viděli tuto možnost v akci.

.....

Zkuste posouvat zbytek stránky, abyste viděli tuto možnost v akci.

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

Přístupnost

Vzhledem k tomu, že panel offcanvas je koncepčně modální dialog, nezapomeňte přidat aria-labelledby="..."– odkazující na název offcanvas – do .offcanvas. Všimněte si, že nemusíte přidávat role="dialog", protože to již přidáváme prostřednictvím JavaScriptu.

Sass

Proměnné

$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žívání

Plugin offcanvas využívá několik tříd a atributů ke zvládnutí těžkého břemene:

.offcanvasskryje obsah
.offcanvas.showukazuje obsah
.offcanvas-startskryje offcanvas vlevo
.offcanvas-endskryje offcanvas vpravo
.offcanvas-bottomskryje offcanvas na spodní straně

Přidejte zavřít tlačítko s data-bs-dismiss="offcanvas"atributem, které spouští funkci JavaScript. Ujistěte se, že <button>prvek s ním používáte pro správné chování napříč všemi zařízeními.

Prostřednictvím datových atributů

Přidáním data-bs-toggle="offcanvas"a data-bs-targetnebo hrefk prvku se automaticky přiřadí ovládání jednoho prvku offcanvas. Atribut data-bs-targetpřijímá selektor CSS, na který se má použít offcanvas. Nezapomeňte přidat třídu offcanvasdo prvku offcanvas. Pokud chcete, aby se ve výchozím nastavení otevřela, přidejte další třídu show.

Prostřednictvím JavaScriptu

Povolit ručně pomocí:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-bs-, jako v data-bs-backdrop="".

název	Typ	Výchozí	Popis
`backdrop`	booleovský	`true`	Aplikujte pozadí na tělo, zatímco je offcanvas otevřené
`keyboard`	booleovský	`true`	Zavře offcanvas po stisknutí klávesy Escape
`scroll`	booleovský	`false`	Povolit posouvání těla, když je otevřené plátno

Metody

Asynchronní metody a přechody

Všechny metody API jsou asynchronní a zahajují přechod . Vrátí se k volajícímu, jakmile je přechod zahájen, ale ještě před jeho ukončením . Kromě toho bude ignorováno volání metody na přechodové komponentě .

Další informace naleznete v naší dokumentaci k JavaScriptu .

Aktivuje váš obsah jako prvek mimo plátno. Přijímá volitelné možnosti object.

Instanci offcanvas můžete vytvořit pomocí konstruktoru, například:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Metoda	Popis
`toggle`	Přepne prvek mimo plátno na zobrazený nebo skrytý. Vrátí se k volajícímu dříve, než byl prvek offcanvas skutečně zobrazen nebo skryt (tj. než dojde k události `shown.bs.offcanvas`nebo ).`hidden.bs.offcanvas`
`show`	Zobrazuje prvek mimo plátno. Vrátí se k volajícímu dříve, než se prvek offcanvas skutečně zobrazí (tj. než dojde k `shown.bs.offcanvas`události).
`hide`	Skryje prvek mimo plátno. Vrátí se k volajícímu dříve, než byl prvek offcanvas skutečně skryt (tj. než dojde k `hidden.bs.offcanvas`události).
`getInstance`	Statická metoda, která vám umožňuje získat instanci offcanvas přidruženou k prvku DOM
`getOrCreateInstance`	Statická metoda, která vám umožní získat instanci offcanvas přidruženou k prvku DOM nebo vytvořit novou v případě, že nebyla inicializována

Události

Třída offcanvas Bootstrapu odhaluje několik událostí pro připojení k funkcionalitě offcanvas.

Typ události	Popis
`show.bs.offcanvas`	Tato událost se spustí okamžitě při `show`volání metody instance.
`shown.bs.offcanvas`	Tato událost se spustí, když je prvek offcanvas zviditelněn pro uživatele (bude čekat na dokončení přechodů CSS).
`hide.bs.offcanvas`	Tato událost se spustí okamžitě po `hide`zavolání metody.
`hidden.bs.offcanvas`	Tato událost se spustí, když byl prvek offcanvas skryt před uživatelem (bude čekat na dokončení přechodů CSS).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Jak to funguje

Příklady

Offcanvas komponenty

Offcanvas

Živé demo

Offcanvas

Umístění

Offcanvas top

Offcanvas vpravo

Spodní část z plátna

Pozadí

Barevné s rolováním

Offcanvas s pozadím

Pozadí s rolováním

Přístupnost

Sass

Proměnné

Používání

Prostřednictvím datových atributů

Prostřednictvím JavaScriptu

Možnosti

Metody

Asynchronní metody a přechody

Události