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

mds-accordion-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
`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'`

Events

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>`

Slots

Slot	Description
`"default"`	Add contents 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

CSS Custom Properties

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

Dependencies

Depends on

mds-text

Graph

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

@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

11 months ago

1 year ago

1 year ago

7 months ago

7 months ago

9 months ago

9 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago