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".accessibleNamearia-labelstring | undefinedThe accessible name of the modal: the name a screen reader announces when the window opens. The <dialog> this component renders is the dialog, so the name goes there.

animation - 3d | custom | slide | undefinedslideSpecifies the animation style of the modal window

hideBackdrophide-backdropboolean | undefinedfalseHides the modal backdrop

interaction - relaxed | strictrelaxedSpecifies if the component can be closed with close button, or also if the backdrop background is cliccked. If strict is selected only the close button can dismiss the component via UI. If relaxed is selected the component can be dismissed also by cliccking the backdrop area.

opened - boolean | undefinedfalseSpecifies if the modal is opened or not

overflow - auto | manualautoSpecifies if the component prevents the body from scrolling when modal window is opened

position - bottom | bottom-left | bottom-right | center | left | right | top | top-left | top-right | undefinedcenterSpecifies the animation position of the modal window

Eventi

mdsModalClosevoidEmits when a modal is closed

mdsModalHidevoidEmits when a modal is totally invisible, can be useful to detach the component when it’s hidden and gain memory

mdsModalOpenvoidEmits when a modal is closed

mdsModalShowvoidEmits when a modal is totally visible, when the modal intro animation is finished

Metodi

closeclose() => Promise<void>Closes the modal.

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="bottom".(predefinito)Contents that will be placed in the center of the window. Add text string, HTML elements or components to this slot.

Nessun nome slot

bottomContents that will be placed on bottom of the window. Add text string, HTML elements or components to this slot.

topContents that will be placed on top of the window. Add text string, HTML elements or components to this slot.

windowUse directly a window component if you need it. Add text string, HTML elements or components to this slot.