NavigationDrawerBoční navigační panel

Boční navigační panel slouží k navigaci po straně stránky a umožňuje rychlý přístup k různým stránkám nebo obsahu.

Navigační položky do bočního navigačního panelu obvykle přidáte pomocí komponenty <mdui-list>.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/navigation-drawer.js';

Importujte TypeScript typy komponenty podle potřeby:

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

Příklad použití:

Zavřít boční navigační panel

Otevřít boční navigační panel

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Zavřít boční navigační panel</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Otevřít boční navigační panel</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Upozornění:

Ve výchozím nastavení používá position: fixed.

Pokud je atribut modal nastaven na false a šířka okna je alespoň --mdui-breakpoint-md, automaticky se na body přidá styl padding-left nebo padding-right, aby nedošlo k zakrytí obsahu stránky touto komponentou.

V těchto dvou případech se však používá position: absolute:

Když je atribut contained true.
Když se komponenta nachází uvnitř <mdui-layout></mdui-layout>. Pak se padding-left nebo padding-right nepřidává.

Příklady

Umístění v určeném kontejneru

Ve výchozím nastavení se boční navigační panel zobrazuje vlevo nebo vpravo na stránce. Pokud chcete umístit boční navigační panel do určeného kontejneru, můžete přidat atribut contained. V takovém případě se boční navigační panel umístí relativně k nadřazenému prvku; styl position: relative; overflow: hidden; je nutné na nadřazený prvek přidat ručně.

Zavřít boční navigační panel

Otevřít boční navigační panel

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Zavřít boční navigační panel</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Otevřít boční navigační panel</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Zdrojový kód

Přidáním atributu modal se při otevření bočního navigačního panelu zobrazí překryvná vrstva. Pamatujte, že pokud je šířka okna nebo nadřazeného prvku menší než --mdui-breakpoint-md, bude tato hodnota ignorována a překryvná vrstva se zobrazí vždy.

Přidejte atribut close-on-esc pro zavření bočního navigačního panelu stisknutím klávesy ESC.

Přidejte atribut close-on-overlay-click pro zavření bočního navigačního panelu kliknutím na překryvnou vrstvu.

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Zavřít boční navigační panel</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Otevřít boční navigační panel</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Zdrojový kód

Umístění vpravo

Nastavením atributu placement na right zobrazíte boční navigační panel na pravé straně stránky.

Zavřít boční navigační panel

Otevřít boční navigační panel

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Zavřít boční navigační panel</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Otevřít boční navigační panel</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`open`	`open`	`boolean`	`false`
Určuje, zda je navigační panel otevřený.
`modal`	`modal`	`boolean`	`false`
Určuje, zda se při otevření navigačního panelu zobrazí překryvná vrstva. Na zařízeních s úzkou obrazovkou (šířka obrazovky menší než `--mdui-breakpoint-md`) se překryvná vrstva zobrazuje vždy, bez ohledu na tento parametr.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Určuje, zda se má navigační panel zavřít po stisknutí klávesy ESC, pokud je zobrazena překryvná vrstva.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Určuje, zda se má navigační panel zavřít po kliknutí na překryvnou vrstvu.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Umístění navigačního panelu. Možné hodnoty: `left`: Vlevo. `right`: Vpravo.
`contained`	`contained`	`boolean`	`false`
Ve výchozím nastavení se navigační panel zobrazuje vzhledem k prvku `body`. Pokud je tento atribut nastaven na `true`, bude se navigační panel zobrazovat vzhledem ke svému rodičovskému prvku. Poznámka: Při nastavení tohoto atributu je nutné na rodičovském prvku ručně nastavit styly `position: relative; overflow: hidden;`.
`order`	`order`	`number`	-
Pořadí této komponenty v rámci rozvržení `<mdui-layout>`. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je `0`.

Události

Název
`open`
Spustí se před otevřením navigačního panelu. Otevření lze zabránit voláním `event.preventDefault()`.
`opened`
Spustí se po dokončení animace otevření navigačního panelu.
`close`
Spustí se před zavřením navigačního panelu. Zavření lze zabránit voláním `event.preventDefault()`.
`closed`
Spustí se po dokončení animace zavření navigačního panelu.
`overlay-click`
Spustí se při kliknutí na překryvnou vrstvu.

Slots

Název
(výchozí)
Obsah navigačního panelu.

CSS Parts

Název
`overlay`
Překryvná vrstva.
`panel`
Kontejner navigačního panelu.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--z-index`
Hodnota CSS `z-index` komponenty.

Předchozí kapitola

NavigationBar Navigační lišta

Další kapitola

NavigationRail Postranní navigační lišta