SidebarComponent
represents the Essential JS 2 React Sidebar Component.
<SidebarComponent></SidebarComponent>
boolean
Enable or disable the animation transitions on expanding or collapsing the Sidebar.
Defaults to true
boolean
Specifies whether the Sidebar need to be closed or not when document area is clicked.
Defaults to false
string
| number
Specifies the size of the Sidebar in dock state.
For more details about dockSize refer to
Dock
documentation.
Defaults to ‘auto’
boolean
Specifies the docking state of the component.
For more details about enableDock refer to
Dock
documentation.
Defaults to false
boolean
Enables the expand or collapse while swiping in touch devices.
Defaults to true
boolean
Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.
Defaults to false
boolean
Specifies the Sidebar in RTL mode that displays the content in the right-to-left direction.
Defaults to false
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
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
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’
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
HTMLElement
| string
Allows to place the sidebar inside the target element.
For more details about target refer to
Custom Context
documentation.
Defaults to null
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’
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’
string
| number
Specifies the z-index of the Sidebar. It is applicable only when sidebar act as overlay type.
Defaults to 1000
Removes the control from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
Returns void
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
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
Shows or hides the Sidebar based on the current state.
Returns void
Triggers when the state(expand/collapse) of the component is changed.
Triggers when component is closed.
EmitType<Object>
Triggers when component is created.
EmitType<Object>
Triggers when component gets destroyed.
Triggers when component is opened.