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".animation - fade | slide | undefinedReflects the parent tab selection animation (set by mds-tab); drives the slide-variant styling without :host-context

await - booleanSpecifies if the button is awaiting for a response

direction - horizontal | vertical | undefinedReflects the parent tab layout direction (set by mds-tab); drives the vertical layout without :host-context

disabled - boolean | undefinedSpecifies if the tab item is disabled or not

expanded - boolean | undefinedSpecifies whether the popup the tab item opens is showing. Left unset the tab says nothing about a popup, which is what a tab that opens none has to say.

href - string | undefinedTurns the tab into a link to this URL: the item renders a real anchor and is announced as a link, not as a tab, with aria-current when selected. A client-side router registered with NavigationService.setHandler() (from @maggioli-design-system/magma/services) takes the plain clicks over; without one, a click listener on the host can still cancel the navigation with preventDefault().

icon - string | undefinedThe icon displayed in the tab item

iconPositionicon-positionleft | right | undefinedleftSpecifies the horizontal position of the icon displayed in the tab item

label - string | undefinedThe label of the tab item

selected - boolean | undefinedSpecifies if the tab item is selected or not

size - lg | md | sm | xl | undefinedmdSpecifies the size for the tab item

type - a | button | reset | submit | undefinedsubmitThe type of the tab item element

value - string | undefinedSpecifies an optional value to get from mdsTabItemSelect event

Events

mdsTabItemFocusMdsTabItemEventDetailEmits when the tab item is selected

mdsTabItemSelectMdsTabItemEventDetailEmits when the tab item is selected