I componenti Magma sono web component: elementi personalizzati che scrivi come i tag HTML, con qualsiasi framework o senza. Le proprietà li configurano, gli eventi dicono cosa è successo, i metodi sono funzioni da chiamare sull'elemento e gli slot accolgono il contenuto che metti al suo interno.

Proprietà

Imposta una proprietà come attributo HTML nel markup, oppure come proprietà da JavaScript. La colonna Attributo dà il nome dell'attributo, un trattino quando coincide con la proprietà; le proprietà senza attributo, come array e funzioni, si impostano solo da JavaScript. Per spegnere un attributo booleano, rimuovilo: non scrivere mai 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

Eventi

mdsHeaderCloseMdsHeaderEventDetailEmits when the component is closed

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

Metodi

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

Slot

Gli slot accolgono il contenuto che scrivi tra i tag del componente. Lo slot predefinito, quello senza nome, accetta solo testo, salvo dove la sua descrizione dice altrimenti. Il contenuto di uno slot con nome va su un figlio diretto, con il nome dello slot nell'attributo slot, ad esempio slot="menu".(predefinito)Add mds-header-bar element/s.

Nessun nome slot

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