Le composant Drawer¶

Le composant Drawer permet de créer des fenêtre cachées qui s'affichent sur un déclencheur comme un bouton.

Cette fonctionnalité est pratique pour la navigation, les paniers d'achats, des apperçus, et d'autres utilités.

Fonctionnement¶

Le fonctionnement est le suivant :

Un élément déclencheur (comme un bouton) lance l'affichage d'un bloc <dialog>
Un bloc <dialog>existe dans le HTML mais n'est pas affiché tant qu'il n'est pas déclenché

Exemple :

<!--Lien qui déclenche la renêtre-->
<a href="#panier" data-bs-toggle="drawer" >
    <img src="images/shopping.png" alt="Shopping bag">
</a>

<!--Fenêtre cachée affichée lors d'un clique sur le lien-->
<dialog class="drawer drawer-start" id="panier">
    <!--Titre et bouton de fermeture-->
    <div class="drawer-header">
        <h5 class="drawer-title">Drawer</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer"></button>
    </div>
    <div class="drawer-body">
       <!--Contenu de la nouvelle fenêtre-->
    </div>
</dialog>