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.
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 data
atributy 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 margin
nebo translate
na .offcanvas
prvek. Místo toho použijte třídu jako nezávislý prvek obtékání.
prefers-reduced-motion
dotazu 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í.
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é demo
Pomocí níže uvedených tlačítek můžete zobrazit a skrýt prvek offcanvas prostřednictvím JavaScriptu, který přepíná .show
třídu na prvku s .offcanvas
třídou.
.offcanvas
skryje obsah (výchozí).offcanvas.show
zobrazuje obsah
Můžete použít odkaz s href
atributem nebo tlačítko s data-bs-target
atributem. V obou případech data-bs-toggle="offcanvas"
je požadováno.
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>
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-start
umístí mimo plátno nalevo od výřezu (zobrazeno výše).offcanvas-end
umístí mimo plátno napravo od výřezu.offcanvas-top
umístí mimo plátno v horní části výřezu.offcanvas-bottom
umístí mimo plátno na spodní část výřezu
Vyzkoušejte příklady nahoře, vpravo a dole níže.
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í část z plátna
<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-scroll
atributu můžete přepínat <body>
rolování a data-bs-backdrop
přepínat pozadí.
Barevné s rolováním
Zkuste posouvat zbytek stránky, abyste viděli tuto možnost v akci.
Offcanvas s pozadím
.....
Pozadí s rolováním
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:
.offcanvas
skryje obsah.offcanvas.show
ukazuje obsah.offcanvas-start
skryje offcanvas vlevo.offcanvas-end
skryje offcanvas vpravo.offcanvas-bottom
skryje 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-target
nebo href
k prvku se automaticky přiřadí ovládání jednoho prvku offcanvas. Atribut data-bs-target
přijímá selektor CSS, na který se má použít offcanvas. Nezapomeňte přidat třídu offcanvas
do 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...
})