@maggioli-design-system/mds-tab-bar-item
v5.1.0
Published
mds-tab-bar-item is a web-component from Magma Design System, 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.
Downloads
671
Readme
mds-tab-bar-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 |
| ------------ | ------------ | --------------------------------------------- | -------------------------------- | ----------- |
| icon
| icon
| | string
| ''
|
| selected
| selected
| Specifies if the component is selected or not | boolean
| undefined
|
| typography
| typography
| Specifies the typography of the element | "option" \| "tip" \| undefined
| 'tip'
|
Events
| Event | Description | Type |
| --------------------- | ------------------------------------ | --------------------- |
| mdsTabBarItemSelect
| Emits when the component is selected | CustomEvent<string>
|
Slots
| Slot | Description |
| ----------- | -------------------------------------------------------------------------------------- |
| "default"
| Add text string
to this slot, avoid to add HTML elements
or components
here. |
CSS Custom Properties
| Name | Description |
| ---------------------------------------- | ------------------------------------------------------------- |
| --mds-tab-bar-item-background
| Sets the background-color of the component |
| --mds-tab-bar-item-background-selected
| Sets the background-color of the component when it's selected |
| --mds-tab-bar-item-color
| Sets the text color of the component |
| --mds-tab-bar-item-color-selected
| Sets the text color of the component when it's selected |
Dependencies
Depends on
Graph
graph TD;
mds-tab-bar-item --> mds-icon
mds-tab-bar-item --> mds-text
style mds-tab-bar-item fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department