Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Sprogvælger
Eksempler og retningslinjer
Installation
HTML Struktur
Kodeeksempel
<footer>
<div class="language-switcher">
<div class="container">
<ul aria-label="Vælg sprog fra listen ">
<li><a href="?lang=da" lang="da"
aria-label="Valgt sprog: Dansk"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#done"></use></svg>Dansk</a>
</li>
<li><a href="?lang=en-GB" lang="en-GB">English</a></li>
<li><a href="?lang=de" lang="de">Deutsch</a></li>
<li><a href="?lang=pl" lang="pl">Polski</a></li>
</ul>
</div>
</div>
</footer>Bemærk, at man i løsningen selv står for funktionaliteten i denne komponent.
Sprogvælgeren indsættes nederst i footeren. Se eksempelløsningen “Sagsoversigt” for placering i koden.
Hvert sprog tilføjes i listen på original sproget og med den tilsvarende landekode i lang attributten.
Bemærk aria-labels i koden, hvor der vil være tekst og formuleringer der skal tilpasses for hvert sprog man kan vælge.
Varianter
Sprogvælger med tooltip
Kodeeksempel
<footer>
<div class="language-switcher">
<div class="container">
<ul aria-label="Vælg sprog fra listen ">
<li><a href="?lang=da" lang="da"
aria-label="Valgt sprog: Dansk"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#done"></use></svg>Dansk</a>
</li>
<li><a href="?lang=en-GB" lang="en-GB" class="js-tooltip"
data-tooltip="Engelsk">English</a></li>
<li><a href="?lang=de" lang="de" class="js-tooltip"
data-tooltip="Tysk">Deutsch</a></li>
<li><a href="?lang=pl" lang="pl" class="js-tooltip"
data-tooltip="Polsk">Polski</a></li>
</ul>
</div>
</div>
</footer>