Surfaces

Panneau latéral

stableClasses hb-drawer-h hb-drawer-h__text hb-drawer-h__title hb-drawer-h__sub hb-drawer-h__meta hb-drawer-body hb-drawer-section hb-tabpanelVuetify 2 v-navigation-drawer right temporary width="480" (habillé)Vuetify 3 v-navigation-drawer location="end" temporary

Quand l'utiliser

Pour consulter ou modifier un élément d'une liste en gardant la liste visible : détail d'une facture, fiche d'un produit, réglages d'un équipement. Si la fiche a plus de deux sections longues, une page.

Facture Pomona du 12/10/2026

BL-48213 · reçue le 13/10/2026

À vérifier1 284,60 € HT

Fournisseur Fiche

Nom: Pomona · Rennes
Contact: Service clients

Remarque

Code

<div class="hb-card" style="max-width:440px;overflow:hidden">
  <div class="hb-drawer-h"><div class="hb-drawer-h__text"><h2>Facture Pomona du 12/10/2026</h2><div class="hb-drawer-h__sub">BL-48213 · reçue le 13/10/2026</div><div class="hb-drawer-h__meta"><span class="hb-badge hb-badge-warning">À vérifier</span><span class="hb-badge hb-badge-slate">1 284,60 € HT</span></div></div><button class="hb-btn hb-btn-icon" aria-label="Fermer"><i class="material-icons">close</i></button></div>
  <div class="hb-drawer-body">
    <div class="hb-tabs" role="tablist"><button class="hb-tab" role="tab" aria-selected="true">Lignes <span class="count">12</span></button><button class="hb-tab" role="tab" aria-selected="false">Écarts <span class="count">2</span></button><button class="hb-tab" role="tab" aria-selected="false">Historique</button></div>
    <div class="hb-drawer-section"><h3>Fournisseur <span class="spacer"></span><a class="hb-link" href="#">Fiche</a></h3><dl class="hb-kv"><dt>Nom</dt><dd>Pomona · Rennes</dd><dt>Contact</dt><dd>Service clients</dd></dl></div>
    <div class="hb-drawer-section"><h3>Remarque</h3><textarea class="hb-field" rows="2" placeholder="Facultatif"></textarea></div>
  </div>
  <div class="hb-actions"><button class="hb-btn hb-btn-quiet">Fermer</button><button class="hb-btn hb-btn-primary">Enregistrer</button></div>
</div>

Règles

Largeur 480 px (420 en compact), plein écran sous 600 px. L'en-tête reste collé au défilement ; le titre se tronque sur une ligne.
Les sections ont un titre en capitales (hb-drawer-section > h3) avec, en bout, un lien ou une action petite.
Les onglets dans un panneau latéral restent des hb-tabs ; un seul hb-tabpanel visible.
Fermer : croix en haut à droite, Échap, clic hors du panneau ; si une saisie est en cours, confirmation.