Tiroir (Drawer)

Panneau latéral glissant depuis le bord de l'écran, idéal pour la navigation, les filtres ou le contenu complémentaire.

Exemples

<button type="button" class="bj-btn" data-bj-drawer-open="my-drawer">
  Ouvrir le tiroir
</button>

<div class="bj-drawer" id="my-drawer" role="dialog" aria-modal="true" aria-labelledby="my-drawer-t">
  <div class="bj-drawer__overlay" data-bj-drawer-close></div>
  <div class="bj-drawer__panel">
    <header class="bj-drawer__header">
      <h2 class="bj-drawer__title" id="my-drawer-t">Titre du tiroir</h2>
      <button type="button" class="bj-drawer__close" data-bj-drawer-close aria-label="Fermer">
        <i class="ri-close-line" aria-hidden="true"></i>
      </button>
    </header>
    <div class="bj-drawer__body">
      <p>Contenu du tiroir.</p>
    </div>
    <footer class="bj-drawer__footer">
      <button type="button" class="bj-btn bj-btn--tertiary" data-bj-drawer-close>Annuler</button>
      <button type="button" class="bj-btn">Valider</button>
    </footer>
  </div>
</div>

Positions

<div class="bj-drawer bj-drawer--right" id="drawer-right" ...>
  ...
</div>

Tailles

<!-- Petit -->
<div class="bj-drawer bj-drawer--sm" ...>...</div>

<!-- Grand -->
<div class="bj-drawer bj-drawer--lg" ...>...</div>

<!-- Pleine largeur -->
<div class="bj-drawer bj-drawer--full" ...>...</div>

Classes CSS

ClasseDescription
.bj-drawerConteneur principal du tiroir
.bj-drawer__overlayFond semi-transparent derrière le panneau
.bj-drawer__panelPanneau glissant contenant le contenu
.bj-drawer__headerEn-tête avec titre et bouton de fermeture
.bj-drawer__titleTitre du tiroir
.bj-drawer__closeBouton de fermeture
.bj-drawer__bodyZone de contenu défilable
.bj-drawer__footerPied de panneau avec actions
.bj-drawer--rightGlisse depuis la droite
.bj-drawer--smPanneau étroit (18 rem)
.bj-drawer--lgPanneau large (36 rem)
.bj-drawer--fullPanneau pleine largeur

Accessibilité

Le tiroir utilise role="dialog" et aria-modal="true". Le focus est piégé à l'intérieur lorsque le tiroir est ouvert. aria-labelledby pointe vers le titre du tiroir. La touche Escape ferme le tiroir.