Documentatie bouwstenen digitale loketten
🌐 Meertaligheid
Meertaligheid in uw gastwebsite
De global header ondersteunt meertaligheid waardoor gebruikers de interface in hun voorkeurstaal kunnen gebruiken.
U kunt op uw gastwebsite het global header-menu in meerdere talen tonen. Het menu past zich automatisch aan de taal aan op basis van het lang-attribuut op de <html>-tag.
Wanneer het lang-attribuut verandert, zal via de widget de juiste taal worden getoond. NL is de fallback-taal voor ontbrekende vertalingen in de global header.
De taalwisselfunctionaliteit zelf wordt op uw gastwebsite afgehandeld. U kunt:
een gewone link meegeven naar de taalversies in uw interface, zie 🌐 Meertaligheid | Interface elementen
of een event koppelen aan een taalswitch, zie 🌐 Meertaligheid | LanguageSwitcherConfig
⚠️ De header volgt altijd de taal van de gastwebsite zoals ingesteld in het |
|---|
De taal wijzigen
Om de documenttaal te wijzigen, kunt u in uw website het volgende JavaScript-fragment gebruiken:
window.document.documentElement.lang = 'nl'; // 'nl', 'en', 'de' of 'fr'Dit schakelt de taal van het document naar het Nederlands, en de widget zal de verandering automatisch doorvoeren.
📌 Kies minimaal voor 2 beschikbare talen om de taalswitch in de global header te laten werken. |
|---|
 |
|
Meertaligheid laten activeren
U kunt deze functionaliteit via de servicedesk laten activeren.
📌 Alleen de volgende talen worden ondersteund: NL, FR, DE en EN. U kunt ook werken met taalvarianten, bijv. |
|---|
Interface-elementen
In dit deel vindt u de relevante TypeScript‑interfaces voor de taalconfiguratie.
Language
Definieert een ondersteunde taal
interface Language {
code: string; // ISO-code van de taal (bv. 'nl', 'fr', 'en')
label: string; // Weergavenaam van de taal (bv. 'Nederlands')
}LanguageLink
Bevat de link naar de specifieke taalversie van een pagina
interface LanguageLink {
language: string; // ISO-code van de taal
url: string; // URL naar de taalversie
}LanguageSwitcherMethods
Bevat methodes om de taalwissel dynamisch aan te sturen
interface LanguageSwitcherMethods {
setLanguage(languageCode: string): void;
getCurrentLanguage(): string;
}Translations
Bevat de vertalingen voor de vaste elementen in de global header
interface Translations {
languageSwitcherLabel: Translatable<string>; // Label voor de taalwissel
}Type Alias-elementen
Deze type aliasen beschrijven callbacks en configuratie voor de taalwissel.
LanguageSwitcherCallback
Callback-functie die wordt uitgevoerd wanneer een gebruiker van taal wisselt
type LanguageSwitcherCallback = (languageCode: string) => void;LanguageSwitcherConfig
Configuratie-object voor de taalwissel
interface LanguageSwitcherConfig {
languages: Language[]; // Beschikbare talen
defaultLanguage: string; // Standaard ingestelde taal
onLanguageSwitch?: LanguageSwitcherCallback; // Callback bij taalwissel
}
Translatable<T>
Generiek type voor vertaalbare content
type Translatable<T> = {
[languageCode: string]: T;
}Variabelen
Languages
Bevat een lijst van de ondersteunde talen
export const languages: Language[] = [
{ code: 'nl', label: 'Nederlands' },
{ code: 'fr', label: 'Frans' },
{ code: 'de', label: 'Duits' }
{ code: 'en', label: 'Engels' }
];Contactopties vertalen
Wanneer u de global header widget gebruikt in een meertalige omgeving, zorg er dan voor dat de configuratie ook meerdere talen ondersteunt, en dat o.a. ook de contactopties zijn vertaald. U kunt de vertaling van de contactopties aanvragen via aansluitingen.mijnburgerprofiel@vlaanderen.be.
Meer informatie
👉 Meer informatie en codevoorbeelden in de technische documentatie voor meertalige objecten (EN). |
|---|
🤝 Hulp nodig? Kom gerust langs op ons technisch spreekuur. |
|---|