Gå til sidens indhold

Vælg et tema

Luk

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

<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="#check"></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 eksempel på implementering i eksempelløsningen “Sager hos AES”

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

<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="#check"></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>

For mere info om implementering se tooltip komponenten