Pref consumption<mds-pref-consumption>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
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à
modeenumSpecifies the preference mode
sizeenumSets the size of the component items nested inside it
Panoramica
The <mds-pref-consumption> web component is a preference control of the Magma Design System that lets the user pick an energy-consumption mode (low, medium, high); it is usually a child of <mds-pref> and renders as a tab group with one option per mode, so it has no native HTML primitive equivalent.
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 preference by itself.Mode resolution on load: The active mode is resolved once, on load, in priority order - the mode prop, then the persisted value, then the high default - so the control restores the last user choice across reloads.Applies the preference globally: Selecting a mode applies it across the whole document and persists the choice.Change event: Each change emits mdsPrefChange with { preference: 'consumption' }, and so does the page load; the event fires before the new mode is stored. consumption requires a reload to fully apply, but the “reload required” notice of the parent <mds-pref> does not show in a visible panel (it listens only in controller mode).Instances stay in sync: Instances mounted together (a hidden <mds-pref controller> and a visible settings panel) share the applied consumption: a pick in one is mirrored by the others, which neither apply it again nor emit mdsPrefChange. A pref-consumption-* class written on <html> by other code is mirrored the same way.
Properties & Visual Configurations
mode: The selected consumption preference (low / medium / high). Leave it unset to let the component restore the persisted value or fall back to high; set it explicitly only to force an initial mode.size: Sizes the nested tab items (sm / md). The parent <mds-pref> forwards a later change of its own size to every mds-pref-* child, but not the initial value, so set it on this component as well.