NavigationDrawer

Le Navigation Drawer permet d'accéder rapidement aux différentes pages ou contenus via un panneau latéral.

On utilise souvent le composant <mdui-list> dans le Navigation Drawer pour ajouter des éléments de navigation.

Utilisation

Importez le composant :

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

Importez le type TypeScript correspondant :

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

Exemple d'utilisation :

Fermer le Navigation Drawer

Ouvrir le Navigation Drawer

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

<mdui-button>Ouvrir le 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>

Remarques importantes :

Ce composant utilise par défaut un positionnement position: fixed.

Lorsque modal est false et que la taille de l'écran est supérieure ou égale à --mdui-breakpoint-md, un padding-left ou padding-right est automatiquement ajouté au body pour éviter que le contenu ne soit masqué.

Cependant, dans les deux cas suivants, le positionnement par défaut sera position: absolute :

Lorsque l'attribut contained est true.
Lorsqu'il se trouve à l'intérieur du composant <mdui-layout></mdui-layout>. Dans ce cas, aucun padding-left ou padding-right n'est ajouté.

Exemples

Dans un conteneur spécifique

Par défaut, le Navigation Drawer s'affiche sur le côté de la fenêtre. Pour le placer dans un conteneur spécifique, ajoutez l'attribut contained. Le Navigation Drawer s'affichera alors par rapport à son parent (ajoutez position: relative; overflow: hidden; sur le parent).

Fermer le Navigation Drawer

Ouvrir le Navigation Drawer

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Fermer le Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Ouvrir le Navigation Drawer</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>

Source

Ajoutez l'attribut modal pour afficher un fond (overlay) lorsque le Navigation Drawer est ouvert. Notez que si la largeur de la fenêtre ou du parent est inférieure à --mdui-breakpoint-md, l'overlay s'affiche toujours, quel que soit cet attribut.

Ajoutez close-on-esc pour fermer avec la touche Échap. Ajoutez close-on-overlay-click pour fermer en cliquant sur l'overlay.

<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">Fermer le Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Ouvrir le Navigation Drawer</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>

Source

À droite

Définissez l'attribut placement="right" pour afficher le Navigation Drawer sur le côté droit.

Fermer le Navigation Drawer

Ouvrir le Navigation Drawer

<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">Fermer le Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Ouvrir le Navigation Drawer</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>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`open`	`open`	`boolean`	`false`
Si le Navigation Drawer est ouvert
`modal`	`modal`	`boolean`	`false`
Si le Navigation Drawer est ouvert, affiche-t-il un calque de superposition ? Sur les appareils à écran étroit (largeur d'écran inférieure à `--mdui-breakpoint-md`), le calque de superposition est toujours affiché, indépendamment de ce paramètre.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Si un calque de superposition est présent, appuyer sur la touche Échap ferme-t-il le Navigation Drawer ?
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Lors d'un clic sur le calque de superposition, le Navigation Drawer se ferme-t-il ?
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Position du Navigation Drawer. Les valeurs possibles incluent : `left` : À gauche `right` : À droite
`contained`	`contained`	`boolean`	`false`
Par défaut, le Navigation Drawer se positionne par rapport à l'élément `body`. Lorsque cet attribut est défini sur `true`, il se positionne par rapport à son élément parent. Remarque : Lorsque vous définissez cet attribut, vous devez appliquer vous-même les styles `position: relative; overflow: hidden;` à l'élément parent.
`order`	`order`	`number`	-
Ordre de ce composant dans le Layout `<mdui-layout>`, trié par ordre croissant. La valeur par défaut est `0`.

Événements

Nom
`open`
Se déclenche avant l'ouverture du Navigation Drawer. Vous pouvez empêcher l'ouverture du Navigation Drawer en appelant `event.preventDefault()`.
`opened`
Se déclenche après la fin de l'animation d'ouverture du Navigation Drawer.
`close`
Se déclenche avant la fermeture du Navigation Drawer. Vous pouvez empêcher la fermeture du Navigation Drawer en appelant `event.preventDefault()`.
`closed`
Se déclenche après la fin de l'animation de fermeture du Navigation Drawer.
`overlay-click`
Se déclenche lors du clic sur le calque de superposition

Slots

Nom
Défaut
Contenu du Navigation Drawer

CSS Parts

Nom
`overlay`
Calque de superposition
`panel`
Conteneur du Navigation Drawer

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
`--z-index`
Valeur CSS `z-index` du composant.

Chapitre précédent

NavigationBar

Chapitre suivant

NavigationRail