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".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

Eventi

mdsTabItemFocusMdsTabItemEventDetailEmits when the tab item is selected

mdsTabItemSelectMdsTabItemEventDetailEmits when the tab item is selected