SidebarModel API in JavaScript Sidebar API control

Interface for a class Sidebar

Properties

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.

animate

boolean

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

closeOnDocumentClick

boolean

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

dockSize

string | number

Specifies the size of the Sidebar in dock state.

For more details about dockSize refer to Dock documentation.

enableDock

boolean

Specifies the docking state of the component.

For more details about enableDock refer to Dock documentation.

enableGestures

boolean

Enables the expand or collapse while swiping in touch devices.

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

enableRtl

boolean

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

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.

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.

position

SidebarPosition

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

For more details about SidebarPosition refer to position documentation.

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.

target

HTMLElement | string

Allows to place the sidebar inside the target element.

For more details about target refer to Custom Context documentation.

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.

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.

zIndex

string | number

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