@maggioli-design-system/mds-accordion

mds-accordion

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
closable	closable	Specifies if an item can be closed by user	boolean | undefined	true
multiple	multiple	Choose if multiple siblings can be selected simultaneously	boolean | undefined	false

Events

Event	Description	Type
mdsAccordionChange	Emits when the component attribute selected is changed	CustomEvent<MdsAccordionEventDetail>

Slots

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

CSS Custom Properties

Name	Description
--mds-accordion-border-color	Sets the border-color of the component children mds-accordion-item
--mds-accordion-color	Sets the text-color of the component children mds-accordion-item
--mds-accordion-description-color	Sets the color of the always visible title description
--mds-accordion-duration	Sets the transition duration of the close/open animation of the component children mds-accordion-item
--mds-accordion-padding-selected	Sets the vertical padding of the component children mds-accordion-item when it's selected
--mds-accordion-padding-unselected	Sets the vertical padding of the component children mds-accordion-item when it's unselected

Built with love @ Gruppo Maggioli from R&D Department