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.
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
Directive to control the collapse behavior of an element.
animated:
undefined
|boolean
If true
, collapse closing and opening will be animated.
true
animatedOnInit:
undefined
|boolean
If true
, collapse opening will be animated at init time.
false
className:
undefined
|string
CSS classes to be applied on the widget main container
''
hidden:
EventEmitter
<void
>
Callback called when the collapse is hidden.
() => {}
horizontal:
undefined
|boolean
If true
, collapse will be done horizontally.
false
id:
undefined
|string
id of the collapse
''
shown:
EventEmitter
<void
>
Callback called when the collapse is shown.
() => {}
visible:
undefined
|boolean
If true
the collapse is visible to the user
true
visibleChange:
EventEmitter
<boolean
>
Callback called when the collapse visibility changed.
() => {}
get
api():W
["api"
]
Retrieves the widget api
W
["api"
]
the widget api
get
directives():W
["directives"
]
Retrieves the widget directives
W
["directives"
]
the widget directives
get
state():AngularState
<W
>
Retrieves the widget state as an Angular Signal
AngularState
<W
>
the widget state
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