HTML + CSSFiltres
Index alphabétique à loupe
Les lettres de A à Z grossissent sous le curseur comme un dock et celle choisie apparaît dans une bulle.
Réglages
16px
1x
Code
<fieldset class="uv-faz"><legend>Artistes par lettre</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 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
Voir tout : FiltresOù l’utiliser
Les longs annuaires d'artistes, de contacts, de glossaires ou de marques se parcourent mieux avec un index alphabétique. Cette barre agrandit la lettre sous le pointeur et ses voisines, comme le dock de macOS, uniquement avec :has et des sélecteurs de frères. La lettre choisie apparaît au-dessus dans une bulle colorée en forme de goutte.
Chaque lettre est un bouton radio, donc accessible au clavier et facile à relier à une liste. L'alphabet espagnol inclut le Ñ ; retire-le ou ajoute d'autres lettres dans le HTML.