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.

Sur cette page

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.

L'effet d'animation de ce composant dépend de la 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.

Le contenu de l'offcanvas va ici. Vous pouvez placer à peu près n'importe quel composant Bootstrap ou éléments personnalisés ici.

<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.

Lien avec href

Du texte comme espace réservé. Dans la vraie vie, vous pouvez avoir les éléments que vous avez choisis. Comme, texte, images, listes, etc.

<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.

...

<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>

...

<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>

...

<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.

Try scrolling the rest of the page to see this option in action.

.....

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>

Bien que les deux méthodes de suppression d'un hors-canvas soient prises en charge, gardez à l'esprit que le rejet depuis l'extérieur d'un hors-canvas ne correspond pas au modèle de conception de dialogue modal WAI-ARIA. A vos risques et périls.

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...
})

Bootstrap 5.2 | Composants

Offcanvas

Offcanvas

Comment ça fonctionne

Exemples

Composants hors canevas

Offcanvas

Démo en direct

Offcanvas

Placement

Offcanvas top

Offcanvas right

Offcanvas bottom

Toile de fond

Colored with scrolling

Offcanvas with backdrop

Backdrop with scrolling

Accessibilité

Sass

Variables

Utilisation

Via les attributs de données

Basculer

Rejeter

Via JavaScript

Options

Méthodes

Méthodes et transitions asynchrones

Evènements