- Español
- English
- Deutsch
- Français
- Italiano
- Português
Sprachauswahl mit Flaggen
Ein Button mit Globus und Sprachcode, der eine Liste mit Flaggen öffnet; der Code dreht sich beim Wechsel.
Einstellungen
Code
<div class="uv-nlp"><button type="button" class="tg" aria-haspopup="listbox" aria-expanded="false" aria-label="Sprache"><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="Sprache"><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 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 Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Mehrsprachige Seiten brauchen einen Sprachwechsel, der leicht zu finden und schnell zu bedienen ist. Dieser kompakte Button zeigt einen Globus und den aktuellen Code. Er öffnet eine Liste mit Sprachen in ihrer eigenen Schreibweise samt Flagge, markiert die aktuelle mit Haken und getönter Zeile und dreht nach der Wahl den Code mit einem kleinen 3D-Effekt.
Er verhält sich wie eine echte Listbox: Pfeiltasten wechseln die Option, Enter wählt, Escape schließt und der Fokus kehrt zum Button zurück. Ergänze oder entferne Sprachen in den Daten und verlinke jede mit ihrer lokalisierten URL.