Il primo esempio della pagina Pattern, dal vivo.

Panoramica

The <mds-tab-bar> web component is the compound container of the Magma Design System that groups a set of <mds-tab-bar-item> children into a single selectable navigation bar, owning the mutual-exclusion logic that keeps exactly one item active at a time. The bar is fixed to the bottom edge of the viewport (position: fixed), full width.

Semantic Behavior

Compound parent/child: It accepts only <mds-tab-bar-item> elements in its default slot and acts purely as their coordinator.Single active selection: When one item reports selection, the others are deselected - enforcing one-active-at-a-time behavior.Change notification: After resolving the new selection it emits mdsTabBarChange whose detail carries the zero-based index of the newly selected item, intended to drive panel/view switching by the consumer.Default-slot semantics: The slot is structural (it expects components, not text); the textual label lives inside each <mds-tab-bar-item> instead.

Properties & Visual Configurations

<mds-tab-bar> itself exposes no configuration props - its appearance and content are entirely determined by the <mds-tab-bar-item> children it wraps. The relevant intent lives on those children: selected marks which item is active. The parent rewrites it during selection changes; set it on a single child to define the initial active tab.icon is an SVG filename slug from the Magma icon library, rendered above the item’s text label.typography selects the text scale of the item label from the smaller-typography ladder (defaulting to 'tip'), letting authors match tab density to surrounding chrome. This component does not use the shared variant / tone ladders defined in agents/variants.md.