NavigationDrawer

Il Navigation Drawer fornisce una navigazione laterale verso diverse pagine di un sito web.

In genere, il componente <mdui-list> viene utilizzato all'interno del Navigation Drawer per aggiungere elementi di navigazione.

Utilizzo

Importa il componente:

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

Importa il tipo TypeScript:

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

Esempio:

Chiudi il Navigation Drawer

Apri il Navigation Drawer

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Chiudi il Navigation Drawer</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Apri il Navigation Drawer</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>

Note:

Per impostazione predefinita, questo componente usa position: fixed.

Quando modal è false e il breakpoint è almeno --mdui-breakpoint-md, aggiunge automaticamente padding-left o padding-right al body per evitare che il contenuto venga oscurato.

Tuttavia, usa position: absolute nei seguenti casi:

Quando la proprietà contained è true.
Quando si trova all'interno del componente <mdui-layout></mdui-layout>. In questo caso, non aggiunge padding-left o padding-right.

Per impostazione predefinita, il Navigation Drawer viene mostrato sul lato sinistro o destro della finestra corrente. Per posizionarlo all'interno di un contenitore, aggiungi l'attributo contained. In questo modo viene posizionato rispetto all'elemento padre (devi aggiungere manualmente gli stili position: relative; overflow: hidden; all'elemento padre).

Chiudi il pannello di navigazione

Apri il pannello di navigazione

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Chiudi il pannello di navigazione</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Apri il pannello di navigazione</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>

Sorgente

L'attributo modal visualizza un overlay modale quando il pannello di navigazione è aperto. Nota che se la finestra o la larghezza dell'elemento padre è inferiore a --mdui-breakpoint-md, questo Attributo viene ignorato e l'overlay modale viene sempre visualizzato.

L'attributo close-on-esc consente di chiudere il pannello di navigazione quando viene premuto il tasto ESC.

L'attributo close-on-overlay-click consente di chiudere il pannello di navigazione quando si fa clic sull'overlay modale.

<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">Chiudi il pannello di navigazione</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Apri il pannello di navigazione</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>

Sorgente

Posizionamento a Destra

Usa l'attributo placement per posizionare il pannello di navigazione sul lato destro.

Chiudi il pannello di navigazione

Apri il pannello di navigazione

<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">Chiudi il pannello di navigazione</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Apri il pannello di navigazione</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>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`open`	`open`	`boolean`	`false`
Indica se aprire il pannello di navigazione a cassetto
`modal`	`modal`	`boolean`	`false`
Quando il pannello di navigazione a cassetto è aperto, indica se mostrare l'overlay. Sui dispositivi con schermo stretto (larghezza dello schermo inferiore a `--mdui-breakpoint-md`), l'overlay viene sempre mostrato, ignorando questo parametro.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Se è presente un overlay, indica se premendo il tasto ESC si chiude il pannello di navigazione a cassetto.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Indica se il pannello di navigazione a cassetto si chiude facendo clic sull'overlay.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Posizione del pannello di navigazione a cassetto. I valori opzionali includono: `left`: a sinistra `right`: a destra
`contained`	`contained`	`boolean`	`false`
Per impostazione predefinita, il pannello di navigazione a cassetto è posizionato rispetto all'elemento `body`. Quando questo attributo è impostato su `true`, il pannello verrà posizionato rispetto al suo elemento padre. Nota: quando si imposta questo attributo, è necessario impostare manualmente lo stile `position: relative; overflow: hidden;` sull'elemento padre.
`order`	`order`	`number`	-
Ordine di layout di questo componente all'interno di `<mdui-layout>`, dal più piccolo al più grande. Il valore predefinito è `0`.

Eventi

Nome
`open`
Attivato prima dell'apertura del pannello di navigazione a cassetto. È possibile impedirne l'apertura chiamando `event.preventDefault()`.
`opened`
Attivato al termine dell'animazione di apertura del pannello di navigazione a cassetto.
`close`
Attivato prima della chiusura del pannello di navigazione a cassetto. È possibile impedirne la chiusura chiamando `event.preventDefault()`.
`closed`
Attivato al termine dell'animazione di chiusura del pannello di navigazione a cassetto.
`overlay-click`
Attivato quando si fa clic sull'overlay.

Slots

Nome
(predefinito)
Contenuto all'interno del pannello di navigazione a cassetto

CSS Parts

Nome
`overlay`
Overlay
`panel`
Contenitore del pannello di navigazione a cassetto

CSS Custom Property

Nome
`--shape-corner`
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
`--z-index`
Valore CSS `z-index` del componente

Capitolo precedente

NavigationBar

Capitolo successivo

NavigationRail