@maggioli-design-system/mds-tab-item v8.7.2
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
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:4pxBuilt with love @ Gruppo Maggioli from R&D Department
9 months ago
8 months ago
8 months ago
10 months ago
9 months ago
6 months ago
7 months ago
9 months ago
8 months ago
9 months ago
9 months ago
1 year ago
12 months ago
12 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago