Notification<mds-notification>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à
strategyenumSpecifies the position strategy of the notification
dismisseddismissedbooleanSpecifies if the notification is dismissed
targetstringSpecifies the selector of the target element, this attribute is used with querySelector method.
maxnumberSpecifies the maximum number that can be seen, assuming that the number is for example 9 and that this is exceeded with 15, the component shows +9
valuenumberSpecifies number of notifications to display, if it set to 0, the element will be hidden
Panoramica
The <mds-notification> web component is a numeric badge/dot indicator of the Magma Design System that attaches to another element (an icon, a button, an avatar) to signal a count of pending items. It has no HTML primitive equivalent: it positions itself relative to a target element rather than wrapping content of its own.
Semantic Behavior
Target attachment: The component anchors to the element matched by the target selector and tracks it as it scrolls or resizes.Missing target falls back: If target is not set, positioning is disabled; if target is set but resolves to no element, it logs a console warning (mds-notification: no valid target found) and falls back to strategy="disabled" as well.Zero value: When value is 0 the badge renders without a number, as a plain dot; it is not hidden.Count overflow: When max is set and value exceeds it, the displayed text becomes +max (e.g. +9) instead of the raw number; otherwise the value is locale-formatted.Accessibility: The badge carries the current value as its own aria-label (the visible number is aria-hidden); it does not label the target.
Properties & Visual Configurations
target is the CSS selector of the element the badge anchors to; it is effectively mandatory for positioned rendering.value is the count shown in the badge and also the source of the accessible label; 0 shows a plain dot without a number.max caps the visible number - pick it when raw counts could grow large and you want a compact +N ceiling.dismissed hides the badge independently of its value (the badge is shown by default); it works with the floating strategies (fixed, absolute) only, with disabled the badge stays visible.
Other behavioral props
strategy selects the positioning mode ('fixed' by default, 'absolute', or 'disabled'). Use 'disabled' to opt out of dynamic tracking; it is also set automatically when no target is provided.