Salidas
Onglets avec tableau à palettes
Choisir un onglet fait tourner les palettes d'un tableau des départs, lettre après lettre, jusqu'au nom de la section.
Réglages
Code
<div class="uvq12-fb"><div class="bd"><p class="hd"><span>Départs</span><time>10:45</time></p><div class="rw" aria-hidden="true"><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span></div><div class="pn" role="tabpanel" id="uvq12-fb-p0" aria-labelledby="uvq12-fb-t0">Quai 2</div><div class="pn" role="tabpanel" id="uvq12-fb-p1" aria-labelledby="uvq12-fb-t1" hidden>12 lignes</div><div class="pn" role="tabpanel" id="uvq12-fb-p2" aria-labelledby="uvq12-fb-t2" hidden>Toutes les 8 min</div><div class="pn" role="tabpanel" id="uvq12-fb-p3" aria-labelledby="uvq12-fb-t3" hidden>Dès 1,50 €</div></div><div role="tablist" aria-label="Départs"><button type="button" role="tab" id="uvq12-fb-t0" aria-selected="true" aria-controls="uvq12-fb-p0" tabindex="0">Accueil</button><button type="button" role="tab" id="uvq12-fb-t1" aria-selected="false" aria-controls="uvq12-fb-p1" tabindex="-1">Itinéraires</button><button type="button" role="tab" id="uvq12-fb-t2" aria-selected="false" aria-controls="uvq12-fb-p2" tabindex="-1">Horaires</button><button type="button" role="tab" id="uvq12-fb-t3" aria-selected="false" aria-controls="uvq12-fb-p3" tabindex="-1">Tarifs</button></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
Des onglets reliés à un tableau des départs de gare : quand on en choisit un, chaque case fait défiler des caractères au hasard puis s'arrête sur le nom de la section, case après case, avec l'horloge qui tourne dans le coin. Une ligne en dessous donne un court détail pour chaque onglet. Les lettres viennent du texte de l'onglet et suivent donc la langue de la page.
La couleur principale teinte les caractères et la secondaire le tableau. Dix cases suffisent pour la plupart des mots ; augmente-les dans les données pour des noms plus longs et garde des détails brefs.