Il primo esempio della pagina Pattern, dal vivo.

Panoramica

The <mds-kpi> web component is the layout container of the Magma Design System for presenting groups of key performance indicators. It is a compound parent with no props of its own: it establishes an accessible list region and hosts one or more <mds-kpi-item> children that render the actual figures.

Semantic Behavior

List semantics: The host exposes its <mds-kpi-item> children as a single semantic list group to assistive technology.Compound relationship: It carries no value or configuration itself; every metric - label, description, icon, and on-scroll animation - is defined on the slotted <mds-kpi-item> children.Default slot is content: The default slot is meant exclusively for <mds-kpi-item> elements; anything else has no styled placement.

Properties & Visual Configurations

<mds-kpi> itself exposes no props. Configuration happens on the <mds-kpi-item> children and through the CSS custom properties this component publishes for them.

Other behavioral props

--mds-kpi-text-animation-speed and --mds-kpi-text-animation-placeholder-char: tune the scramble/reveal text effect used by children. The animation only runs when a child sets a non-zero threshold, which animates the value in once the item scrolls into view; with the default threshold of 0 the figure renders statically.