Onglets intercalaires
L’onglet actif se soulève et rejoint le panneau du dessous, comme l’intercalaire d’un classeur.
Réglages
Code
<div class="uv-ftk"><div class="tb"><button class="on">Aperçu</button><button>Détails</button><button>Notes</button></div><div class="pn">Contenu du panneau</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 Filtres
Où l’utiliser
Pour les pages où chaque onglet cache un vrai contenu. La fiche produit d’un magasin de bricolage en ligne, avec Description, Caractéristiques et Livraison, ou la fiche client d’un petit CRM. Comme l’onglet et le panneau forment un seul bloc, on sait tout de suite ce qui va ensemble. On le cherche souvent comme onglets intercalaires en CSS.
L’effet ne marche que si l’onglet et le panneau ont exactement le même fond, modifiez donc toujours les deux. Le rendu est un peu classique : un atout pour un outil professionnel, moins pour une marque décalée.