6.7.5 • Published 21 days ago
@maggioli-design-system/mds-tab-item v6.7.5
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 JavaScirpt framework you are using.
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
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 |
---|---|---|
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" |
CSS Custom Properties
Name | Description |
---|---|
--mds-tab-item-background | Sets the background color of the component |
--mds-tab-item-background-hover | Sets the background when the mouse is over the component |
--mds-tab-item-background-selected | Sets the background when the component is selected |
--mds-tab-item-color | Sets the color of the component |
--mds-tab-item-color-hover | Sets the color when the mouse is over the component |
--mds-tab-item-color-selected | Sets the color when the component is selected |
--mds-tab-item-radius | Sets the border-radius of the component |
--mds-tab-item-shadow-selected | Sets the box-shadow when the component is selected |
Dependencies
Used by
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
style mds-tab-item fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department
6.7.5
21 days ago
6.7.4
3 months ago
6.7.3
3 months ago
6.7.2
3 months ago
6.7.1
3 months ago
6.7.0
3 months ago
6.5.0
3 months ago
6.6.0
3 months ago
6.3.4
4 months ago
6.3.3
4 months ago
6.3.2
5 months ago
6.1.0
8 months ago
6.0.0
10 months ago
6.3.0
6 months ago
6.1.2
7 months ago
6.2.0
6 months ago
6.1.1
8 months ago
6.3.1
6 months ago
5.0.1
11 months ago
5.0.0
11 months ago
4.3.0
12 months ago
4.2.0
12 months ago
4.1.0
1 year ago
4.0.1
1 year ago
2.0.2
1 year ago
3.1.0
1 year ago
3.0.0
1 year ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago