Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Sprogvælger
En sprogvælger bruges hvis løsningen udbydes på mere end et sprog. Den giver brugeren mulighed for at vælge et andet sprog end løsningens standardsprog.
Sådan bruges komponenten
Anvendes til
Brug en sprogvælger når du gerne vil vise en løsning i flere sprog.
Placeres nederst i footeren.
Anvendes ikke til
Brug ikke sprogvælger, hvis løsningen kun findes i ét sprog.
Vejledning
Sprogvælgeren placeres altid nederst i footeren. Denne placering giver fleksibilitet og understøtter brugen af alle headertyper.
Sprogvælgeren indeholder en liste af sprog skrevet på originalsproget. Sprogvælgeren fungerer således, at det valgte sprog bliver markeret med fed tekst og står altid som det første sprog i listen.
Når brugeren vælger et andet sprog, vil det blive markeret som fed i stedet. Det valgte sprog skifter placering til at være det første sprog i listen.
Husk at skrive sproget ud på det sprog det har. Eksempelvis “English” for engelsk og “Kalaallisut” for Grønlandsk. På denne måde, kan brugerne stadig finde frem til deres foretrukne sprog, trods resten af indholdet vises i et sprog de ikke forstår.
Bemærk, at der er ekstra tekst gemt i koden som skal oversættes for hvert sprog, således at brugere, der gør brug af hjælpeteknologier (fx skærmlæser) kan forstå komponenten på det valgte sprog.
Eksempel på sprogvælger i en simpel footer
Eksempel på sprogvælger i en kompleks footer
Varianter
Sprogvælger med tooltip
Se komponenten i eksempelløsninger
Referencer
Installation
HTML Struktur
<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.
Sprogvælger med tooltip
<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><span class="tooltip-wrapper" data-tooltip="Engelsk"
data-tooltip-id="language-tooltip-2" data-position="above"
data-trigger="hover"><a href="?lang=en-GB" lang="en-GB"
class="tooltip-target">English</a></span></li>
<li><span class="tooltip-wrapper" data-tooltip="Tysk"
data-tooltip-id="language-tooltip-3" data-position="above"
data-trigger="hover"><a href="?lang=de" lang="de"
class="tooltip-target">Deutsch</a></span></li>
<li><span class="tooltip-wrapper" data-tooltip="Polsk"
data-tooltip-id="language-tooltip-4" data-position="above"
data-trigger="hover"><a href="?lang=pl" lang="pl"
class="tooltip-target">Polski</a></span></li>
</ul>
</div>
</div>
</footer>For mere information se implementering af tooltip.