Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

mdsmsizeenumSets the size of the component items nested inside it

setstringSpecifies the language code based on HTML lang attribute A string representing the language version as defined in {@link https://datatracker.ietf.org/doc/html/rfc5646 RFC 5646: Tags for Identifying Languages (also known as BCP 47)}. Examples of valid language codes include "en", "en-US", "fr", "fr-FR", "es-ES", etc. Supported languages are Italiano, English, Español, ελληνικά

Panoramica

The <mds-pref-language> web component is the language-preference control of the Magma Design System, usually slotted inside the <mds-pref> panel alongside the other preference children. It renders a labelled tab trigger that opens a dropdown of <mds-pref-language-item> entries, letting users switch the active document language and persisting that choice.

Semantic Behavior

Usually inside <mds-pref>: Placed as a direct slot child of <mds-pref>, alongside the other mds-pref-* controls; it also works on its own, since it applies and stores the language by itself. What it gives up on its own is in the antipattern docs. In turn it hosts its own <mds-pref-language-item> children, supplied via its default slot.Default slot hosts the items: The default slot accepts one or more <mds-pref-language-item> elements; when the control loads, the item whose code matches the resolved language is marked selected (a later change of set does not move the selection).Selection orchestration: Selecting an item clears the others, closes the dropdown, and resolves the new language - the children report up to this component, which centralizes the single-selection state.Language resolution & persistence: When set is auto the active language is resolved in priority order from the persisted value, then the <html lang> attribute, then navigator.language. The resolved value is persisted and written to <html lang> - the single page-wide source of truth for the language. Every localized Magma component (including ones nested in shadow DOM) reacts automatically through a shared reactive store; there is no per-element lang override and no imperative refresh method. Applications that manage the language themselves can simply set <html lang>: the store observes it.Events bubbled to the parent: Emits mdsPrefLanguageChange on every item pick, also when the picked language is already active (detail carries the selected language code; it fires just before the language is applied), and mdsPrefChange (detail { preference: 'language' }), fired only when the resolved language actually changes, from a pick or from a new set value (the initial application on load does not emit). The latter is the event <mds-pref> listens to for its “reload required” notice, since application-level content may still need a reload.Invalid codes throw: A set value that is neither auto nor a valid xx / xx-XX BCP 47 short form raises an error rather than failing silently.Default-language hint: When the resolved language differs from the built-in default (en), a caption noting the default language is rendered.

Properties & Visual Configurations

set: The desired language as a BCP 47 short tag (e.g. it, en, es-ES); the special value auto (default) defers to the persisted/page/system resolution chain described above. Region subtags are sanitized down to the two-letter language. Set an explicit value only to force a starting language regardless of the user’s environment. Supported display languages are Italiano, English, Español and ελληνικά.size: Sizes the nested tab trigger (sm / md). The parent <mds-pref> forwards its own size to every mds-pref-* child only when that prop changes after load, not from the initial markup: to size the control from markup, set size here.

Dipendenze

Usa: mds-text, mds-tab, mds-tab-item, mds-dropdown