NavigationDrawerWysuwany panel nawigacyjny

Wysuwany panel nawigacyjny udostępnia nawigację na boku strony, umożliwiając szybki dostęp do różnych stron lub treści.

Zazwyczaj w wysuwanym panelu nawigacyjnym można użyć komponentu <mdui-list> do dodania elementów nawigacji.

Sposób użycia

Zaimportuj komponent:

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

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

Zamknij wysuwany panel nawigacyjny

Otwórz wysuwany panel nawigacyjny

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Zamknij wysuwany panel nawigacyjny</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Otwórz wysuwany panel nawigacyjny</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>

Uwagi:

Ten komponent domyślnie używa pozycjonowania position: fixed.

Gdy atrybut modal ma wartość false, a punkt przerwania jest większy lub równy --mdui-breakpoint-md, automatycznie dodawany jest styl padding-left lub padding-right do body, aby zapobiec zasłanianiu treści strony przez komponent.

Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie position: absolute:

Gdy atrybut contained ma wartość true.
Gdy komponent znajduje się wewnątrz komponentu <mdui-layout></mdui-layout>. Wtedy style padding-left lub padding-right nie są dodawane.

Przykłady

Umieszczenie w określonym kontenerze

Domyślnie wysuwany panel nawigacyjny jest wyświetlany po lewej lub prawej stronie strony względem bieżącego okna. Jeśli chcesz umieścić wysuwany panel nawigacyjny w określonym kontenerze, możesz dodać atrybut contained. Wtedy panel będzie wyświetlany względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego style position: relative; overflow: hidden;).

Zamknij wysuwany panel nawigacyjny

Otwórz wysuwany panel nawigacyjny

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Zamknij wysuwany panel nawigacyjny</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Otwórz wysuwany panel nawigacyjny</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>

Źródło

Dodanie atrybutu modal powoduje wyświetlenie osłony po otwarciu wysuwanego panelu nawigacyjnego. Należy pamiętać, że gdy szerokość okna lub elementu nadrzędnego jest mniejsza niż --mdui-breakpoint-md, parametr ten jest ignorowany i osłona jest zawsze wyświetlana.

Dodanie atrybutu close-on-esc zamknie wysuwany panel nawigacyjny po naciśnięciu klawisza ESC.

Dodanie atrybutu close-on-overlay-click zamknie wysuwany panel nawigacyjny po kliknięciu na osłonę.

<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">Zamknij wysuwany panel nawigacyjny</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Otwórz wysuwany panel nawigacyjny</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>

Źródło

Znajdowanie się po prawej stronie

Ustawienie atrybutu placement na right wyświetli wysuwany panel nawigacyjny po prawej stronie strony.

Zamknij wysuwany panel nawigacyjny

Otwórz wysuwany panel nawigacyjny

<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">Zamknij wysuwany panel nawigacyjny</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Otwórz wysuwany panel nawigacyjny</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>

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`open`	`open`	`boolean`	`false`
Określa, czy panel nawigacyjny jest otwarty.
`modal`	`modal`	`boolean`	`false`
Określa, czy wyświetlać warstwę nakładki po otwarciu panelu nawigacyjnego. Na urządzeniach z wąskim ekranem (szerokość ekranu mniejsza niż `--mdui-breakpoint-md`), warstwa nakładki jest zawsze wyświetlana, niezależnie od tego parametru
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Określa, czy naciśnięcie klawisza ESC zamyka panel nawigacyjny, gdy warstwa nakładki jest aktywna.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Określa, czy kliknięcie warstwy nakładki zamyka panel nawigacyjny.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Pozycja panelu nawigacyjnego. Dozwolone wartości: `left`: Po lewej stronie `right`: Po prawej stronie
`contained`	`contained`	`boolean`	`false`
Domyślnie panel nawigacyjny jest wyświetlany względem elementu `body`. Gdy ten atrybut jest ustawiony na `true`, panel nawigacyjny będzie wyświetlany względem swojego elementu nadrzędnego. Uwaga: Podczas ustawiania tego atrybutu należy ręcznie ustawić style na elemencie nadrzędnym: `position: relative; overflow: hidden;`.
`order`	`order`	`number`	-
Kolejność tego komponentu w układzie `<mdui-layout>`, sortowana od najmniejszej do największej. Domyślnie `0`.

Zdarzenia

Nazwa
`open`
Wywoływane przed otwarciem panelu nawigacyjnego. Można zapobiec otwarciu, wywołując `event.preventDefault()`
`opened`
Wywoływane po zakończeniu animacji otwierania panelu nawigacyjnego
`close`
Wywoływane przed zamknięciem panelu nawigacyjnego. Można zapobiec zamknięciu, wywołując `event.preventDefault()`
`closed`
Wywoływane po zakończeniu animacji zamykania panelu nawigacyjnego
`overlay-click`
Wywoływane po kliknięciu warstwy nakładki

Slots

Nazwa
(domyślny)
Treść w panelu nawigacyjnym

CSS Parts

Nazwa
`overlay`
Warstwa nakładki
`panel`
Kontener panelu nawigacyjnego

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--z-index`
Wartość CSS `z-index` komponentu

Poprzedni rozdział

NavigationBar Pasek nawigacji

Następny rozdział

NavigationRail Szyna nawigacyjna