Tab<mds-tab>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à
animationenumSets the animation type of the selection transition between mds-tab-item elements
directionenumSets if the component distributes item vertically or horzontally
sizeenumSets the size of the component items nested inside it
fillfillbooleanSets if the tab area should fill the entire width
overflowoverflowbooleanSets if the tab area should show an inset shadow when the tabs overflows it's container
scrollbarscrollbarbooleanShows the horizontal scrollbar to maximize accessibility
Panoramica
The <mds-tab> web component is the compound container that orchestrates a tabbed navigation in the Magma Design System. It is the parent wrapper around a set of <mds-tab-item> triggers and, when the component shows the content itself, their content panels, providing the ARIA tablist structure, selection state, scrolling and the animated selection indicator.
Semantic Behavior
Compound parent: Expects <mds-tab-item> elements in the default slot; each panel in the named content slot is wired up automatically and paired by document order. The panels are optional: without them the component shows the strip alone, and the page shows the content, driven by mdsTabChange or by navigation.Navigation strip: When every item has href, the items are links (announced as such, the selected one as current) and the strip is no longer a tablist: the browser follows the links, in a new tab on a modifier or middle click, and the strip keeps the selected item highlighted. A client-side router cancels the click on the item with preventDefault() and routes; a modifier click leaves the selection alone.Selection ownership: The active tab is whichever <mds-tab-item> carries selected; the parent flips selected across siblings, shows the corresponding content panel and hides the rest.Change event: Emits mdsTabChange with the selected item’s index (id) and value whenever the active child changes.Focus restoration: After a keyboard activation it re-focuses the selected item’s button, so the user does not have to re-locate the tab.Auto-scroll into view: On selection or child focus, the active tab is scrolled to the center of its strip.Overflow tracking: When overflow is enabled, left/right inset shadows appear while the tabs overflow their container.Size propagation: The parent size is pushed down onto every nested <mds-tab-item>, so children should not be sized individually.
Properties & Visual Configurations
direction chooses whether the tab strip is laid out 'horizontal' (default) or 'vertical'.animation governs the transition between active items: 'slide' (default) renders the moving slider indicator, while 'fade' cross-fades without the slider. The slider slides only when the selection changes: on load, and when the strip is shown again after being hidden, it is already under the selected tab.fill makes the tab strip stretch to occupy the full available width rather than hugging its content.overflow enables the inset-shadow affordance that signals more tabs exist beyond the visible edges; scrollbar instead exposes the native horizontal scrollbar for accessibility.
Other behavioral props
size sets the scale ('sm' / 'md') for the whole group and is forwarded to the child items; it is the only way to size the tabs consistently.