Sidebar

23 Sep 20256 minutes to read

Sidebar is an expandable or collapsible
component that typically act as a side container to place the primary or secondary content alongside of the main content.

<aside id="sidebar">
</aside>

<script>
  let sidebarObject: Sidebar = new Sidebar();
  sidebarObject.appendTo("#sidebar");
</script>

Properties

animate boolean

Enable or disable the animation transitions on expanding or collapsing the Sidebar.

Defaults to true

closeOnDocumentClick boolean

Specifies whether the Sidebar need to be closed or not when document area is clicked.

Defaults to false

dockSize string|number

Specifies the size of the Sidebar in dock state.

For more details about dockSize refer to
Dock documentation.

Defaults to ‘auto’

enableDock boolean

Specifies the docking state of the component.

For more details about enableDock refer to
Dock documentation.

Defaults to false

enableGestures boolean

Enables the expand or collapse while swiping in touch devices.

Defaults to true

enablePersistence boolean

Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.

1. Position
2. Type

Defaults to false

enableRtl boolean

Specifies the Sidebar in RTL mode that displays the content in the right-to-left direction.

Defaults to false

isOpen boolean

Gets or sets the Sidebar component is open or close.

When the Sidebar type is set to Auto,
the component will be expanded in the desktop and collapsed in the mobile mode regardless of the isOpen property.

Defaults to false

mediaQuery string|MediaQueryList

Specifies the media query string for resolution, which when met opens the Sidebar.

  let defaultSidebar: Sidebar = new Sidebar({
      mediaQuery:'(min-width: 600px)'
  });

For more details about mediaQuery refer to
Auto Close documentation.

Defaults to null

position SidebarPosition

Specifies the position of the Sidebar (Left/Right) corresponding to the main content.

For more details about SidebarPosition refer to
position documentation.

Defaults to ‘Left’

showBackdrop boolean

Specifies the whether to apply overlay options to main content when the Sidebar is in an open state.

For more details about showBackdrop refer to
Backdrop documentation.

Defaults to false

target HTMLElement|string

Allows to place the sidebar inside the target element.

For more details about target refer to
Custom Context documentation.

Defaults to null

type SidebarType

Specifies the expanding types of the Sidebar.

• Over - The sidebar floats over the main content area.
• Push - The sidebar pushes the main content area to appear side-by-side, and shrinks the main content within the screen width.
• Slide - The sidebar translates the x and y positions of main content area based on the sidebar width.
  The main content area will not be adjusted within the screen width.
• Auto - Sidebar with Over type in mobile resolution and Push type in other higher resolutions.

  For more details about SidebarType refer to
  SidebarType documentation.

Defaults to ‘Auto’

width string|number

Specifies the width of the Sidebar. By default, the width of the Sidebar sets based on the size of its content.
Width can also be set in pixel values.

Defaults to ‘auto’

zIndex string|number

Specifies the z-index of the Sidebar. It is applicable only when sidebar act as overlay type.

Defaults to 1000

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event
handler	Function	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	string | HTMLElement	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the control from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hide

Hide the Sidebar component, if it is in an open state.

Parameter	Type	Description
e (optional)	Event	The event triggering the hide action.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event to remove
handler	Function	Specifies the function to remove

Returns void

show

Shows the Sidebar component, if it is in closed state.

Parameter	Type	Description
e (optional)	Event	The optional event triggering the show action.

Returns void

toggle

Shows or hides the Sidebar based on the current state.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	Function[]	?

Returns void

Events

change EmitType<ChangeEventArgs>

Triggers when the state(expand/collapse) of the component is changed.

close EmitType<EventArgs>

Triggers when component is closed.

created EmitType<Object>

Triggers when component is created.

destroyed EmitType<Object>

Triggers when component gets destroyed.

open EmitType<EventArgs>

Triggers when component is opened.