Interface representing the API for an 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>
toggle(
itemId):void
Given the itemId, will toggle the corresponding accordion-item.
If the itemId is not valid, nothing will happen.
• itemId: string
void
Interface representing the directives used in the Accordion component.
accordionDirective:
Directive
Directive to put on the accordion DOM element
Interface representing the API for an accordion item.
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
Interface representing the directives used in an accordion item.
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
Properties for an AccordionItem component.
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.
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
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).
Represents the state of an accordion item.
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.
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.
visible:
boolean
If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
AccordionItemWidget:
Widget<AccordionItemProps,AccordionItemState,AccordionItemApi,AccordionItemDirectives>
Represents a widget for an accordion item.
Properties for the Accordion component.
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.
''
itemTransition:
TransitionFn
The transition to use for the accordion-item body-container when the accordion-item is toggled.
async () => {}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
() => {}Represents the state of an Accordion component.
className:
string
CSS classes to be applied on the widget main container
''
itemWidgets:
AccordionItemWidget[]
Array containing all the accordion-items contained in the accordion.
AccordionWidget:
Widget<AccordionProps,AccordionState,AccordionApi,AccordionDirectives>
Represents an Accordion widget with specific properties, state, API, and directives.
createAccordion(
props?):AccordionWidget
Creates a new Accordion widget instance.
• props?: PropsConfig<AccordionProps>
a new accordion widget instance
createAccordionItem(
config?):AccordionItemWidget
Creates a new AccordionItem widget instance.
• config?: PropsConfig<AccordionItemProps>
config of the accordion item, either as a store or as an object containing values or stores.
a new accordion item widget instance
factoryCreateAccordion(
itemFactory,accordionItemProps,accordionConfig,accordionValidator):WidgetFactory<AccordionWidget>
Create an accordion WidgetFactory based on a item factory and the list of item props that should inherit from the parent accordion
• itemFactory: WidgetFactory<AccordionItemWidget> = createAccordionItem
the item factory
• accordionItemProps: string[] = coreAccordionItemProps
the list of item props
• accordionConfig: AccordionProps = defaultAccordionConfig
the default accordion config
• accordionValidator: ConfigValidator<AccordionProps> = configAccordionValidator
the validator of props
WidgetFactory<AccordionWidget>
the accordion widget factory
getAccordionDefaultConfig():
AccordionProps
Retrieve a shallow copy of the default accordion config
the default accordion config