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

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

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

@maggioli-design-system/mds-progress @maggioli-design-system/mds-text @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570 @zalastax/nolb-_mag @maggioli-design-system/mds-accordion-timer

6 months ago

7 months ago

5 months ago

8 months ago