@maggioli-design-system/mds-accordion-timer

mds-accordion-timer

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
duration	duration	Sets the duration of the single accordion item	number	10000
paused	paused	When paused is defined, the timer stops run	boolean | undefined	undefined

Events

Event	Description	Type
mdsAccordionTimerChange	Emits when the accordion changes it's item	CustomEvent<MdsAccordionTimerEventDetail>

Slots

Slot	Description
"default"	Add mds-accordion-timer-item element/s.

CSS Custom Properties

Name	Description
--mds-accordion-timer-color	Sets the text color of the component mds-accordion-timer-item
--mds-accordion-timer-duration	Sets the transition duration of open/close animation of the mds-accordion-timer-item
--mds-accordion-timer-progress-bar-background	Sets the background-color of the progress bar when the mds-accordion-timer-item is selected
--mds-accordion-timer-progress-bar-color	Sets the color of the progress bar when the mds-accordion-timer-item is selected
--mds-accordion-timer-progress-bar-thickness	Sets thickness of the progress bar of the mds-accordion-timer-item

---

Built with love @ Gruppo Maggioli from R&D Department