near_me
Démarrage
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Composants
keyboard_arrow_downlocal_mall
Ressources
keyboard_arrow_downmdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.
Tiroir de navigation
Le composant Navigation Drawer de mdui peut apparaître depuis la gauche ou la droite de la page ; une page peut avoir plusieurs Navigation Drawers.
Le Navigation Drawer se comporte différemment sur mobile, tablette et bureau ; vous pouvez modifier la largeur du navigateur pour observer les changements du Navigation Drawer sur la gauche de cette page :
- Hauteur
- Sur mobile et tablette, le Drawer a toujours une hauteur de 100 %.
- Sur bureau, le Drawer ne couvre pas la Top App Bar par défaut et laisse un espace équivalent à la hauteur de la Top App Bar en haut de la page. Ajoutez la classe
.mdui-drawer-full-heightpour faire en sorte que le Drawer occupe 100 % de la hauteur ; dans ce cas, il peut chevaucher la Top App Bar, et vous pouvez ajouter la classe.mdui-appbar-insetà la Top App Bar pour l’empêcher d’être recouverte.
- Couleur d’arrière-plan et ombre
- Sur mobile et tablette, le Drawer a par défaut un fond blanc avec une ombre.
- Sur bureau, le Drawer a par défaut un fond transparent sans ombre. Ajoutez la classe
.mdui-color-[color]pour définir une couleur de fond et ajouter une ombre.
- État d’affichage
- Sur mobile et tablette, le Drawer est masqué par défaut.
- Sur bureau, le Drawer est affiché par défaut.
- Ajoutez la classe
.mdui-drawer-openpour que le Drawer soit affiché par défaut sur tous les appareils ; ajoutez la classe.mdui-drawer-closepour qu’il soit masqué par défaut sur tous les appareils.
- Masque
- Sur mobile et tablette, un masque s’affiche toujours lorsque le Drawer est ouvert.
- Sur bureau, aucun masque n’est affiché par défaut lorsque le Drawer s’ouvre. Définissez le paramètre
overlaysurtruepour afficher un masque lors de l’ouverture du Drawer. Si un masque est affiché, vous devriez ajouter la classe.mdui-drawer-closepour que le Drawer reste masqué par défaut.
Utilisation
- (Si le composant est généré dynamiquement, vous devez appeler
mdui.mutation()pour l’initialiser.) - Appel via JavaScript
Lecture associée
Utilisation
Structure HTML
<!-- La classe mdui-drawer-body-left ajoute un padding-left au body ; ajoutez-la dès qu’un Navigation Drawer s’ouvre par défaut sur la gauche. -->
<!-- La classe mdui-drawer-body-right ajoute un padding-right au body ; ajoutez-la dès qu’un Drawer s’ouvre par défaut sur la droite. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">
<!-- Drawer par défaut sur la gauche -->
<div class="mdui-drawer">
... drawer content ...
</div>
<!-- Si vous souhaitez afficher le Drawer sur la droite, ajoutez la classe mdui-drawer-right. -->
<div class="mdui-drawer mdui-drawer-right">
... drawer content ...
</div>
</body>Appel via attributs
Cette méthode ne nécessite pas d'écrire de code JavaScript. Il suffit d'ajouter l'attribut mdui-drawer="options" à un élément qui sert de déclencheur (par exemple, un bouton). Lorsque vous utilisez l'appel par attribut personnalisé, ajoutez également un paramètre target pour spécifier le sélecteur CSS du Drawer contrôlé.
<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>Vous pouvez ajouter certains attributs aux éléments contenus dans le Drawer pour lier des événements ; ces attributs peuvent également être utilisés avec la méthode d'appel JavaScript.
| Attribut | Description |
|---|---|
mdui-drawer-close | Cliquer sur cet élément déclenche l’événement close.mdui.drawer et ferme le Drawer. |
Appel via JavaScript
// selector est le sélecteur CSS ou l’élément DOM du Drawer
// options est la liste des paramètres de configuration, voir ci-dessous
var inst = new mdui.Drawer(selector, options);Paramètre
| Nom | Type | Défaut | Description |
|---|---|---|---|
overlay | boolean | false | Indique si un masque doit être affiché lors de l’ouverture du Drawer. Ce paramètre ne s’applique qu’aux appareils de taille moyenne et supérieure ; sur les très petits et petits écrans, un masque est toujours affiché. |
swipe | boolean | false | Active ou non les gestes de glissement. |
Méthode
| Nom de méthode | Description |
|---|---|
open | Afficher le Drawer. |
close | Masquer le Drawer. |
toggle | Basculer l’état d’affichage du Drawer. |
getState | Retourner l’état actuel du Drawer. Il existe quatre états au total : opening, opened, closing et closed. |
Événement
| Nom de l'événement | Description | Cible | Paramètres |
|---|---|---|---|
open.mdui.drawer | L’événement est déclenché lorsque l’animation d’ouverture du Drawer commence. | <div class="mdui-drawer"></div> | event._detail.inst : instance |
opened.mdui.drawer | L’événement est déclenché lorsque l’animation d’ouverture du Drawer est terminée. | ||
close.mdui.drawer | L’événement est déclenché lorsque l’animation de fermeture du Drawer commence. | ||
closed.mdui.drawer | L’événement est déclenché lorsque l’animation de fermeture du Drawer est terminée. |
Classes CSS
| Nom de classe | Description |
|---|---|
.mdui-drawer | Définir un Drawer. |
.mdui-drawer-right | Le Drawer sur la droite de la page. |
.mdui-drawer-full-height | Faire en sorte que le Drawer occupe 100 % de la hauteur. |
.mdui-drawer-open | Faire en sorte que le Drawer soit affiché par défaut. |
.mdui-drawer-close | Faire en sorte que le Drawer soit masqué par défaut. |
.mdui-drawer-body-left | Ajouter padding-left à body. |
.mdui-drawer-body-right | Ajouter padding-right à body. |