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".arrowPaddingarrow-paddingnumber24Sets the distance between arrow and dropdown margins.

backdrop - boolean | undefinedfalseSpecifies if the component has a backdrop background

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.

disableSmoothdisable-smoothbooleanfalseIf set, the component will not follow the caller smoothly when the page scrolls.

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

hideArrowhide-arrowbooleanfalseIf set, the component will not have an arrow pointing to the caller.

interaction - click | mouseover | noneclickSpecifies if the component is triggered from the caller on mouseover or click event

offset - number24Sets distance between the dropdown and the caller.

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

shiftPaddingshift-paddingnumber24Sets a safe area distance between the dropdown and the viewport.

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

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

visible - booleanfalseSpecifies the visibility of the component.

zIndexz-indexnumberSpecifies the visibility of the component.

Events

mdsDropdownChangeMdsDropdownEventDetailEmits when a modal is visible or hidden

mdsDropdownHideMdsDropdownEventDetailEmits when a modal is hidden

mdsDropdownVisibleMdsDropdownEventDetailEmits when a modal is visible

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.(default)Add text string, HTML elements or components to this slot, elements will be shown when the component is triggered.

No slot name