Busco

16 resultados

Toca las palabras subrayadas para cambiarlas

HTML + CSSFiltres

Filtre en forme de phrase

Des filtres qui se lisent comme une phrase : touche chaque expression soulignée et elle roule vers l'option suivante.

Réglages

16px
1x

Code

<div class="uvq05-st"><p class="ph"><span>Je cherche</span> <button type="button" data-k="0"><span>un appartement</span></button> <button type="button" data-k="1"><span>avec terrasse</span></button> <button type="button" data-k="2"><span>en centre-ville</span></button> <button type="button" data-k="3"><span>jusqu'à 900 €</span></button></p><p class="rs"><b>16</b> <span>résultats</span></p><p class="hn">Touche les mots soulignés pour les changer</p></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Filtres

Voir tout : Filtres

Où l’utiliser

Les filtres en langage naturel conviennent à l'immobilier, au voyage et à la réservation, là où un formulaire complet semble lourd. La phrase est composée dans une police à empattements et chaque expression soulignée est un bouton qui fait défiler ses options au clic ou aux flèches, en faisant rouler les nouveaux mots par le bas pendant que le nombre de résultats rebondit.

La première couleur habille les expressions et leur soulignement pointillé, la seconde le surlignage au survol. Modifie les listes d'options dans le script pour écrire ta phrase et garde des options de longueur proche pour que la ligne ne saute pas.