Filtre de pays avec drapeaux
Une liste de pays avec drapeaux et un champ de recherche dans le menu pour aller droit au but.
Réglages
Code
<div class="uv-fcn"><button class="tg"><b>🌍 Tous les pays</b><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><label class="sb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg><input placeholder="Rechercher un pays"></label><div class="ls"><button data-v="🇪🇸 Espagne">🇪🇸 Espagne</button><button data-v="🇫🇷 Francia">🇫🇷 Francia</button><button data-v="🇩🇪 Alemania">🇩🇪 Alemania</button><button data-v="🇮🇹 Italia">🇮🇹 Italia</button><button data-v="🇵🇹 Portugal">🇵🇹 Portugal</button><button data-v="🇲🇦 Marruecos">🇲🇦 Marruecos</button><button data-v="🇲🇽 Mexique">🇲🇽 Mexique</button><button data-v="🇯🇵 Japon">🇯🇵 Japon</button></div></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 Filtres
Où l’utiliser
Les drapeaux rendent une longue liste lisible d’un coup d’œil, car on repère le sien avant de lire le nom. Il convient à un voyagiste qui filtre ses circuits par destination ou à un annuaire de fournisseurs par pays. La recherche évite de faire défiler cinquante lignes. On l’appelle aussi sélecteur de pays.
Les emojis de drapeau changent d’un système à l’autre, et certaines versions de Windows affichent des lettres à la place. Si cela compte pour vous, passez à de petits drapeaux en SVG. Et écrivez les noms de pays dans la langue du visiteur.