Constructor
Parameters:
| Name |
Type |
Description |
id |
String
|
The id of the component. |
properties |
Object
|
HTMLElement
|
The properties used to initialize the component or the container element. |
- Mixes In:
Returns:
An instance of the component.
-
Type
-
componyx.UI.PanelBar
Extends
Classes
- Panel
- PanelBarEvents
Members
(constant) classOption :Readonly.<Object.<string, string>>
Internal CSS class name constants.
You can override any of these classes on the Component instance by defining a property named
cssClass<Key> where is the PascalCase key from this object.
Example:
'PANEL' -> 'cssClassPanel'
Be cautious: overriding these classes without including the default names may break styling and functionality.
Type:
-
Readonly.<Object.<string, string>>
Type:
- Overrides:
expandOnPointerEnter :boolean
Gets or sets a value indicating if a panel is expanded on the pointer enter event.
Type:
multiExpand :Boolean
Gets or sets a value indicating if one panel or multiple panels can be expanded simultaneously.
Type:
panels :Array.<PanelBar.Panel>
Gets or sets the panels to render inside the panel-bar.
Type:
Methods
(protected) cloneProperties(properties)
Clones component properties. This method should not be invoked by client code directly but only from inside component code.
Parameters:
| Name |
Type |
Description |
properties |
Object
|
The properties to clone. |
- Overrides:
collapseAllPanels(instant)
Collapses all panels by removing the expand CSS class from all expanded panels.
Parameters:
| Name |
Type |
Default |
Description |
instant |
Boolean
|
false
|
A value indicating if the default CSS animation should be skipped. |
collapsePanel(panel, instant)
Collapses the specified panel element by removing the expand CSS class.
Fires an event indicating the panel has collapsed.
Parameters:
| Name |
Type |
Default |
Description |
panel |
Componyx.PanelBar.Panel
|
HTMLElement
|
String
|
|
The Panel instance, element, or identifier. |
instant |
Boolean
|
false
|
A value indicating if the default CSS animation should be skipped. |
(async) connectedCallback()
Invoked when the element is added to the DOM. Renders the component if not already in the rendering state.
- Overrides:
destroy(keepEvents, removeElement)
Parameters:
| Name |
Type |
Default |
Description |
keepEvents |
Boolean
|
|
A value indicating if component events should be kept. |
removeElement |
Boolean
|
true
|
A value indicating if the corresponding HTML Element should be removed. |
- Overrides:
- See:
-
disableAllPanels()
disablePanel(panel)
Disables the specified panel.
Parameters:
| Name |
Type |
Description |
panel |
Componyx.PanelBar.Panel
|
HTMLElement
|
String
|
The Panel instance, element, or identifier. |
disconnectedCallback()
Invoked when the element is removed from the DOM. Cleans up the component.
- Overrides:
enableAllPanels()
enablePanel(panel)
Enables the specified panel.
Parameters:
| Name |
Type |
Description |
panel |
Componyx.PanelBar.Panel
|
HTMLElement
|
String
|
The Panel instance, element, or identifier. |
expandPanel(panel, instant)
Expands the specified panel element by adding the expand CSS class.
Fires an event indicating the panel has expanded.
Parameters:
| Name |
Type |
Default |
Description |
panel |
Componyx.PanelBar.Panel
|
HTMLElement
|
String
|
|
The Panel instance, element, or identifier. |
instant |
Boolean
|
false
|
A value indicating if the default CSS animation should be skipped. |
getCssClass(classOption, cssClassValue) → {string}
Gets the CSS class name from the component property if it exists, otherwise returns the default CSS class.
Parameters:
| Name |
Type |
Description |
classOption |
Object
|
Object containing class options. |
cssClassValue |
string
|
Default CSS class value. |
- Overrides:
Returns:
The resolved CSS class name.
-
Type
-
string
getPanelByElement(element) → {PanelBar.Panel}
Gets the Panel class instance by the specified panel element.
Parameters:
| Name |
Type |
Description |
element |
HTMLElement
|
The panel element. |
Returns:
-
Type
-
PanelBar.Panel
getPanelById(id) → {PanelBar.Panel}
Gets the Panel class instance by the specified id.
Parameters:
| Name |
Type |
Description |
id |
String
|
The panel identifier. |
Returns:
-
Type
-
PanelBar.Panel
hideAllPanels()
hidePanel(panel)
Hides the specified panel.
Parameters:
| Name |
Type |
Description |
panel |
Componyx.PanelBar.Panel
|
HTMLElement
|
String
|
The Panel instance, element, or identifier. |
init()
Initializes the component with the specified properties.
- Overrides:
(protected) postRender()
Executes the post render procedure. This method should not be invoked by client code directly but only from inside component code.
- Overrides:
render()
- Overrides:
showAllPanels()
showPanel(panel)
Shows the specified panel.
Parameters:
| Name |
Type |
Description |
panel |
Componyx.PanelBar.Panel
|
HTMLElement
|
String
|
The Panel instance, element, or identifier. |
suppressNextChangeEvent(action)
Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction.
The suppression is automatically lifted after the action completes, even if it throws.
Parameters:
| Name |
Type |
Description |
action |
function
|
The action to execute with change events suppressed. |
- Mixes In:
suppressNextChangeEvent(action)
Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction.
The suppression is automatically lifted after the action completes, even if it throws.
Parameters:
| Name |
Type |
Description |
action |
function
|
The action to execute with change events suppressed. |
- Mixes In:
toggleExpandPanel(panel)
Toggles the expand/collapse state of the specified panel element.
If multiExpand is false, collapses all panels before expanding the selected one.
Parameters:
| Name |
Type |
Description |
panel |
Componyx.PanelBar.Panel
|
HTMLElement
|
String
|
The Panel instance, element, or identifier. |
updatePanelTitle(panel, title)
Updates the title of the specified panel.
Parameters:
| Name |
Type |
Description |
panel |
Componyx.PanelBar.Panel
|
HTMLElement
|
String
|
The Panel instance, element, or identifier. |
title |
HTMLElement
|
DocumentFragment
|
string
|
The title presented in the panel header. |