The following section explains the required steps to build the simple Sidebar component with its basic usage in step by step procedure.
The following list of dependencies are required to use the Sidebar component in your application.
|-- @syncfusion/ej2-react-navigations
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
You can use create-react-app
to setup the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
React
sample use following commands.create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
create-react-app quickstart
cd quickstart
All the available Essential JS 2 packages are published in npmjs.com
public registry.
You can choose the component that you want to install. For this application, we are going to use Sidebar
component.
To install Sidebar component, use the following command
npm install @syncfusion/ej2-react-navigations --save
To render the Sidebar component, need to import Sidebar and its dependent component’s styles as given below in App.css
.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";
Note: If you want to refer the combined component styles, please make use of our CRG
(Custom Resource Generator) in your application.
Sidebar can be initialized using the <SidebarComponent>
tag, it’s used to render Sidebar as
it contains primary content aside from the main content. The immediate sibling element of the Sidebar will be considered as the main content.
SidebarComponent
from ej2-react-navigations
package in App.tsx
.[src/App.tsx]
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public render() {
return (
<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar">
<div className="title"> Sidebar content</div>
</SidebarComponent>
<div className="content">
<div className="title">Main content</div>
<div className="sub-title"> content goes here</div>
</div>
</div>
</div>
)
}
}
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
render() {
return (<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar">
<div className="title"> Sidebar content</div>
</SidebarComponent>
<div className="content">
<div className="title">Main content</div>
<div className="sub-title"> content goes here</div>
</div>
</div>
</div>);
}
}
Now run the npm start
command in the console, it will run your application and open the browser window.
npm start
The following sample, shows the basic Sidebar component.
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.onCreate = this.onCreate.bind(this);
}
onCreate() {
this.sidebarObj.element.style.visibility = '';
}
render() {
return (<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarObj = Sidebar} created={this.onCreate} style={{ visibility: "hidden" }}>
<div className="title"> Sidebar content</div>
</SidebarComponent>
<div className="content">
<div className="title">Main content</div>
<div className="sub-title"> content goes here</div>
</div>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Sidebar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#wrapper {
display: block;
}
#close:hover,#close:active,#close:focus{
background:white;
color:black;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
background-color: rgb(25, 118, 210);
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public sidebarObj: SidebarComponent;
constructor(props: any) {
super(props);
this.onCreate = this.onCreate.bind(this);
}
public onCreate():void {
this.sidebarObj.element.style.visibility='';
}
public render() {
return (
<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarObj = Sidebar as SidebarComponent} created={this.onCreate} style={{visibility:"hidden"}}>
<div className="title"> Sidebar content</div>
</SidebarComponent>
<div className="content">
<div className="title">Main content</div>
<div className="sub-title"> content goes here</div>
</div>
</div>
</div>
)
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
Enabling the showBackdrop in the Sidebar component will prevent the main content from user interactions.
Here, DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen. Sidebar can be rendered with specific width by setting width
property
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.type = "Push";
this.showBackdrop = true;
this.state = { showBackdrop: true };
this.closeClick = this.closeClick.bind(this);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
onCreate() {
this.sidebarObj.element.style.visibility = '';
}
// Toggle(Open/Close) the Sidebar
toggleClick() {
this.sidebarObj.toggle();
}
// Close the Sidebar
closeClick() {
this.sidebarObj.hide();
}
render() {
return (<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarObj = Sidebar} style={{ visibility: "hidden" }} created={this.onCreate} showBackdrop={this.showBackdrop} type={this.type} width="280px">
<div className="title"> Sidebar content</div>
<div className="sub-title">
Click the button to close the Sidebar.
</div>
<div className="center-align">
<ButtonComponent onClick={this.closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to open/close the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Sidebar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#wrapper {
display: block;
}
#close:hover,#close:active,#close:focus{
background:white;
color:black;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
background-color: rgb(25, 118, 210);
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public sidebarObj: SidebarComponent;
private type: SidebarType = "Push";
private showBackdrop: boolean = true;
constructor(props: any) {
super(props);
this.state = { showBackdrop: true };
this.closeClick = this.closeClick.bind(this);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
public onCreate(): void {
this.sidebarObj.element.style.visibility='';
}
// Toggle(Open/Close) the Sidebar
public toggleClick(): void {
this.sidebarObj.toggle();
}
// Close the Sidebar
public closeClick(): void {
this.sidebarObj.hide();
}
public render() {
return (
<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarObj = Sidebar as SidebarComponent} style={{visibility:"hidden"}} created={this.onCreate} showBackdrop={this.showBackdrop} type={this.type} width="280px">
<div className="title"> Sidebar content</div>
<div className="sub-title">
Click the button to close the Sidebar.
</div>
<div className="center-align">
<ButtonComponent onClick={this.closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to open/close the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>
)
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
Positioning the Sidebar to the right or left of the main content can be achieved by using the position property. If the position is not set, the Sidebar will expand from the left to the body element. enablePersistence
will persist the component’s state between page reloads. change
event will be triggered when the state(expand/collapse) of the component is changed.
import { ButtonComponent, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.type = "Push";
this.btnClick = this.btnClick.bind(this);
this.closeClick = this.closeClick.bind(this);
this.onChange = this.onChange.bind(this);
this.onCreate = this.onCreate.bind(this);
}
onCreate() {
this.sidebarObj.element.style.visibility = '';
}
// Toggle button click event handler
btnClick() {
if (this.btnObj.element.classList.contains('e-active')) {
this.btnObj.content = 'Close';
this.btnObj.iconCss = 'e-icons burg-icon';
this.sidebarObj.show();
}
else {
this.btnObj.content = 'Open';
this.btnObj.iconCss = 'e-icons burg-icon';
this.sidebarObj.hide();
}
}
// Toggle(Open/Close) the Sidebar
toggleClick() {
this.sidebarObj.toggle();
}
// Close the Sidebar
closeClick() {
this.sidebarObj.hide();
this.btnObj.content = 'Open';
}
// function to handle the CheckBox change event
onChange(args) {
this.sidebarObj.position = (args.event.target.id === "left") ? "Left" : "Right";
}
render() {
return (<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar" enablePersistence={true} ref={Sidebar => this.sidebarObj = Sidebar} style={{ visibility: "hidden" }} created={this.onCreate} type={this.type} width="280px">
<div className="title"> Sidebar content</div>
<div className="sub-title"> Click the button to close the Sidebar. </div>
<div className="center-align">
<ButtonComponent onClick={this.closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div id="head">
<ButtonComponent id="toggle" ref={(scope) => { this.btnObj = scope; }} iconCss='e-icons burg-icon' isToggle={true} onClick={this.btnClick} className="e-btn e-info">Open</ButtonComponent>
</div>
<div id="maincontent" className="content">
<div>
<div className="title">Main content</div>
<div className="radiobutton">
<div className='row'>
<RadioButtonComponent id="left" checked={true} label='Left' name='position' change={this.onChange}/>
</div>
<div className='row'>
<RadioButtonComponent id="right" label='Right' name='position' change={this.onChange}/>
</div>
</div>
</div>
</div>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Sidebar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
#head {
border: 1px solid #424242;
border-bottom-color: transparent;
background: #00897B;
}
#toggle,
#toggle:hover,
#toggle:focus {
/* csslint allow: adjoining-classes*/
background: #00695C;
box-shadow: none;
border-radius: 0;
height: 39px;
}
.burg-icon:before {
content: '\e10d';
font-size: 16px;
font-family: 'e-icons';
}
.content {
height: 325px;
border: 1px solid grey;
}
#closebtn {
top: 15px;
line-height: 33px;
height: 42px;
color: black;
position: absolute;
right: 10px;
}
.e-normal,
.e-normal:hover,
.e-noraml:active {
background: transparent;
box-shadow: none;
}
.radiobutton {
text-align: center;
}
.listdiv {
width: 100%;
}
.e-listview .e-list-item {
text-align: center;
font-size: 14px;
padding: 0;
background: rgb(20, 118, 210);
color: white;
}
#listview {
width: 30%;
margin: 0 auto;
}
.control-section .content .radiobutton .row {
padding: 10px;
display: inline-block;
margin: 0;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#default-sidebar {
background-color: #26A69A;
color: #ffffff;
}
#wrapper {
display: block;
}
.right {
float: right;
}
body {
margin: 0;
}
.close-btn:hover,
.close-btn:active,
.close-btn:focus {
background: #fafafa;
}
@font-face {
font-family: 'e-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
import { ButtonComponent, ChangeEventArgs, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public sidebarObj: SidebarComponent;
public btnObj: ButtonComponent;
private type: SidebarType = "Push";
constructor(props: any) {
super(props);
this.btnClick = this.btnClick.bind(this);
this.closeClick = this.closeClick.bind(this);
this.onChange = this.onChange.bind(this);
this.onCreate = this.onCreate.bind(this);
}
public onCreate(): void {
this.sidebarObj.element.style.visibility='';
}
// Toggle button click event handler
public btnClick(): void {
if (this.btnObj.element.classList.contains('e-active')) {
this.btnObj.content = 'Close';
this.btnObj.iconCss = 'e-icons burg-icon';
this.sidebarObj.show();
} else {
this.btnObj.content = 'Open';
this.btnObj.iconCss = 'e-icons burg-icon';
this.sidebarObj.hide();
}
}
// Toggle(Open/Close) the Sidebar
public toggleClick(): void {
this.sidebarObj.toggle();
}
// Close the Sidebar
public closeClick(): void {
this.sidebarObj.hide();
this.btnObj.content = 'Open';
}
// function to handle the CheckBox change event
public onChange(args: ChangeEventArgs): void {
this.sidebarObj.position = ((args as any).event.target.id === "left") ? "Left" : "Right";
}
public render() {
return (
<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" enablePersistence={true} ref={Sidebar => this.sidebarObj = Sidebar as SidebarComponent} style={{visibility:"hidden"}} created={this.onCreate} type={this.type} width="280px">
<div className="title"> Sidebar content</div>
<div className="sub-title"> Click the button to close the Sidebar. </div>
<div className="center-align">
<ButtonComponent onClick={this.closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div id="head">
<ButtonComponent id="toggle" ref={(scope) => { this.btnObj = scope as ButtonComponent; }} iconCss='e-icons burg-icon'
isToggle={true} onClick={this.btnClick} className="e-btn e-info">Open</ButtonComponent>
</div>
<div id="maincontent" className="content">
<div>
<div className="title">Main content</div>
<div className="radiobutton" >
<div className='row'>
<RadioButtonComponent id="left" checked={true} label='Left' name='position' change={this.onChange} />
</div>
<div className='row'>
<RadioButtonComponent id="right" label='Right' name='position' change={this.onChange} />
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
Animation transitions can be set while expanding or collapsing the Sidebar using the animate
property. By default , animate
property is set to true. enableRTL
will display the sidebar in the right-to-left direction.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.type = "Push";
this.closeClick = this.closeClick.bind(this);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
onCreate() {
this.sidebarObj.element.style.visibility = '';
}
// Toggle(Open/Close) the Sidebar
toggleClick() {
this.sidebarObj.toggle();
}
// Close the Sidebar
closeClick() {
this.sidebarObj.hide();
}
render() {
return (<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar" animate={false} enableRtl={true} type={this.type} ref={Sidebar => this.sidebarObj = Sidebar} created={this.onCreate} style={{ visibility: "hidden" }}>
<div className="title"> Sidebar content</div>
<div className="sub-title">
Click the button to close the Sidebar
</div>
<div className="center-align">
<ButtonComponent onClick={this.closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to open/close the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Sidebar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#wrapper {
display: block;
}
#close:hover,
#close:active,
#close:focus {
background:white;
color:black;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
background-color: rgb(25, 118, 210);
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public sidebarObj: SidebarComponent;
private type: SidebarType = "Push";
constructor(props:any) {
super(props);
this.closeClick = this.closeClick.bind(this);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
public onCreate():void {
this.sidebarObj.element.style.visibility='';
}
// Toggle(Open/Close) the Sidebar
public toggleClick(): void {
this.sidebarObj.toggle();
}
// Close the Sidebar
public closeClick(): void {
this.sidebarObj.hide();
}
public render() {
return (
<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" animate={false} enableRtl={true} type={this.type} ref={Sidebar => this.sidebarObj = Sidebar as SidebarComponent} created={this.onCreate} style={{visibility:"hidden"}} >
<div className="title"> Sidebar content</div>
<div className="sub-title">
Click the button to close the Sidebar
</div>
<div className="center-align">
<ButtonComponent onClick={this.closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to open/close the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>
)
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
Sidebar can be closed on document click by setting closeOnDocumentClick
to true. If this property is not set, the Sidebar will not close on document click since its default value is false. Sidebar can be kept opened during rendering using isOpen
property.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.type = "Push";
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
onCreate() {
this.sidebarObj.element.style.visibility = '';
}
// Toggle(Open/Close) the Sidebar
toggleClick() {
this.sidebarObj.show();
}
render() {
return (<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarObj = Sidebar} closeOnDocumentClick={true} type={this.type} created={this.onCreate} isOpen={true} style={{ visibility: "hidden" }}>
<div className="title"> Sidebar content</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to open the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Open Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Sidebar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#wrapper {
display: block;
}
#close:hover,
#close:active,
#close:focus {
background:white;
color:black;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
background-color: rgb(25, 118, 210);
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public sidebarObj: SidebarComponent;
private type: SidebarType = "Push";
constructor(props:any) {
super(props);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
public onCreate():void {
this.sidebarObj.element.style.visibility='';
}
// Toggle(Open/Close) the Sidebar
public toggleClick(): void {
this.sidebarObj.show();
}
public render() {
return (
<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" ref={Sidebar => this.sidebarObj = Sidebar as SidebarComponent} closeOnDocumentClick={true} type={this.type} created={this.onCreate} isOpen={true} style={{visibility:"hidden"}} >
<div className="title"> Sidebar content</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to open the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Open Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>
)
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
Expand or collapse the Sidebar while swiping in touch devices using enableGestures
property. By default, enableGestures
is set to true.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.type = "Push";
this.closeClick = this.closeClick.bind(this);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
onCreate() {
this.sidebarObj.element.style.visibility = '';
}
// Toggle(Open/Close) the Sidebar
toggleClick() {
this.sidebarObj.toggle();
}
// Close the Sidebar
closeClick() {
this.sidebarObj.hide();
}
render() {
return (<div className="control-section">
<div id="wrapper">
<SidebarComponent id="default-sidebar" enableGestures={false} type={this.type} ref={Sidebar => this.sidebarObj = Sidebar} created={this.onCreate} style={{ visibility: "hidden" }}>
<div className="title"> Sidebar content</div>
<div className="sub-title">
Click the button to close the Sidebar.
</div>
<div className="center-align">
<ButtonComponent onClick={this.closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to open/close the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Sidebar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";
.center-align {
text-align: center;
padding: 20px;
}
.title {
text-align: center;
font-size: 20px;
padding: 15px;
}
.sub-title {
text-align: center;
font-size: 16px;
padding: 10px;
}
.center {
text-align: center;
display: none;
font-size: 13px;
font-weight: 400;
margin-top: 20px;
}
#wrapper {
display: block;
}
#close:hover,
#close:active,
#close:focus {
background:white;
color:black;
}
.right {
float: right;
}
body {
margin: 0;
}
#default-sidebar {
background-color: rgb(25, 118, 210);
color: #ffffff;
}
.close-btn:hover {
color: #fafafa;
}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public sidebarObj: SidebarComponent;
private type: SidebarType = "Push";
constructor(props:any) {
super(props);
this.closeClick = this.closeClick.bind(this);
this.toggleClick = this.toggleClick.bind(this);
this.onCreate = this.onCreate.bind(this);
}
public onCreate():void {
this.sidebarObj.element.style.visibility='';
}
// Toggle(Open/Close) the Sidebar
public toggleClick(): void {
this.sidebarObj.toggle();
}
// Close the Sidebar
public closeClick(): void {
this.sidebarObj.hide();
}
public render() {
return (
<div className="control-section">
<div id="wrapper">
{/* Initializing the Sidebar component */}
<SidebarComponent id="default-sidebar" enableGestures={false} type={this.type} ref={Sidebar => this.sidebarObj = Sidebar as SidebarComponent} created={this.onCreate} style={{visibility:"hidden"}} >
<div className="title"> Sidebar content</div>
<div className="sub-title">
Click the button to close the Sidebar.
</div>
<div className="center-align">
<ButtonComponent onClick={this.closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
</div>
</SidebarComponent>
<div>
<div className="title">Main content</div>
<div className="sub-title"> Click the button to open/close the Sidebar.</div>
<div className="center-align">
<ButtonComponent onClick={this.toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
</div>
</div>
</div>
</div>
)
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));