- Español
- English
- Deutsch
- Français
- Italiano
- Português
Sélecteur de langue avec drapeaux
Un bouton avec globe et code de langue qui ouvre une liste à drapeaux ; le code pivote au changement.
Réglages
Code
<div class="uv-nlp"><button type="button" class="tg" aria-haspopup="listbox" aria-expanded="false" aria-label="Langue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.4 2.5 3.5 5.5 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.5-3.5-8.5s1.1-6 3.5-8.5z"/></svg><span class="cd"><b>ES</b></span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><ul role="listbox" tabindex="-1" aria-label="Langue"><li role="option" data-c="es" aria-selected="true" tabindex="-1"><span class="fl" aria-hidden="true">🇪🇸</span>Español<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="en" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇬🇧</span>English<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="de" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇩🇪</span>Deutsch<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="fr" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇫🇷</span>Français<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="it" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇮🇹</span>Italiano<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li><li role="option" data-c="pt" aria-selected="false" tabindex="-1"><span class="fl" aria-hidden="true">🇵🇹</span>Português<span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></li></ul></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 Navigation
Voir tout : NavigationOù l’utiliser
Les sites multilingues ont besoin d'un changement de langue facile à trouver et rapide. Ce bouton compact affiche un globe et le code actuel ; il ouvre une liste de langues écrites dans leur propre nom avec drapeau, marque l'actuelle d'une coche et d'une ligne teintée, et fait pivoter le code du bouton après le choix.
Il se comporte comme une vraie listbox : les flèches parcourent les options, Entrée choisit, Échap ferme et le focus revient au bouton. Ajoute ou retire des langues dans les données et relie chacune à son URL traduite.