This component has all the basic functionalities implemented. More polishing features might be added in the near future.
If you want to contribute, please visit the issues on GitHub.
Collapse(
props):ReactNode
Collapse component that provides a collapsible container.
This component uses the useWidgetWithConfig hook to create a collapse widget and applies transition directives to the container.
• props: Partial<CollapseProps> & object & RefAttributes<CollapseApi>
The properties for the Collapse component.
ReactNode
A div element with transition directives applied, containing the child elements.
Interface representing the API for a collapsible component.
close():
void
Triggers collapse closing programmatically.
void
open():
void
Triggers the collapse content to be displayed for the user.
void
toggle():
void
Toggles the collapse content visibility.
void
Interface representing the directives used in a collapse component.
collapseDirective:
Directive
Directive to apply the collapse.
Properties for the Collapse component.
animated:
boolean
If true, collapse closing and opening will be animated.
true
animatedOnInit:
boolean
If true, collapse opening will be animated at init time.
false
className:
string
CSS classes to be applied on the widget main container
''
horizontal:
boolean
If true, collapse will be done horizontally.
false
id:
string
id of the collapse
''
onHidden: () =>
void
Callback called when the collapse is hidden.
void
() => {}onShown: () =>
void
Callback called when the collapse is shown.
void
() => {}onVisibleChange: (
visible) =>void
Callback called when the collapse visibility changed.
• visible: boolean
The new visibility state of the collapse.
void
() => {}visible:
boolean
If true the collapse is visible to the user
true
Represents the state of a collapse component.
Extends the properties and state from CollapseCommonPropsAndState.
className:
string
CSS classes to be applied on the widget main container
''
hidden:
boolean
Is true when the collapse is hidden. Compared to visible, this is updated after the transition is executed.
horizontal:
boolean
If true, collapse will be done horizontally.
false
visible:
boolean
If true the collapse is visible to the user
true
CollapseWidget:
Widget<CollapseProps,CollapseState,CollapseApi,CollapseDirectives>
Represents a widget for handling collapse functionality.
This type defines the structure of a CollapseWidget, which includes properties, state, API, and directives necessary for managing the collapse behavior in the UI.
createCollapse(
config?):CollapseWidget
Create an CollapseWidget with given config props
• config?: PropsConfig<CollapseProps>
an optional collapse config
an CollapseWidget
getCollapseDefaultConfig():
CollapseProps
Retrieve a shallow copy of the default collapse config
the default collapse config