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 JavaScirpt framework you are using.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
label (required)
|
label |
Specifies the title shown when the component is closed or selected | string |
undefined |
selected |
selected |
Specifies if the component item is selected or not | boolean | undefined |
undefined |
typography |
typography |
Specifies the typography of the element | "action" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined |
'h5' |
Event | Description | Type |
---|---|---|
mdsAccordionItemChange |
Emits when the component attribute selected is changed | CustomEvent<MdsAccordionItemEventDetail> |
mdsAccordionItemSelect |
Emits when the component is selected | CustomEvent<MdsAccordionItemEventDetail> |
mdsAccordionItemUnselect |
Emits when the component is unselected | CustomEvent<MdsAccordionItemEventDetail> |
Slot | Description |
---|---|
"default" |
Add contents like text string , HTML elements or components to this slot. |
Part | Description |
---|---|
"contents" |
|
"label" |
Name | Description |
---|---|
--mds-accordion-item-border-color |
Sets the border-color of the component |
--mds-accordion-item-border-width |
Sets the border-width of the separators of the component |
--mds-accordion-item-color |
Sets the text-color of the component |
--mds-accordion-item-description-color |
Sets the color of the always visible title description |
--mds-accordion-item-duration |
Sets the transition duration of the close/open animation of the component |
--mds-accordion-item-padding-selected |
Sets the vertical padding of the component when it's selected |
--mds-accordion-item-padding-unselected |
Sets the vertical padding of the component when it's unselected |
graph TD;
mds-accordion-item --> mds-text
style mds-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department