NavigationDrawerNavigációs fiók

A navigációs fiók az oldal szélén jeleníti meg a navigációs elemeket, így a felhasználók gyorsan elérhetik a különböző oldalakat és tartalmakat.

Általában a <mdui-list> komponenst használhatja navigációs elemek hozzáadásához a navigációs fiókban.

Használat

A komponens importálása:

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

A komponens TypeScript-típusának importálása:

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

Példa:

Navigációs fiók bezárása

Navigációs fiók megnyitása

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Navigációs fiók bezárása</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Navigációs fiók megnyitása</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>

Figyelmeztetések:

A komponens alapértelmezés szerint position: fixed pozicionálást használ.

Ha a modal attribútum értéke false, és a breakpoint legalább --mdui-breakpoint-md, akkor automatikusan padding-left vagy padding-right stílust ad a body elemhez, hogy a tartalmat ne takarja el ez a komponens.

Viszont a következő két esetben alapértelmezés szerint position: absolute pozicionálást használ:

Ha a contained attribútum értéke true.
Ha a komponens a <mdui-layout></mdui-layout> komponensen belül található. Ekkor nem ad hozzá padding-left vagy padding-right stílust.

Példák

Megadott tárolóban való megjelenítés

Alapértelmezés szerint a navigációs fiók az aktuális ablak méretéhez igazodva jelenik meg az oldal bal vagy jobb oldalán. Ha azt szeretné, hogy a navigációs fiók egy megadott tárolóban jelenjen meg, adja hozzá a contained attribútumot, ekkor a navigációs fiók a szülőelemhez igazodva jelenik meg (a szülőelemen a position: relative; overflow: hidden; stílust kell beállítania).

Navigációs fiók bezárása

Navigációs fiók megnyitása

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Navigációs fiók bezárása</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Navigációs fiók megnyitása</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>

Forrás

A modal attribútummal a navigációs fiók megnyitásakor takaróréteg jelenjen meg. Vegye figyelembe, hogy ha az ablak vagy a szülőelem szélessége kisebb, mint --mdui-breakpoint-md, a paramétertől függetlenül mindig megjelenik a takaróréteg.

A close-on-esc attribútummal az ESC billentyű lenyomására bezáródjon a navigációs fiók.

A close-on-overlay-click attribútummal a takarórétegre kattintva bezáródjon a navigációs fiók.

<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">Navigációs fiók bezárása</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Navigációs fiók megnyitása</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>

Forrás

Jobb oldalon való elhelyezés

A placement attribútum right értékre állításával a navigációs fiók az oldal jobb oldalán jelenik meg.

Navigációs fiók bezárása

Navigációs fiók megnyitása

<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">Navigációs fiók bezárása</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Navigációs fiók megnyitása</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>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`open`	`open`	`boolean`	`false`
A navigációs fiók nyitva van-e.
`modal`	`modal`	`boolean`	`false`
A navigációs fiók nyitásakor megjelenjen-e a fedőréteg. Kis képernyős eszközökön (képernyőszélesség kisebb, mint `--mdui-breakpoint-md`) a fedőréteg mindig megjelenik, függetlenül ettől a paramétertől.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Fedőréteg esetén az ESC billentyű lenyomásával bezárható-e a navigációs fiók.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
A fedőrétegre kattintva bezárható-e a navigációs fiók.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
A navigációs fiók pozíciója. Lehetséges értékek: `left`: Bal oldal `right`: Jobb oldal
`contained`	`contained`	`boolean`	`false`
Alapértelmezés szerint a navigációs fiók a `body` elemhez képest jelenik meg. Ha ez az attribútum `true`-ra van állítva, a navigációs fiók a szülőeleméhez képest jelenik meg. Megjegyzés: Az attribútum beállításakor manuálisan be kell állítani a szülőelemen a `position: relative; overflow: hidden;` stílusokat.
`order`	`order`	`number`	-
A komponens sorrendje a `<mdui-layout>` elemen belül, növekvő sorrendben. Alapértelmezett érték: `0`.

Események

Név
`open`
A navigációs fiók nyitása előtt aktiválódik. Az `event.preventDefault()` meghívásával megakadályozható a navigációs fiók megnyitása.
`opened`
A navigációs fiók nyitási animációjának befejezése után aktiválódik.
`close`
A navigációs fiók zárása előtt aktiválódik. Az `event.preventDefault()` meghívásával megakadályozható a navigációs fiók bezárása.
`closed`
A navigációs fiók zárási animációjának befejezése után aktiválódik.
`overlay-click`
A fedőrétegre kattintáskor aktiválódik.

Slots

Név
(alapértelmezett)
A navigációs fiók tartalma.

CSS Parts

Név
`overlay`
Fedőréteg.
`panel`
A navigációs fiók konténere.

CSS egyéni tulajdonságok

Név
`--shape-corner`
A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
`--z-index`
A komponens CSS `z-index` értéke.

Előző fejezet

NavigationBar Navigációs sáv

Következő fejezet

NavigationRail Navigációs sín