Avatar stack item<mds-avatar-stack-item>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à
toneenumSpecifies the color tone of the component
variantenumSpecifies the color variant of the component
initialsstringThe user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others
srcstringSpecifies the path to the image
countnumberSpecifies number of total avatars, the total number will be subtracted by the slotted ones
Panoramica
The <mds-avatar-stack-item> web component is a compound child that represents a single avatar inside an <mds-avatar-stack>, wrapping an internal <mds-avatar> so individual avatars can be overlapped, sized, and counted as a group rather than rendered standalone.
Semantic Behavior
Compound child only: It must be a direct slot child of <mds-avatar-stack>. It is not meant to be used standalone or mixed with other child types in the stack.Parent-driven sizing: The visual size of each item is governed by the parent’s size (sm / md / lg) - the child exposes no size prop of its own.Overflow / count badge: When count is set, the item renders as a numeric badge instead of a person. The parent uses this for the trailing “+N” indicator, computed from its total.Pass-through to mds-avatar: It forwards count, initials, src, tone, and variant straight to its internal <mds-avatar>; it adds no events, state, focus, or ARIA of its own.Initials override color: When initials are shown (no image available), they take precedence over tone and variant so each user stays visually distinguishable within the stack.
Properties & Visual Configurations
The shared tone / variant ladders are defined in agents/variants.md; tone accepts only the minimal set (weak default, strong) and variant accepts the avatar color set.src: Use for the primary case - a real user photo. When absent the avatar falls back to initials, and only when neither is provided do tone / variant define the placeholder appearance.initials: Provide a short identifier when no image exists; prefer it over relying on color alone, since it both labels and visually separates users in a dense stack.count: Set only to render an explicit overflow badge manually. In most cases this is computed for you by the parent’s total, so set it directly only when building the overflow indicator yourself.