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