Accordion

• props: Partial<AccordionProps> & object & RefAttributes<AccordionApi>

The properties for the Accordion component.

ReactNode

The rendered Accordion component.

collapse(itemId): void

Given the itemId, will collapse the corresponding accordion-item.

If the itemId is not valid, nothing will happen.

• itemId: string

void

collapseAll(): void

It will collapse all the accordion-items in the accordion.

void

expand(itemId): void

Given the itemId, will expand the corresponding accordion-item.

If the itemId is not valid, nothing will happen.

• itemId: string

void

expandAll(): void

It will expand all the items in the accordion.

If closeOthers is true it will expand only the last accordion-item.

void

registerItem(itemConfig?): AccordionItemWidget

Creates a new accordionItem.

• itemConfig?: PropsConfig<AccordionItemProps>

AccordionItemWidget

toggle(itemId): void

Given the itemId, will toggle the corresponding accordion-item.

If the itemId is not valid, nothing will happen.

• itemId: string

void

accordionDirective: Directive

Directive to put on the accordion DOM element

• props: Partial<AccordionItemProps> & RefAttributes<AccordionItemApi>

The properties for the AccordionItem component.

ReactNode

The rendered AccordionItem component.

This component uses several hooks:

• useContext to get the registerItem function from AccordionDIContext.
• useWidgetWithConfig to initialize the widget context.
• useImperativeHandle to expose the api to the parent component.
• useEffect to call api.initDone() after the component mounts.

The component also uses useDirectives to apply directives to the rendered div element.

• useWidgetWithConfig
• useDirectives

collapse(): void

It will collapse the accordion-item.

void

expand(): void

It will expand the accordion-item.

void

initDone(): void

Method to be called after the initialization to allow animations.

void

toggle(): void

It will toggle the accordion-item.

void

api: AccordionItemApi

all the api functions to interact with the widget

directives: AccordionItemDirectives

directives to be used on html elements in the template of the widget or in the slots

state: AccordionItemState

the state of the widget

• slotContext: AccordionItemContext

The context containing state and directives for the accordion item.

Element

The JSX element representing the accordion item's default slot structure.

bodyContainerAttrsDirective: Directive

Directive to apply aria attributes to the expanded body panel

bodyContainerDirective: Directive

Directive to be put on the accordion-item body container. It will handle the animation.

bodyDirective: Directive

Directive to put on the accordion-item body.

buttonDirective: Directive

Directive to put on the button element that will control the collapsing of the accordion-item.

headerDirective: Directive

Directive to put on the accordion-item header that will contain the button element.

itemDirective: Directive

Directive to be put on the accordion-item. It will handle adding the accordion-item to the accordion.

toggleDirective: Directive

Directive to use in special cases, if the accordion header does not use a button element to control the collapsing.

transitionDirective: Directive

Directive to apply the itemTransition

animated: boolean

If true, accordion-item will be animated.

bodyClassName: string

CSS classes to add on the accordion-item body DOM element.

bodyContainerClassName: string

CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.

buttonClassName: string

CSS classes to add on the accordion-item collapse DOM element.

children: SlotContent<AccordionItemContext>

Content present in the accordion body.

It is a prop of the accordion-item.

className: string

CSS classes to be applied on the widget main container

''

destroyOnHide: boolean

If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.

disabled: boolean

If true, the accordion-item will be disabled. It will not react to user's clicks, but still will be possible to toggle programmatically.

header: SlotContent<AccordionItemContext>

Content present in the accordion button inside the accordion header.

It is a prop of the accordion-item.

headerClassName: string

CSS classes to add on the accordion-item header DOM element.

headingTag: string

The html tag to use for the accordion-item-header.

id: string

The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.

onHidden: () => void

An event fired when an item is hidden.

void

onShown: () => void

An event fired when an item is shown.

void

onVisibleChange: (visible) => void

An event fired when the visible value changes.

Event payload is the new value of visible.

• visible: boolean

void

structure: SlotContent<AccordionItemContext>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

transition: TransitionFn

The transition to use for the accordion-item body-container when the accordion-item is toggled.

visible: boolean

If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).

bodyClassName: string

CSS classes to add on the accordion-item body DOM element.

bodyContainerClassName: string

CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.

buttonClassName: string

CSS classes to add on the accordion-item collapse DOM element.

children: SlotContent<AccordionItemContext>

Content present in the accordion body.

It is a prop of the accordion-item.

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

If true, the accordion-item will be disabled. It will not react to user's clicks, but still will be possible to toggle programmatically.

header: SlotContent<AccordionItemContext>

Content present in the accordion button inside the accordion header.

It is a prop of the accordion-item.

headerClassName: string

CSS classes to add on the accordion-item header DOM element.

headingTag: string

The html tag to use for the accordion-item-header.

id: string

The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.

shouldBeInDOM: boolean

If true the content of the accordion-item collapse should be in DOM. Its value depends on the value of the visible and destroyOnHide.

structure: SlotContent<AccordionItemContext>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

visible: boolean

If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).

className: string

CSS classes to be applied on the widget main container

''

closeOthers: boolean

If true, only one accordion-item at the time can stay open.

false

itemAnimated: boolean

If true, accordion-item will be animated.

true

itemBodyClassName: string

CSS classes to add on the accordion-item body DOM element.

''

itemBodyContainerClassName: string

CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.

''

itemButtonClassName: string

CSS classes to add on the accordion-item toggle button DOM element.

''

itemClassName: string

CSS classes to add on the accordion-item DOM element.

''

itemDestroyOnHide: boolean

If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.

true

itemHeaderClassName: string

CSS classes to add on the accordion-item header DOM element.

''

itemHeadingTag: string

The html tag to use for the accordion-item-header.

''

itemStructure: SlotContent<AccordionItemContext>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

itemTransition: TransitionFn

The transition to use for the accordion-item body-container when the accordion-item is toggled.

collapseVerticalTransition

onItemHidden: (itemId) => void

An event fired when an item is hidden.

Event payload is the id of the item.

• itemId: string

void

() => {}

onItemShown: (itemId) => void

An event fired when an item is shown.

Event payload is the id of the item.

• itemId: string

void

() => {}

className: string

CSS classes to be applied on the widget main container

''

itemStructure: SlotContent<AccordionItemContext>

Structure of the accordion-item. The default item structure is: accordion-item contains accordion header and accordion-item body container; the accordion header contains the accordion button (that contains header), while the accordion-item body container contains the accordion body (that contains children). The itemTransition is applied on this element.

It is a prop of the accordion-item.

itemWidgets: AccordionItemWidget[]

Array containing all the accordion-items contained in the accordion.

• props?: PropsConfig<AccordionProps>

AccordionWidget

an AccordionWidget

• props?: PropsConfig<AccordionItemProps>

AccordionItemWidget

an AccordionItemWidget

• itemFactory?: WidgetFactory<AccordionItemWidget>

the item factory

• accordionItemProps?: string[]

the list of item props

• accordionConfig?: AccordionProps

the default accordion config

• accordionValidator?: ConfigValidator<AccordionProps>

the validator of props

WidgetFactory<AccordionWidget>

the accordion widget factory

AccordionProps

the default accordion config