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

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 JavaScript 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
duration	duration	Specifies the duration of the single component when selected, it overrides the global duration of itself only	number | undefined	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>
mdsAccordionTimerItemSelect	Emits when the accordion is changed from code	CustomEvent<MdsAccordionTimerItemEventDetail>

Slots

Slot	Description
"default"	Add content like text string, HTML elements or components to this slot

Shadow Parts

Part	Description
"content"	the content wrapper of the default slot
"icon"	The arrow icon of the component
"label"	The text label of the component
"progress"	The progress bar of the component

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

• mds-progress
• mds-text

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