Salidas
Tabs mit Fallblattanzeige
Bei der Wahl eines Tabs dreht eine Abfahrtstafel ihre Blätter Buchstabe für Buchstabe, bis der Name des Bereichs dasteht.
Einstellungen
Code
<div class="uvq12-fb"><div class="bd"><p class="hd"><span>Abflug</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">Gleis 2</div><div class="pn" role="tabpanel" id="uvq12-fb-p1" aria-labelledby="uvq12-fb-t1" hidden>12 Linien</div><div class="pn" role="tabpanel" id="uvq12-fb-p2" aria-labelledby="uvq12-fb-t2" hidden>Alle 8 Min.</div><div class="pn" role="tabpanel" id="uvq12-fb-p3" aria-labelledby="uvq12-fb-t3" hidden>Ab 1,50 €</div></div><div role="tablist" aria-label="Abflug"><button type="button" role="tab" id="uvq12-fb-t0" aria-selected="true" aria-controls="uvq12-fb-p0" tabindex="0">Start</button><button type="button" role="tab" id="uvq12-fb-t1" aria-selected="false" aria-controls="uvq12-fb-p1" tabindex="-1">Strecken</button><button type="button" role="tab" id="uvq12-fb-t2" aria-selected="false" aria-controls="uvq12-fb-p2" tabindex="-1">Fahrplan</button><button type="button" role="tab" id="uvq12-fb-t3" aria-selected="false" aria-controls="uvq12-fb-p3" tabindex="-1">Tarife</button></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Tabs mit einer Abfahrtstafel wie am Bahnhof: Wählst du einen, blättert jedes Feld durch zufällige Zeichen und bleibt Feld für Feld beim Namen des Bereichs stehen, während in der Ecke die Uhr läuft. Darunter steht ein kurzes Detail zu jedem Tab. Die Buchstaben stammen aus dem Tab-Text und folgen daher der Sprache der Seite.
Die Hauptfarbe färbt die Zeichen, die Zweitfarbe die Tafel. Zehn Felder reichen für die meisten Wörter; erhöhe die Zahl in den Daten für längere Namen und halte die Details knapp.