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".disableAutoPlacementdisable-auto-placementbooleanfalseIf set, the component will not be placed automatically near it’s caller.

disableShiftdisable-shiftbooleanfalseIf set, the component will not be kept inside the viewport.

flip - booleanfalseSpecifies the placement of the component if no space is available where it is placed.

offset - number12Sets distance between the tooltip and the caller.

placement - bottom | bottom-end | bottom-start | left | left-end | left-start | right | right-end | right-start | top | top-end | top-starttopSpecifies where the component should be placed relative to the caller.

relation - description | labeldescriptionSets what the tooltip is to its caller: its description (aria-describedby), or its label (aria-labelledby), when the tooltip holds the only visible name of the caller, as on an icon-only button.

shiftPaddingshift-paddingnumber12Sets a safe area distance between the tooltip and the viewport.

strategy - absolute | fixedfixedSets the CSS position strategy of the component.

target (obbligatoria) - stringSpecifies the selector of the target element, this attribute is used with querySelector method.

typography - caption | detail | tiptipSpecifies the font typography of the element

visible - booleanfalseSpecifies the visibility of the component.

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.(predefinito)Add text string to this slot, avoid to add HTML elements or components here.

Nessun nome slot