Přejít na hlavní obsah Přejít na navigaci v dokumentech
Check
in English

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, horní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í.

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

Posouvání těla

Posouvání <body>prvku je zakázáno, když je viditelné mimo plátno a jeho pozadí. Pomocí data-bs-scrollatributu povolte <body>rolování.

Offcanvas s posouváním těla

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

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>

Posouvání těla a pozadí

Můžete také povolit <body>rolování s viditelným pozadím.

Pozadí s posouváním

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

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é pozadí

Když je pozadí nastaveno na statické, offcanvas se při kliknutí mimo něj nezavře.

Offcanvas
Nezavřu, pokud kliknete mimo mě.
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

Přidáno ve verzi 5.2.0

Změňte vzhled offcanvas pomocí nástrojů, aby je lépe odpovídaly různým kontextům, jako jsou tmavé navigační panely. Zde přidáváme .text-bg-darkdo .offcanvasa .btn-close-whitepro .btn-closesprávný styling s tmavým offcanvasem. Pokud máte v rámci rozbalovací nabídky, zvažte také přidání .dropdown-menu-darkdo .dropdown-menu.

Offcanvas

Zde umístěte obsah mimo plátno.

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>

Responzivní

Přidáno ve verzi 5.2.0

Responzivní třídy offcanvas skryjí obsah mimo výřez od zadaného bodu přerušení a dolů. Nad tímto bodem přerušení se obsah uvnitř bude chovat jako obvykle. Například .offcanvas-lgskryje obsah v offcanvas pod zarážkou lg, ale zobrazí obsah nad zarážkou lg.

Změňte velikost prohlížeče, aby se zobrazoval responzivní přepínač offcanvas.
Responzivní offcanvas

Toto je obsah v .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>

Pro každý bod přerušení jsou dostupné responzivní třídy offcanvas.

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

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.

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í část z plátna
...
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>

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.

CSS

Proměnné

Přidáno ve verzi 5.2.0

Jako součást vyvíjejícího se přístupu proměnných CSS od Bootstrapu nyní offcanvas používá místní proměnné CSS zapnuté .offcanvaspro vylepšené přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

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

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-topskryje offcanvas nahoře
  • .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řepnout

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.

Zavrhnout

Propuštění lze dosáhnout pomocí dataatributu na tlačítku v rámci offcanvas , jak je ukázáno níže:

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

nebo na tlačítko mimo plátno pomocí data-bs-targetníže uvedeného:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
I když jsou podporovány oba způsoby zavření mimo plátno, mějte na paměti, že zavření mimo plátno neodpovídá dialogovému (modálnímu) vzoru ARIA Authoring Practices Guide . Dělejte to na vlastní nebezpečí.

Prostřednictvím JavaScriptu

Povolit ručně pomocí:

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

Možnosti

Protože volby lze předávat prostřednictvím datových atributů nebo JavaScriptu, můžete přidat název volby k data-bs-, jako v data-bs-animation="{value}". Při předávání možností prostřednictvím datových atributů se ujistěte, že jste změnili typ případu názvu možnosti z „ camelCase “ na „ kebab-case “. Použijte například data-bs-custom-class="beautifier"místo data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všechny komponenty podporují experimentální atribut vyhrazených dat data-bs-config, který může obsahovat jednoduchou konfiguraci komponenty jako řetězec JSON. Když má prvek atributy data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné datové atributy přepíší hodnoty uvedené na data-bs-config. Kromě toho mohou existující datové atributy obsahovat hodnoty JSON, jako je data-bs-delay='{"show":0,"hide":150}'.

název Typ Výchozí Popis
backdrop boolean nebo řetězecstatic true Aplikujte pozadí na tělo, zatímco je offcanvas otevřené. Alternativně zadejte staticpro pozadí, které po kliknutí neuzavře mimo plátno.
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 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.

Pomocí konstruktoru můžete vytvořit instanci offcanvas, například:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metoda Popis
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žňuje získat instanci offcanvas přidruženou k prvku DOM nebo vytvořit novou v případě, že nebyla inicializována.
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.offcanvasudálosti).
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.offcanvasudálosti).
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.offcanvasnebo ).hidden.bs.offcanvas

Události

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

Typ události Popis
hide.bs.offcanvas Tato událost se spustí okamžitě po hidezavolá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).
hidePrevented.bs.offcanvas Tato událost se spustí, když je zobrazeno offcanvas, je zobrazeno jeho pozadí statica je provedeno kliknutí mimo offcanvas. Událost se spustí také při stisknutí klávesy Escape a nastavení keyboardmožnosti na false.
show.bs.offcanvas Tato událost se spustí okamžitě při showvolá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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})