A-bis-Z-Index mit Lupe
Die Buchstaben von A bis Z wachsen unter dem Cursor wie ein Dock, der gewählte erscheint in einer Blase.
Einstellungen
Code
<fieldset class="uv-faz"><legend>Künstler nach Buchstabe</legend><div class="rw"><label><input type="radio" name="uv-faz"><span data-l="A">A</span></label><label><input type="radio" name="uv-faz"><span data-l="B">B</span></label><label><input type="radio" name="uv-faz"><span data-l="C">C</span></label><label><input type="radio" name="uv-faz"><span data-l="D">D</span></label><label><input type="radio" name="uv-faz"><span data-l="E">E</span></label><label><input type="radio" name="uv-faz"><span data-l="F">F</span></label><label><input type="radio" name="uv-faz"><span data-l="G">G</span></label><label><input type="radio" name="uv-faz"><span data-l="H">H</span></label><label><input type="radio" name="uv-faz"><span data-l="I">I</span></label><label><input type="radio" name="uv-faz"><span data-l="J">J</span></label><label><input type="radio" name="uv-faz"><span data-l="K">K</span></label><label><input type="radio" name="uv-faz"><span data-l="L">L</span></label><label><input type="radio" name="uv-faz" checked><span data-l="M">M</span></label><label><input type="radio" name="uv-faz"><span data-l="N">N</span></label><label><input type="radio" name="uv-faz"><span data-l="Ñ">Ñ</span></label><label><input type="radio" name="uv-faz"><span data-l="O">O</span></label><label><input type="radio" name="uv-faz"><span data-l="P">P</span></label><label><input type="radio" name="uv-faz"><span data-l="Q">Q</span></label><label><input type="radio" name="uv-faz"><span data-l="R">R</span></label><label><input type="radio" name="uv-faz"><span data-l="S">S</span></label><label><input type="radio" name="uv-faz"><span data-l="T">T</span></label><label><input type="radio" name="uv-faz"><span data-l="U">U</span></label><label><input type="radio" name="uv-faz"><span data-l="V">V</span></label><label><input type="radio" name="uv-faz"><span data-l="W">W</span></label><label><input type="radio" name="uv-faz"><span data-l="X">X</span></label><label><input type="radio" name="uv-faz"><span data-l="Y">Y</span></label><label><input type="radio" name="uv-faz"><span data-l="Z">Z</span></label></div></fieldset>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 Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Lange Verzeichnisse wie Künstler, Kontakte, Glossare oder Markenlisten lassen sich mit einem Alphabet-Index leichter durchsuchen. Diese Leiste vergrößert den Buchstaben unter dem Zeiger und seine Nachbarn wie das macOS-Dock, nur mit :has und Geschwisterselektoren. Der gewählte Buchstabe erscheint oben in einer farbigen Tropfenblase, der aktuelle Abschnitt ist also immer klar.
Jeder Buchstabe ist ein Radiobutton, das macht ihn tastaturfreundlich und leicht mit einer Liste zu verbinden. Das spanische Ñ kannst du im HTML entfernen oder andere Buchstaben ergänzen.