Navigation

Onglets

stableClasses hb-tabs hb-tab hb-tab-add hb-tabs-row hb-tabpanel countVuetify 2 v-tabs + v-tab (habillés, show-arrows quand ils débordent) dans un hb-tabs-rowVuetify 3 v-tabs + v-tab

Quand l'utiliser

Pour passer entre des vues de même niveau d'un même objet : les check-lists d'un magasin, les sections d'une fiche. Pas pour une navigation entre pages (barre latérale) ni pour un choix qui change des données (contrôle segmenté).

Contenu de l'onglet actif.

Code

<div style="max-width:720px">
  <div class="hb-tabs-row" style="display:flex;align-items:flex-end;gap:var(--space-2)">
    <div class="hb-tabs" role="tablist" style="flex:1">
      <button class="hb-tab" role="tab" aria-selected="true">Check-list du 06/11 <span class="count">3</span></button>
      <button class="hb-tab" role="tab" aria-selected="false">Check-list du 05/11 <span class="count">0</span></button>
      <button class="hb-tab" role="tab" aria-selected="false">Inventaire de fin de mois</button>
    </div>
    <button class="hb-tab-add" aria-label="Nouvelle check-list"><i class="material-icons">add</i></button>
    <button class="hb-chip hb-chip-toggle" aria-pressed="false"><i class="material-icons">inventory_2</i>Archivées</button>
  </div>
  <div class="hb-tabpanel" role="tabpanel">Contenu de l'onglet actif.</div>
</div>

Règles

L'onglet actif porte aria-selected="true" ; la pastille de compte passe en couleur métier avec lui.
La rangée défile horizontalement si elle déborde ; dans Vuetify, show-arrows. Un libellé d'onglet se tronque à 240 px.
Le « + » crée un nouvel onglet et le sélectionne, avec le focus sur son titre ; il disparaît en mode archives.
Un seul hb-tabpanel visible, les autres hidden.