Hors toile

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

La tête haute! Étant donné la façon dont CSS gère les animations, vous ne pouvez pas utiliser marginou translatesur 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-motionrequê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 .showon .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 .showclasse sur un élément avec la .offcanvasclasse.

.offcanvasmasque le contenu (par défaut)
.offcanvas.showaffiche le contenu

Vous pouvez utiliser un lien avec l' hrefattribut, ou un bouton avec l' data-bs-targetattribut. 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-startplace offcanvas sur la gauche de la fenêtre (illustrée ci-dessus)
.offcanvas-endplace offcanvas sur la droite de la fenêtre
.offcanvas-topplace offcanvas en haut de la fenêtre
.offcanvas-bottomplace 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-scrollattribut pour basculer le <body>défilement et data-bs-backdroppour basculer l'arrière-plan.

Essayez de faire défiler le reste de la page pour voir cette option en action.

.....

Essayez de faire défiler le reste de la page pour voir cette option en 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">Backdroped 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.

Toupet

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;

Usage

Le plugin offcanvas utilise quelques classes et attributs pour gérer le gros du travail :

.offcanvascache le contenu
.offcanvas.showaffiche le contenu
.offcanvas-startcache le hors canevas sur la gauche
.offcanvas-endcache le hors canevas à droite
.offcanvas-bottomcache l'offcanvas 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

Ajoutez data-bs-toggle="offcanvas"et un data-bs-targetou hrefà l'élément pour attribuer automatiquement le contrôle d'un élément hors canevas. L' data-bs-targetattribut 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.

Via Javascript

Activer manuellement avec :

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Choix

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	Taper	Défaut	La description
`backdrop`	booléen	`true`	Appliquer une toile de fond sur le corps pendant que l'offcanvas est ouvert
`keyboard`	booléen	`true`	Ferme l'offcanvas lorsque la touche d'échappement est enfoncée
`scroll`	booléen	`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	La 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 ne `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 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

Événements

La classe offcanvas de Bootstrap expose quelques événements pour se connecter à la fonctionnalité offcanvas.

Type d'événement	La 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...
})

Hors toile

Comment ça fonctionne

Exemples

Composants hors canevas

Hors toile

Démo en direct

Hors toile

Placement

Dessus en toile

Hors toile à droite

Bas hors toile

Toile de fond

Coloré avec défilement

Offcanvas avec toile de fond

Arrière-plan avec défilement

Accessibilité

Toupet

variables

Usage

Via les attributs de données

Via Javascript

Choix

Méthodes

Méthodes et transitions asynchrones

Événements