Collapse

function

Collapse(props): Element

Collapse component that provides a collapsible container.

This component uses the useWidget hook to create a collapse widget and applies transition directives to the container.

Parameters
props

Partial<CollapseProps> & object & object

The properties for the Collapse component.

Returns

Element

A div element with transition directives applied, containing the child elements.

CollapseApi

interface

Interface representing the API for a collapsible component.

Methods
close

close(): void

Triggers collapse closing programmatically.

Returns

void

open

open(): void

Triggers the collapse content to be displayed for the user.

Returns

void

toggle

toggle(): void

Toggles the collapse content visibility.

Returns

void

CollapseDirectives

interface

Interface representing the directives used in a collapse component.

Properties
collapseDirective

collapseDirective: Directive

Directive to apply the collapse.

triggerDirective

triggerDirective: Directive

Directive to apply to a trigger;

CollapseProps

interface

Properties for the Collapse component.

Properties
animated

animated: boolean

If true, collapse closing and opening will be animated.

Default Value

true

animatedOnInit

animatedOnInit: boolean

If true, collapse opening will be animated at init time.

Default Value

false

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

horizontal

horizontal: boolean

If true, collapse will be done horizontally.

Default Value

false

id

id: string

id of the collapse

Default Value

''

onHidden

onHidden: () => void

Callback called when the collapse is hidden.

Returns

void

Default Value
() => {}
onShown

onShown: () => void

Callback called when the collapse is shown.

Returns

void

Default Value
() => {}
onVisibleChange

onVisibleChange: (visible) => void

Callback called when the collapse visibility changed.

Parameters
visible

boolean

The new visibility state of the collapse.

Returns

void

Default Value
() => {}
visible

visible: boolean

If true the collapse is visible to the user

Default Value

true

CollapseState

interface

Represents the state of a Collapse component.

Properties
hidden

hidden: boolean

Is true when the collapse is hidden. Compared to visible, this is updated after the transition is executed.

visible

visible: boolean

If true the collapse is visible to the user

Default Value

true

CollapseWidget

type alias

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

constant

const createCollapse: WidgetFactory<CollapseWidget>

Create an CollapseWidget with given config props

Param

an optional collapse config

Returns

an CollapseWidget

getCollapseDefaultConfig

constant

const getCollapseDefaultConfig: () => CollapseProps

Retrieve a shallow copy of the default collapse config

Returns

CollapseProps

the default collapse config