ontario-language-toggle
This component is used internally to toggle the component languages, set translations and update the HTML lang attribute in the DOM.
It renders an anchor tag (styles as an ontario-button) that accepts either a URL prop to switch the language to, or a custom toggle function if additional functionality is necessary.
It is used in the ontario-header component.
Technical Note: SSR (Server-Side Rendering) Considerations
The Ontario Language Toggle component supports server-side rendering, with a few considerations:
- Language prop: Pass
languageexplicitly during SSR. - Hydrated-only DOM behaviour:
<html lang="">detection andMutationObserverlogic rely on DOM APIs and only execute after hydration. - Framework guidance: Passing
languagedirectly avoids server-side dependence on<html>and ensures listeners forsetAppLanguagehave the expected value on hydration.
Overview
Ontario Language Toggle switches the interface between supported languages.
For component guidance, see:
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
customLanguageToggle | custom-language-toggle | A custom function to pass to the language toggle button. This is optional. | ((event: Event) => void) | undefined | undefined |
language | language | The language of the component. In most cases, the language toggle should be the source of truth for determining the site language. Only pass a language value here if necessary. | "en" | "fr" | undefined | undefined |
size | size | The size of the language toggle button. If no prop is passed, it will be set to the default size. | "default" | "small" | undefined | 'default' |
url | url | The URL to change to when the language toggle button is clicked. This is optional. | string | undefined | undefined |
Events
| Event | Description | Type |
|---|---|---|
headerLanguageToggled | Event that fires when the language toggle is pressed/clicked. The event contains the oldLanguage along with the newLanguage. | CustomEvent<HeaderLanguageToggleEventDetails> |
setAppLanguage | Event that fires during the setAppLanguageHandler() method. The event contains the current language (after language logic has already occurred). | CustomEvent<"en" | "fr"> |
Dependencies
Used by
Graph
Built with StencilJS