Horizontal scroll<mds-horizontal-scroll>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à
controlsenumSpecifies the viewport which will display navigation controls
navigationenumSpecifies the box’s snap position as an alignment of its snap area
snapenumSpecifies the box’s snap position as an alignment of its snap area
Panoramica
The <mds-horizontal-scroll> web component is a horizontally scrolling container of the Magma Design System. It wraps any slotted content in a snap-scrolling viewport and overlays optional navigation controls, replacing the manual overflow/scroll-snap CSS plumbing you would otherwise write around a <div>.
Semantic Behavior
Slotted children drive scrolling: The default slot’s children are the scrollable items.Navigation buttons: When controls resolves to a viewport other than 'none', two arrow buttons are rendered, icon-only and named in the page language (the lang of <html>) (“Scroll back”, “Scroll forward”); each advances the scroll position to the next/previous item not fully in the viewport. Browsers without the scrollend event get no arrows: the component clears controls there.Auto-disabled arrows: The back arrow hides/disables when the first item is fully visible and the forward arrow when the last item is.Position indicator: With navigation="position" a proportional dot is rendered; its width reflects the visible/total ratio and it translates along its track as the container scrolls.No focus or form semantics: This is a presentational scroll container - it is not form-associated, exposes no implicit ARIA role, and emits no custom events.
Properties & Visual Configurations
controls selects the smallest viewport breakpoint at which the arrow navigation appears (default 'desktop'); pick a wider tier like 'large' or 'wide' to show arrows only on big screens, or 'none' to suppress them entirely. The chosen value is the threshold, not a single device.navigation chooses the scroll-progress affordance: 'position' renders the translating dot indicator, 'scrollbar' defers to the styled native browser scrollbar, and 'none' shows neither.snap sets the scroll-snap alignment of each item against the viewport - 'start' (default) aligns items to the leading edge, 'center' keeps them centred, 'end' to the trailing edge, and 'none' disables snapping for free scrolling.This component does not use the shared variant / tone ladders defined in agents/variants.md; appearance is tuned entirely through its CSS custom properties (see AGENTS.md).