Objectifs
- Connaitre le Offcanvas Bootstrap
- Être capable d'utiliser les Offcanvas Bootstrap
Présentation
- Offcanvas est un plug-in bootstrap 5 pour un menu latéral qui apparaît à l'écran de gauche, de droite, du haut ou du bas selon les besoins de l'utilisateur.
- Offcanvas peut être utilisé comme menu secondaire ou comme menu principal et il peut être déclenché par un bouton ou un lien.
- Lorsque la barre latérale hors toile est déclenchée, elle bloque la page de tout type d'interaction, car lorsque le menu se révèle, la page se cache derrière elle.
Comment créer une barre latérale
Offcanvas- Pour créer une barre latérale offcanvas, ajoutez la classe
.offcanvasdans une balise div avec sa position de révélation.offcanvas-startet un identifiant unique . - Ensuite, enroulez cette div autour d'une div avec la classe
.offcanvas-headerqui contient le titre de la barre latérale avec son bouton de renvoi et une div avec la classe.offcanvas-bodyqui contient le contenu de la barre latérale. - Enfin, pour déclencher la barre latérale offcanvas, utilisez
data-bs-toggle="offcanvas"etdata-bs-target="#id"pour connecter la barre latérale avec un bouton ou un lien qui, en cliquant, révèle la barre latéraleoffcanvas:
Exemple:
- La barre latérale Offcanvas est créée en ajoutant la classe
.offcanvasà un div. - Ajoutez ensuite
.offcanvas-start/end/top/bottompour spécifier la position de la barre latérale et l' attribut id pour donner à la barre latérale un identifiant unique. - Ensuite, enveloppez cette div autour d'une div avec la classe
.offcanvas-headerqui contient le titre de la barre latérale avec son bouton de renvoi - Puis une div avec la classe
.offcanvas-bodyqui contient le contenu de la barre latérale. - Utilisez
data-bs-toggle="offcanvas"pour déclencher la barre latérale offcanvas, et data-bs-target="#id" pour connecter la barre latérale avec un bouton ou un lien qui, en cliquant, révèle la barre latérale offcanvas
.
Positions d'une barre latérale
Offcanvas- La barre latérale
Offcanvaspeut être révélée à partir de n'importe quel bord de l'écran selon les besoins de l'utilisateur. - Pour spécifier la position
offcanvas, ajoutez simplement la classe.offcanvas-start/end/top/bottomavec la classe .offcanvas . La classe
.offcanvas-start- La classe .offcanvas-start révélera la barre latérale du côté gauche de la page.
<div class="offcanvas offcanvas-start" id = "start">
- La barre latérale
La classe
.offcanvas-end- La classe .
offcanvas-endrévélera la barre latérale du côté droit de la page.
<div class = "offcanvas offcanvas-end" id = "end">- La classe .
La classe
.offcanvas-top- La classe
.offcanvas-toprévélera la barre latérale en haut de la page.
<div class = "offcanvas offcanvas-top" id = "top">- La classe
La classe
.offcanvas-bottom- La classe
.offcanvas-bottomrévélera la barre latérale à partir du bas de la page.
<div class = "offcanvas offcanvas-bottom" id = "bottom">- La classe
Application
- Suivez le processus mentionné ci-dessus pour créer un composant bootstrap offcanvas.
- Pour créer une barre latérale offcanvas, ajoutez la classe