Onglets façon navigateur
Des onglets qui s'activent, se ferment en rétrécissant et s'ouvrent avec le bouton plus, comme dans un navigateur.
Réglages
Code
<div class="uv-nbr"><div class="st" role="tablist" aria-label="Onglets"><div class="tb" style="--f:#ef4444"><button type="button" role="tab" aria-selected="false" class="lb"><i></i><span>Mail</span></button><button type="button" class="x" aria-label="Fermer Mail"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><div class="tb on" style="--f:#3b82f6"><button type="button" role="tab" aria-selected="true" class="lb"><i></i><span>Calendrier</span></button><button type="button" class="x" aria-label="Fermer Calendrier"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><div class="tb" style="--f:#a855f7"><button type="button" role="tab" aria-selected="false" class="lb"><i></i><span>Design final</span></button><button type="button" class="x" aria-label="Fermer Design final"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><button type="button" class="ad" aria-label="Nouvel onglet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></div><div class="tl"><span class="ur"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg><span class="u">calendario.app</span></span></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Les applis de travail, les éditeurs et les tableaux de bord utilisent de plus en plus des onglets façon navigateur pour garder plusieurs documents ouverts. L'onglet actif se fond dans la barre d'adresse avec des coins arrondis, les inactifs s'éclaircissent au survol, la croix fait rétrécir un onglet et active son voisin, et le bouton plus ajoute un nouvel onglet sélectionné.
Les onglets se partagent la largeur et tronquent les titres longs, et la barre affiche l'adresse de l'onglet actif. Ils utilisent le rôle tab avec aria-selected.