3.8.4 • Published 21 days ago
@maggioli-design-system/mds-accordion-timer-item v3.8.4
mds-accordion-timer-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 |
---|---|---|---|---|
description (required) | description | Specifies the title shown when the accordion is closed or opened | string | undefined |
progress | progress | A value between 0 and 100 that rapresents the status progress | number | 0 |
selected | selected | Specifies if the accordion item is opened or not | boolean | false |
typography | typography | Specifies the typography of the element | "action" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" | 'h5' |
uuid | uuid | Used automatically by MdsAccordionTimer wrapper to handle it's siblings | number | 0 |
Events
Event | Description | Type |
---|---|---|
mdsAccordionTimerItemClickSelect | Emits when the accordion is clicked by the mouse | CustomEvent<MdsAccordionTimerItemEventDetail> |
mdsAccordionTimerItemMouseEnterSelect | Emits when the accordion is hovered by the mouse | CustomEvent<MdsAccordionTimerItemEventDetail> |
mdsAccordionTimerItemMouseLeaveSelect | Emits when the accordion is hovered by the mouse | CustomEvent<MdsAccordionTimerItemEventDetail> |
Slots
Slot | Description |
---|---|
"default" | Add contents like text string , HTML elements or components to this slot. |
CSS Custom Properties
Name | Description |
---|---|
--mds-accordion-timer-item-color | Sets the text color of the component |
--mds-accordion-timer-item-duration | Sets the transition duration of open/close animation |
--mds-accordion-timer-item-progress-bar-background | Sets the background-color of the progress bar when the item is selected |
--mds-accordion-timer-item-progress-bar-color | Sets the color of the progress bar when the item is selected |
--mds-accordion-timer-item-progress-bar-thickness | Sets thickness of the progress bar |
Dependencies
Depends on
Graph
graph TD;
mds-accordion-timer-item --> mds-progress
mds-accordion-timer-item --> mds-text
style mds-accordion-timer-item fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department
3.8.4
21 days ago
3.8.3
3 months ago
3.8.2
3 months ago
3.8.1
3 months ago
3.8.0
3 months ago
3.7.0
3 months ago
3.6.4
4 months ago
3.6.3
4 months ago
3.6.2
5 months ago
3.3.1
7 months ago
3.3.0
8 months ago
3.6.1
6 months ago
3.6.0
6 months ago
3.5.0
6 months ago
3.3.2
7 months ago
3.2.0
11 months ago
3.1.1
1 year ago
3.1.0
1 year ago
3.0.1
1 year ago
3.0.0
1 year ago
2.2.0
1 year ago
2.1.1
1 year ago
2.1.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