Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Wysuwany panel nawigacyjny

Wysuwany panel nawigacyjny w mdui może wysuwać się z lewej lub prawej strony strony. Jedna strona może mieć wiele wysuwanych paneli nawigacyjnych.

Wysuwany panel nawigacyjny zachowuje się nieco inaczej na telefonach, tabletach i komputerach stacjonarnych. Możesz zaobserwować zmiany w panelu po lewej stronie, zmieniając szerokość przeglądarki:

Wysokość
- Na telefonach i tabletach wysokość wysuwanego panelu nawigacyjnego zawsze wynosi 100%.
- Na komputerach stacjonarnych wysuwany panel nawigacyjny domyślnie nie zakrywa paska aplikacji, a od góry strony dzieli go wysokość paska aplikacji. Dodanie klasy .mdui-drawer-full-height sprawia, że wysokość panelu wynosi 100%. W takim przypadku panel może zakrywać pasek aplikacji; można dodać klasę .mdui-appbar-inset do paska aplikacji, aby nie był on zakrywany przez wysuwany panel.
Kolor tła i cień
- Na telefonach i tabletach wysuwany panel nawigacyjny ma domyślnie białe tło i cień.
- Na komputerach stacjonarnych wysuwany panel nawigacyjny ma domyślnie przezroczyste tło i brak cienia. Dodanie klasy .mdui-color-[color] pozwala ustawić kolor tła panelu i dodać cień.
Status wyświetlania
- Na telefonach i tabletach wysuwany panel nawigacyjny jest domyślnie ukryty.
- Na komputerach stacjonarnych wysuwany panel nawigacyjny jest domyślnie widoczny.
- Dodanie klasy .mdui-drawer-open sprawia, że panel jest domyślnie widoczny na wszystkich urządzeniach; dodanie klasy .mdui-drawer-close sprawia, że panel jest domyślnie ukryty na wszystkich urządzeniach.
Nakładka
- Na telefonach i tabletach podczas otwierania wysuwanego panelu nawigacyjnego zawsze wyświetlana jest nakładka.
- Na komputerach stacjonarnych podczas otwierania panelu domyślnie nie jest wyświetlana nakładka. Ustawienie parametru overlay na true spowoduje wyświetlenie nakładki po otwarciu panelu. Jeśli nakładka ma być wyświetlana, należy dodać klasę .mdui-drawer-close, aby panel był domyślnie ukryty.

Sposób użycia

(Jeśli komponent jest generowany dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji)
Wywołanie przez JavaScript

Powiązane artykuły

Wytyczne projektowe Material Design: Wzorce - Wysuwany panel nawigacyjny

Sposób użycia

Struktura HTML

<!-- Klasa mdui-drawer-body-left dodaje padding-left do body. Należy ją dodać, jeśli po lewej stronie znajduje się domyślnie otwarty wysuwany panel nawigacyjny. -->
<!-- Klasa mdui-drawer-body-right dodaje padding-right do body. Należy ją dodać, jeśli po prawej stronie znajduje się domyślnie otwarty wysuwany panel nawigacyjny. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- Domyślny wysuwany panel nawigacyjny po lewej stronie -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- Aby umieścić wysuwany panel nawigacyjny po prawej stronie, należy dodać klasę mdui-drawer-right -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

Wywołanie przez atrybuty

W tej metodzie nie trzeba pisać kodu JavaScript. Wystarczy dodać atrybut mdui-drawer="options" do elementu sterującego (np. przycisku). Przy wywoływaniu przez atrybuty niestandardowe wymagany jest dodatkowy parametr target, który określa sterowany panel (jego wartością jest selektor CSS panelu).

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

Do elementów wewnątrz wysuwanego panelu nawigacyjnego można dodać atrybuty wiążące zdarzenia, które działają również przy wywoływaniu przez JavaScript.

Atrybut	Opis
`mdui-drawer-close`	Kliknięcie tego elementu wywoła zdarzenie `close.mdui.drawer` i zamknie wysuwany panel nawigacyjny.

Wywołanie przez JavaScript

// selector to selektor CSS lub element DOM wysuwanego panelu nawigacyjnego
// options to parametry konfiguracyjne, patrz lista poniżej
var inst = new mdui.Drawer(selector, options);

Uruchom

Parametr

Nazwa parametru	Typ	Wartość domyślna	Opis
`overlay`	`boolean`	`false`	Czy wyświetlać nakładkę podczas otwierania wysuwanego panelu nawigacyjnego. Ten parametr działa tylko na średnich ekranach i większych; na bardzo małych i małych ekranach nakładka jest zawsze widoczna.
`swipe`	`boolean`	`false`	Czy włączyć gesty przesuwania.

Metoda

Nazwa metody	Opis
`open`	Otwórz wysuwany panel nawigacyjny.
`close`	Ukryj wysuwany panel nawigacyjny.
`toggle`	Przełącz stan wyświetlania wysuwanego panelu nawigacyjnego.
`getState`	Zwraca bieżący stan wysuwanego panelu nawigacyjnego. Zawiera cztery stany (`opening`, `opened`, `closing`, `closed`).

Zdarzenie

Nazwa zdarzenia	Opis	Cel	Parametry
`open.mdui.drawer`	Zdarzenie wyzwalane przed rozpoczęciem animacji otwierania wysuwanego panelu nawigacyjnego.	`<div class="mdui-drawer"></div>`	`event._detail.inst`: Instancja
`opened.mdui.drawer`	Zdarzenie wyzwalane po zakończeniu animacji otwierania wysuwanego panelu nawigacyjnego.
`close.mdui.drawer`	Zdarzenie wyzwalane przed rozpoczęciem animacji zamykania wysuwanego panelu nawigacyjnego.
`closed.mdui.drawer`	Zdarzenie wyzwalane po zakończeniu animacji zamykania wysuwanego panelu nawigacyjnego.

Lista klas CSS

Nazwa klasy	Opis
`.mdui-drawer`	Definiuje wysuwany panel nawigacyjny.
`.mdui-drawer-right`	Wysuwany panel nawigacyjny po prawej stronie.
`.mdui-drawer-full-height`	Sprawia, że wysuwany panel nawigacyjny zajmuje 100% wysokości.
`.mdui-drawer-open`	Sprawia, że wysuwany panel nawigacyjny jest domyślnie widoczny.
`.mdui-drawer-close`	Sprawia, że wysuwany panel nawigacyjny jest domyślnie ukryty.
`.mdui-drawer-body-left`	Dodaje `padding-left` do `body`.
`.mdui-drawer-body-right`	Dodaje `padding-right` do `body`.

Pasek aplikacji

Dolna nawigacja