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

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

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

@maggioli-design-system/mds-button @maggioli-design-system/styles @stencil/core clsx

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-571 @zalastax/nolb-_mag @maggioli-design-system/mds-tab

9 months ago

8 months ago

8 months ago

10 months ago