Salta ai contenuti
Magma Design System
List item<mds-list-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à
typographyenumSpecifies the typography of the element
variantenumSpecifies the variant for typography
iconstringSpecifies the icon displayed in the element
Panoramica
The <mds-list-item> web component is the single entry of a Magma list, designed to be slotted exclusively inside its parent <mds-list>. It plays the role of a native <li>, pairing a leading icon with a text string so that the parent <mds-list> can present a coherent, accessible list.
Semantic Behavior
Compound child only: Must be placed as a direct default-slot child of <mds-list>; it is not used standalone or mixed with other element types.Leading icon is always present: The component renders an icon before its text; when no icon is supplied it falls back to a built-in list-dot glyph, which is decorative.Text-only default slot: The default slot is intended for a plain text string; adding HTML elements or other components here is discouraged.Inherited text colour: The item sets no colour of its own: its text and its leading icon take the colour of the container, as <mds-text> does, so a list reads like the paragraphs around it and follows a container that sets its own colour (a tinted card, a banner). For a secondary list, set the muted role on <mds-list> or on its container (text-fg-muted).
Properties & Visual Configurations
typography: Selects the text style of the item (default detail), drawn from the shared typography scale; pick the value that matches the density and hierarchy of the surrounding list content.variant: Refines the chosen typography (default info); use read for long-form reading contexts and info for compact informational lists.icon: Overrides the default list-dot with a named icon when a list entry benefits from a meaningful leading glyph; leave unset to keep the standard bullet.
Dipendenze
Usa: mds-icon, mds-text