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à

alldesktopmobilenonemenuenumSets the visibility type of the hamburger menu of mds-header-bar

alldesktopmobilenonenavenumSets the visibility type of the navigation menu of mds-header-bar

hiddenvisiblevisibilityenumSets the visibility type of the navigation menu of mds-header-bar

hideBackdrophideBackdropbooleanHides the backdrop shown when the mds-header-bar attribute appearace is set to inline

appearancestringSets the appearance of the header bar element when loaded, it can be changed depending on how appearance-set attribute is set

appearanceSetstringSets the appearance of the header bar element depending on the scroll position you should set three different values: initial appearance, changed appearance and window.scrollY threshold Es: appearance-set="stripe, inline 200" means the component will start with stripe appearance that will change to inline if the page is scrolled more of 199 pixels

autoHidenumberWhen the page is scrolled down, the component mds-header-bar is hidden starting from the autoHide attribute's value, then if the page is scrolled up it is shown again

thresholdnumberSets the threshold margin to trigger hide or show status of the mds-header-bar when the page is scrolled

Panoramica

The <mds-header> web component is the top-level page header container of the Magma Design System. It is a compound parent that wraps one or more <mds-header-bar> elements, orchestrating their scroll-driven appearance, auto-hide visibility, and an optional mobile menu rendered as a side modal.

Semantic Behavior

Compound parent: Hosts <mds-header-bar> children in the default slot and relays its menu and nav settings down to the bar.Mobile menu: A [slot="menu"] child is rendered inside a right-positioned modal. When it is absent there is no modal, but the bar still receives menu and shows its hamburger, which then opens nothing: set menu="none" in that case.Open/close control: The menu modal is opened by the bar’s hamburger or programmatically via the setOpened() method; when the user closes it, mdsHeaderClose is emitted (with the bound bar).Scroll-driven appearance: When appearanceSet names two appearances, appearance swaps between them as the page scrolls past its pixel threshold (300 when the third token is omitted).Auto-hide on scroll: When autoHide is set, scrolling down past that pixel offset hides the bar and scrolling up reveals it again, governed by threshold as the directional margin.Visibility event: Any change to visibility ('visible'/'hidden') emits mdsHeaderVisibilityChange, whose detail.visibility is that string.

Properties & Visual Configurations

appearance is the bar’s current visual mode ('stripe' or 'inline') and is mutable because the component rewrites it as the page scrolls.appearanceSet is a space/comma-separated string declaring scroll behavior as three tokens: initial appearance, changed appearance, and the scrollY pixel threshold (e.g. "stripe, inline 200"). Use it instead of appearance when the header should transform on scroll; appearance alone keeps a fixed look.autoHide is the pixel offset past which the bar starts hiding on downward scroll; leave it unset to keep the bar always present.threshold tunes how many pixels of opposite-direction scroll are required to flip the auto-hide state - raise it to make hide/show less twitchy.menu and nav select on which viewports the hamburger menu and the navigation are shown ('all', 'desktop', 'mobile', 'none'); they are relayed to the child bar.hideBackdrop removes the blurred backdrop layer shown behind the bar when its appearance is 'inline'.visibility reflects the current shown/hidden state of the bar and can be set to force it.

Dipendenze

Usa: mds-modal