Magma components are web components: custom elements you write like HTML tags, with any framework or without one. Props configure them, events tell you what happened, methods are functions you call on the element and slots take the content you put inside it.

Props

Set a prop as an HTML attribute in the markup, or as a property from JavaScript. The Attribute column gives the name of the attribute, a dash when it is the same as the property; props without one, such as arrays and functions, are set from JavaScript only. To turn a boolean attribute off, remove it: never write disabled="false".appearance - stringstripeSets the appearance of the header bar element when loaded, it can be changed depending on how appearance-set attribute is set

appearanceSetappearance-setstring | undefinedSets 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

autoHideauto-hidenumber | undefinedWhen 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

hideBackdrophide-backdropboolean | undefinedfalseHides the backdrop shown when the mds-header-bar attribute appearace is set to inline

menu - all | desktop | mobile | nonemobileSets the visibility type of the hamburger menu of mds-header-bar

nav - all | desktop | mobile | nonedesktopSets the visibility type of the navigation menu of mds-header-bar

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

visibility - hidden | visible | undefinedvisibleSets the visibility type of the navigation menu of mds-header-bar

Events

mdsHeaderCloseMdsHeaderEventDetailEmits when the component is closed

mdsHeaderVisibilityChangeMdsHeaderVisibilityEventDetailEmits when the component mds-header-bar is shown or hidden

Methods

setOpenedsetOpened(isOpened?: boolean) => Promise<void>Opens or closes the header.

Slots

Slots take the content you write between the tags of the component. The default slot, the one without a name, accepts plain text, unless its description says otherwise. Content for a named slot goes on a direct child with the name of the slot in its slot attribute, such as slot="menu".(default)Add mds-header-bar element/s.

No slot name

menuPut actions and other contents that will be shown as mobile menu. Add text string, HTML elements or components to this slot.