API accordion

collapse(itemId): Promise<void>

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

If the itemId is not valid, nothing will happen.

string

Promise<void>

A promise that resolves when the collapse operation is completed.

collapseAll(): Promise<void>

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

Promise<void>

A promise that resolves when all the collapse operations are completed.

expand(itemId): Promise<void>

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

If the itemId is not valid, nothing will happen.

string

Promise<void>

A promise that resolves when the expand operation is completed.

expandAll(): Promise<void>

It will expand all the items in the accordion.

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

Promise<void>

A promise that resolves when all the expand operations are completed.

registerItem(itemConfig?): AccordionItemWidget

Creates a new accordionItem.

PropsConfig<AccordionItemProps>

AccordionItemWidget

toggle(itemId): Promise<void>

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

string

Promise<void>

A promise that resolves when the toggle operation is completed. If the itemId is not valid, nothing will happen.

accordionDirective: Directive

Directive to put on the accordion DOM element

collapse(): Promise<void>

It will collapse the accordion-item.

Promise<void>

A promise that resolves when the collapse operation is completed.

expand(): Promise<void>

It will expand the accordion-item.

Promise<void>

A promise that resolves when the expand operation is completed.

initDone(): void

Method to be called after the initialization to allow animations.

void

toggle(): Promise<void>

It will toggle the accordion-item.

Promise<void>

A promise that resolves when the toggle operation is completed.

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.

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.

headerClassName: string

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

headingLevel: 1 | 2 | 3 | 4 | 5 | 6

The html heading level 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.

boolean

void

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.

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.

headerClassName: string

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

headingLevel: 1 | 2 | 3 | 4 | 5 | 6

The html heading level 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.

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.

''

itemHeadingLevel: 1 | 2 | 3 | 4 | 5 | 6

The html heading level to use for the accordion-item-header.

2

itemTransition: TransitionFn

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

() => {}

onItemHidden: (itemId) => void

An event fired when an item is hidden.

Event payload is the id of the item.

string

void

() => {}

onItemShown: (itemId) => void

An event fired when an item is shown.

Event payload is the id of the item.

string

void

() => {}

className: string

CSS classes to be applied on the widget main container

''

itemWidgets: AccordionItemWidget[]

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

config

config of the accordion, either as a store or as an object containing values or stores.

a new accordion widget instance

PropsConfig<AccordionItemProps>

config of the accordion item, either as a store or as an object containing values or stores.

AccordionItemWidget

a new accordion item widget instance

WidgetFactory<AccordionItemWidget> = createAccordionItem

the item factory

string[] = coreAccordionItemProps

the list of item props

AccordionProps = defaultAccordionConfig

the default accordion config

ConfigValidator<AccordionProps> = configAccordionValidator

the validator of props

WidgetFactory<AccordionWidget>

the accordion widget factory

AccordionProps

the default accordion config