Offcanvas
Créez des barres latérales cachées dans votre projet pour la navigation, les paniers d'achat et plus encore avec quelques classes et notre plugin JavaScript.
Comment ça fonctionne
Offcanvas est un composant de barre latérale qui peut être basculé via JavaScript pour apparaître à partir du bord gauche, droit ou inférieur de la fenêtre d'affichage. Les boutons ou les ancres sont utilisés comme déclencheurs qui sont attachés à des éléments spécifiques que vous basculez, et data
les attributs sont utilisés pour invoquer notre JavaScript.
- Offcanvas partage une partie du même code JavaScript que les modaux. Conceptuellement, ils sont assez similaires, mais ce sont des plugins distincts.
- De même, certaines variables source Sass pour les styles et les dimensions d'offcanvas sont héritées des variables du modal.
- Lorsqu'il est affiché, offcanvas inclut une toile de fond par défaut sur laquelle vous pouvez cliquer pour masquer l'offcanvas.
- Semblable aux modaux, un seul hors canevas peut être affiché à la fois.
Attention! Étant donné la façon dont CSS gère les animations, vous ne pouvez pas utiliser margin
ou translate
sur un .offcanvas
élément. Utilisez plutôt la classe comme élément d'habillage indépendant.
prefers-reduced-motion
requête multimédia. Voir la section mouvement réduit de notre documentation sur l'accessibilité ..
Exemples
Composants hors canevas
Vous trouverez ci-dessous un exemple hors canevas affiché par défaut (via .show
sur .offcanvas
). Offcanvas inclut la prise en charge d'un en-tête avec un bouton de fermeture et une classe de corps facultative pour certains fichiers padding
. Nous vous suggérons d'inclure des en-têtes hors canevas avec des actions de rejet chaque fois que possible, ou de fournir une action de rejet explicite.
Offcanvas
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
Démo en direct
Utilisez les boutons ci-dessous pour afficher et masquer un élément hors canevas via JavaScript qui bascule la .show
classe sur un élément avec la .offcanvas
classe.
.offcanvas
masque le contenu (par défaut).offcanvas.show
affiche le contenu
Vous pouvez utiliser un lien avec l' href
attribut, ou un bouton avec l' data-bs-target
attribut. Dans les deux cas, le data-bs-toggle="offcanvas"
est obligatoire.
Offcanvas
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
Placement
Il n'y a pas de placement par défaut pour les composants hors canevas, vous devez donc ajouter l'une des classes de modificateurs ci-dessous ;
.offcanvas-start
place offcanvas sur la gauche de la fenêtre (illustrée ci-dessus).offcanvas-end
place offcanvas sur la droite de la fenêtre.offcanvas-top
place offcanvas en haut de la fenêtre.offcanvas-bottom
place offcanvas au bas de la fenêtre
Essayez les exemples en haut, à droite et en bas ci-dessous.
Offcanvas top
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas right
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas bottom
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
Toile de fond
Le défilement de l' <body>
élément est désactivé lorsqu'un hors-canevas et son arrière-plan sont visibles. Utilisez l' data-bs-scroll
attribut pour basculer le <body>
défilement et data-bs-backdrop
pour basculer l'arrière-plan.
Colored with scrolling
Try scrolling the rest of the page to see this option in action.
Offcanvas with backdrop
.....
Backdrop with scrolling
Try scrolling the rest of the page to see this option in action.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
Accessibilité
Étant donné que le panneau offcanvas est conceptuellement une boîte de dialogue modale, assurez-vous d'ajouter - en aria-labelledby="..."
faisant référence au titre offcanvas - à .offcanvas
. Notez que vous n'avez pas besoin d'ajouter role="dialog"
puisque nous l'avons déjà ajouté via JavaScript.
Sass
Variables
$offcanvas-padding-y: $modal-inner-padding;
$offcanvas-padding-x: $modal-inner-padding;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
$offcanvas-transition-duration: .3s;
$offcanvas-border-color: $modal-content-border-color;
$offcanvas-border-width: $modal-content-border-width;
$offcanvas-title-line-height: $modal-title-line-height;
$offcanvas-bg-color: $modal-content-bg;
$offcanvas-color: $modal-content-color;
$offcanvas-box-shadow: $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg: $modal-backdrop-bg;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity;
Utilisation
Le plugin offcanvas utilise quelques classes et attributs pour gérer le gros du travail :
.offcanvas
cache le contenu.offcanvas.show
affiche le contenu.offcanvas-start
cache le hors canevas sur la gauche.offcanvas-end
cache le hors canevas sur la droite.offcanvas-bottom
cache le hors canevas en bas
Ajoutez un bouton de rejet avec l' data-bs-dismiss="offcanvas"
attribut, qui déclenche la fonctionnalité JavaScript. Assurez-vous d'utiliser l' <button>
élément avec lui pour un comportement correct sur tous les appareils.
Via les attributs de données
Basculer
jouter data-bs-toggle="offcanvas"
et un data-bs-target
ou href
à l'élément pour attribuer automatiquement le contrôle d'un élément hors canevas. L' data-bs-target
attribut accepte un sélecteur CSS auquel appliquer l'offcanvas. Assurez-vous d'ajouter la classe offcanvas
à l'élément offcanvas. Si vous souhaitez qu'il soit ouvert par défaut, ajoutez la classe supplémentaire show
.
Rejeter
Le rejet peut être réalisé avec l'data
attribut sur un bouton dans l'offcanvas comme démontré ci-dessous
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
ou sur un bouton en dehors de l'offcanvas en utilisant le data-bs-target
comme illustré ci-dessous :
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Via JavaScript
Activer manuellement avec :
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Options
Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-bs-
, comme dans data-bs-backdrop=""
.
Nom | Type | Défaut | Description |
---|---|---|---|
backdrop |
boolean | true |
Appliquer une toile de fond sur le corps pendant que l'offcanvas est ouvert |
keyboard |
boolean | true |
Ferme l'offcanvas lorsque la touche d'échappement est enfoncée |
scroll |
boolean | false |
Autoriser le défilement du corps pendant que l'offcanvas est ouvert |
Méthodes
Méthodes et transitions asynchrones
Toutes les méthodes API sont asynchrones et démarrent une transition . Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine . De plus, un appel de méthode sur un composant en transition sera ignoré .
Consultez notre documentation JavaScript pour plus d'informations.
Active votre contenu en tant qu'élément hors toile. Accepte une option facultative object
.
Vous pouvez créer une instance offcanvas avec le constructeur, par exemple :
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Méthode | Description |
---|---|
toggle |
Bascule un élément hors canevas sur affiché ou masqué. Renvoie à l'appelant avant que l'élément offcanvas ait été réellement affiché ou masqué (c'est-à-dire avant que l' événement shown.bs.offcanvas ou hidden.bs.offcanvas se produise). |
show |
Affiche un élément hors canevas. Renvoie à l'appelant avant que l'élément offcanvas n'ait été réellement affiché (c'est-à-dire avant que l' shown.bs.offcanvas évènement ne se produise). |
hide |
Masque un élément hors canevas. Renvoie à l'appelant avant que l'élément offcanvas ait été masqué (c'est-à-dire avant que l' hidden.bs.offcanvas évènement ne se produise). |
getInstance |
Méthode statique qui permet d'obtenir l'instance offcanvas associée à un élément DOM |
getOrCreateInstance |
Méthode statique qui vous permet d'obtenir l'instance offcanvas associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée |
Evènements
La classe offcanvas de Bootstrap expose quelques événements pour se connecter à la fonctionnalité offcanvas.
Typed'évènement | Description |
---|---|
show.bs.offcanvas |
Cet événement se déclenche immédiatement lorsque la show méthode d'instance est appelée. |
shown.bs.offcanvas |
Cet événement est déclenché lorsqu'un élément offcanvas a été rendu visible à l'utilisateur (il attendra que les transitions CSS soient terminées). |
hide.bs.offcanvas |
Cet événement est déclenché immédiatement lorsque la hide méthode a été appelée. |
hidden.bs.offcanvas |
Cet événement est déclenché lorsqu'un élément offcanvas a été caché à l'utilisateur (il attendra que les transitions CSS soient terminées). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})