@maggioli-design-system/mds-tab-item

mds-tab-item

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

Property	Attribute	Description	Type	Default
await	await	Specifies if the button is awaiting for a response	boolean	undefined
disabled	disabled	Specifies if the tab item is disabled or not	boolean | undefined	undefined
href	href	Specifies the URL target of the button	string | undefined	undefined
icon	icon	The icon displayed in the tab item	string | undefined	undefined
iconPosition	icon-position	Specifies the horizontal position of the icon displayed in the tab item	"left" | "right" | undefined	'left'
selected	selected	Specifies if the tab item is selected or not	boolean | undefined	undefined
size	size	Specifies the size for the tab item	"lg" | "md" | "sm" | "xl" | undefined	'md'
type	type	The type of the tab item element	"a" | "button" | "reset" | "submit" | undefined	'submit'
value	value	Specifies an optional value to get from mdsTabItemSelect event	string | undefined	undefined

Events

Event	Description	Type
mdsTabItemFocus	Emits when the tab item is selected	CustomEvent<MdsTabItemEventDetail>
mdsTabItemSelect	Emits when the tab item is selected	CustomEvent<MdsTabItemEventDetail>

Slots

Slot	Description
"default"	Put text string here, avoid elements

Shadow Parts

Part	Description
"button"

Dependencies

Used by

• mds-input-upload
• mds-pref-animation
• mds-pref-consumption
• mds-pref-contrast
• mds-pref-language
• mds-pref-theme

Depends on

• mds-button

Graph

graph TD;
  mds-tab-item --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  mds-input-upload --> mds-tab-item
  mds-pref-animation --> mds-tab-item
  mds-pref-consumption --> mds-tab-item
  mds-pref-contrast --> mds-tab-item
  mds-pref-language --> mds-tab-item
  mds-pref-theme --> mds-tab-item
  style mds-tab-item fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department