Bootstrap - Offcanvas : Un guide pour les débutants

Salut les futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde merveilleux du composant Offcanvas de Bootstrap. Ne vous inquiétez pas si vous êtes nouveau dans ce domaine - je serai votre guide amical, et nous explorerons ce sujet ensemble, pas à pas. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et mettons-nous en route pour cette aventure passionnante !

Aperçu

Premièrement, qu'est-ce qu'un Offcanvas ? Eh bien, imaginez que vous êtes dans un petit appartement et que vous avez besoin de plus d'espace de rangement. Soudain, une compartiment caché sort de la paroi - c'est essentiellement ce qu'est un Offcanvas dans le design web ! C'est une barre latérale qui peut glisser dans et hors de vue, offrant un espace supplémentaire pour la navigation, les formulaires ou tout autre contenu que vous souhaitez cacher jusqu'à ce qu'il soit nécessaire.

Composants de l'Offcanvas

Avant de commencer à construire, analysons les principales parties d'un Offcanvas :

1. Le déclencheur : C'est généralement un bouton que, lorsque vous cliquez dessus, révèle l'Offcanvas.
2. L'Offcanvas lui-même : Le panneau qui glisse dans le champ de vision.
3. Le fond : Un calque superposé optionnel qui éclaire le contenu principal lorsque l'Offcanvas est ouvert.

Maintenant, voyons comment ces composants se combinent dans le code !

Démo en direct

Voici un exemple simple pour nous lancer :

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
Ouvrir l'Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Titre de l'Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<div class="offcanvas-body">
<p>Ceci est le contenu de l'Offcanvas. Vous pouvez mettre ce que vous voulez ici !</p>
</div>
</div>

Décomposons cela :

1. Le bouton a data-bs-toggle="offcanvas" pour indiquer à Bootstrap qu'il s'agit d'un déclencheur d'Offcanvas.
2. data-bs-target="#demoOffcanvas" lie le bouton à l'Offcanvas avec l'ID correspondant.
3. L'Offcanvas lui-même est un div avec la classe offcanvas.
4. offcanvas-start le positionne sur le côté gauche (nous explorerons d'autres positions plus tard).
5. L'en-tête contient le titre et un bouton de fermeture.
6. Le corps est où va votre contenu principal.

Défilement du corps

Par défaut, lorsque l'Offcanvas est ouvert, le corps derrière ne peut pas être défilé. Mais que faire si vous souhaitez autoriser le défilement ? Très simple ! Ajoutez data-bs-scroll="true" à votre div Offcanvas :

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="scrollableOffcanvas">
<!-- Contenu de l'Offcanvas -->
</div>

Défilement du corps et fond

Vous souhaitez autoriser le défilement mais conserver ce joli fond ? Pas de problème ! Ajoutez data-bs-backdrop="false" ainsi que data-bs-scroll="true" :

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="scrollableBackdropOffcanvas">
<!-- Contenu de l'Offcanvas -->
</div>

Fond statique

Si vous souhaitez que l'Offcanvas reste ouvert sauf si explicitement fermé (c'est-à-dire que cliquer à l'extérieur ne le ferme pas), utilisez data-bs-backdrop="static" :

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdropOffcanvas">
<!-- Contenu de l'Offcanvas -->
</div>

Offcanvas sombre

Vous avez le goût du gothique ? Faisons notre Offcanvas sombre ! Ajoutez simplement la classe text-bg-dark :

<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="darkOffcanvas">
<!-- Contenu de l'Offcanvas -->
</div>

Réactif

Voici un truc sympa - vous pouvez rendre votre Offcanvas réactif ! Il peut être un Offcanvas sur les écrans plus petits et du contenu en ligne sur les écrans plus grands. Utilisez les classes .offcanvas-{point-de-coupure} :

<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="responsiveOffcanvas">
<!-- Contenu de l'Offcanvas -->
</div>

Cette Offcanvas sera en ligne sur les écrans plus grands que le point de coupure 'lg' et un Offcanvas sur les écrans plus petits.

Placement

Souvenez-vous quand j'ai mentionné que nous pouvions changer la position ? Voici comment :

Classe	Position
offcanvas-start	Gauche
offcanvas-end	Droite
offcanvas-top	Haut
offcanvas-bottom	Bas

Par exemple, pour placer l'Offcanvas sur la droite :

<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas">
<!-- Contenu de l'Offcanvas -->
</div>

Accessibilité

Enfin, parlons de rendre notre Offcanvas accessible à tous les utilisateurs :

1. Utilisez aria-labelledby pour lier l'Offcanvas à son titre :

<div class="offcanvas offcanvas-start" tabindex="-1" id="accessibleOffcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas accessible</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
</div>
<!-- Contenu de l'Offcanvas -->
</div>

2. Utilisez aria-controls sur le bouton de déclenchement :

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#accessibleOffcanvas" aria-controls="accessibleOffcanvas">
Ouvrir l'Offcanvas accessible
</button>

Et voilà, les amis ! Vous êtes maintenant un expert en Offcanvas. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces composants dans vos projets. Qui sait ? Vous pourriez juste créer la prochaine grande sensation glissante dans le design web !

Bonne programmation, et puisse votre Offcanvas toujours glisser en douceur !

Credits: Image by storyset