Onglets en levier de vitesses
Les sections d'une console de voiture se choisissent en faisant glisser un pommeau chromé dans une grille, avec un écran ambré qui clignote.
Réglages
Code
<div class="uvq12-gg"><div class="sc"><div class="pn" role="tabpanel" id="uvq12-gg-p0" aria-labelledby="uvq12-gg-t0"><b>Carte</b><span>Gare du Nord · 12 min</span></div><div class="pn" role="tabpanel" id="uvq12-gg-p1" aria-labelledby="uvq12-gg-t1" hidden><b>Audio</b><span>Radio 3 · Jazz</span></div><div class="pn" role="tabpanel" id="uvq12-gg-p2" aria-labelledby="uvq12-gg-t2" hidden><b>Climatisation</b><span>21,5 °C · 2 zones</span></div><div class="pn" role="tabpanel" id="uvq12-gg-p3" aria-labelledby="uvq12-gg-t3" hidden><b>Véhicule</b><span>Autonomie 412 km</span></div></div><div class="gt" role="tablist" aria-label="Console"><span class="sl" aria-hidden="true"></span><span class="kn" aria-hidden="true"></span><button type="button" role="tab" id="uvq12-gg-t0" aria-selected="true" aria-controls="uvq12-gg-p0" tabindex="0" aria-label="Carte"><b aria-hidden="true">M</b></button><button type="button" role="tab" id="uvq12-gg-t1" aria-selected="false" aria-controls="uvq12-gg-p1" tabindex="-1" aria-label="Audio"><b aria-hidden="true">A</b></button><button type="button" role="tab" id="uvq12-gg-t2" aria-selected="false" aria-controls="uvq12-gg-p2" tabindex="-1" aria-label="Climatisation"><b aria-hidden="true">C</b></button><button type="button" role="tab" id="uvq12-gg-t3" aria-selected="false" aria-controls="uvq12-gg-p3" tabindex="-1" aria-label="Véhicule"><b aria-hidden="true">V</b></button></div><small>Console</small></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
Ces onglets reprennent le sélecteur d'une boîte automatique : un pommeau chromé glisse dans une fente sombre et s'arrête sous la lettre choisie, pendant qu'un petit écran ambré clignote et affiche la section. Le tout tient en HTML et CSS avec un court script pour le glisser, et convient aux apps automobiles, aux panneaux domotiques et aux tableaux de bord au look matériel.
Change la couleur principale pour passer de l'ambre au bleu glacier ou au rouge, et la secondaire pour teinter la console. Garde une seule lettre par position et place les noms complets dans l'écran.