The following section explains the steps required to build the Splitter component with step-by-step procedure.
The following list of dependencies required to use the Splitter component in your application:
|-- @syncfusion/ej2-layouts
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-react-layouts
|-- @syncfusion/ej2-react-base
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
Start a new project using create-react-app command as follows
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
create-react-app quickstart
cd quickstart
Install the below required dependency package in order to use the Splitter
component in your application.
npm install @syncfusion/ej2-react-layouts --save
ej2-layouts
package folder.
This can be referred in your application using the following code.[src/App.css]
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';
The Splitter can be initialized through <SplitterComponent>
tag-directive with <PanesDirective>
and <PaneDirective>
as child elements respectively.
Please refer the below code snippet,
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
public render() {
return (
<div className="App">
<SplitterComponent id="splitter" height="250px" width="600px">
<PanesDirective>
<PaneDirective/>
<PaneDirective/>
<PaneDirective/>
</PanesDirective>
</SplitterComponent>
</div>
);
}
}
export default App;
After completing the configurations to render the Splitter, use the following command to display the output in your default browser.
npm start
Output will be as follows:
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
render() {
return (<div className="App">
<SplitterComponent id="splitter" height="250px" width="600px">
<PanesDirective>
<PaneDirective />
<PaneDirective />
<PaneDirective />
</PanesDirective>
</SplitterComponent>
</div>);
}
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
public render() {
return (
<div className="App">
<SplitterComponent id="splitter" height="250px" width="600px">
<PanesDirective>
<PaneDirective/>
<PaneDirective/>
<PaneDirective/>
</PanesDirective>
</SplitterComponent>
</div>
);
}
}
export default App;
Splitter supports both Horizontal
and Vertical
orientation for the panes. By default, it will be rendered in Horizontal
orientation. You can change it by using orientation property.
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
render() {
return (<div className="App">
<SplitterComponent id="splitter-vertical" height="250px" width="50%" orientation={'Vertical'}>
<PanesDirective>
<PaneDirective />
<PaneDirective />
</PanesDirective>
</SplitterComponent>
</div>);
}
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
public render() {
return (<div className="App">
<SplitterComponent id="splitter-vertical" height="250px" width="50%" orientation = {'Vertical'}>
<PanesDirective>
<PaneDirective/>
<PaneDirective/>
</PanesDirective>
</SplitterComponent>
</div>
);
}
}
export default App;
You can load the pane contents in either HTML element or string types using content property.
For detailed information, refer to the Pane Content section
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
firstPane() {
return (<div>
<div className="content">
<h3 className="h3">HTML</h3>
<div className="code-preview">
<<span>!DOCTYPE html></span>
<div><<span>html></span></div>
<div><<span>body></span></div>
<<span>div</span> id="custom-image">
<div><<span>img</span> src="src/albert.png"></div>
<div><<span>div</span>></div>
<div><<span>/body></span></div>
<div><<span>/html></span></div>
</div>
</div>
</div>);
}
secondPane() {
const openBrace = '{';
const closeBrace = '}';
return (<div>
<div className="content">
<h3 className="h3">CSS</h3>
<div className="code-preview">
<span>img {openBrace} </span>
<div id="code-text">margin:<span>0 auto;</span></div>
<div id="code-text">display:<span>flex;</span></div>
<div id="code-text">height:<span>70px;</span></div>
<span>{closeBrace}</span>
</div>
</div>
</div>);
}
thirdPane() {
const openBrace = '{';
const closeBrace = '}';
return (<div>
<div className="content">
<h3 className="h3">JavaScript</h3>
<div className="code-preview">
<span>var</span> image = document.getElementById("custom-image");
<div>image.addEventListener("click", function() {openBrace}</div>
<div> // Code block for click action</div>
// Code block for click action</div>
<span> {closeBrace}) </span>
</div>
</div>
</div>);
}
render() {
return (<div className="App">
<SplitterComponent id="splitter" height="250px" width="550px">
<PanesDirective>
<PaneDirective content={this.firstPane}/>
<PaneDirective content={this.secondPane}/>
<PaneDirective content={this.thirdPane}/>
</PanesDirective>
</SplitterComponent>
</div>);
}
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
public firstPane() {
return (
<div>
<div className="content">
<h3 className="h3">HTML</h3>
<div className="code-preview">
<<span>!DOCTYPE html></span>
<div><<span>html></span></div>
<div><<span>body></span></div>
<<span>div</span> id="custom-image">
<div><<span>img</span> src="src/albert.png"></div>
<div><<span>div</span>></div>
<div><<span>/body></span></div>
<div><<span>/html></span></div>
</div>
</div>
</div>
);
}
public secondPane() {
const openBrace: string = '{';
const closeBrace: string = '}';
return (
<div>
<div className="content">
<h3 className="h3">CSS</h3>
<div className="code-preview">
<span>img {openBrace} </span>
<div id="code-text">margin:<span>0 auto;</span></div>
<div id="code-text">display:<span>flex;</span></div>
<div id="code-text">height:<span>70px;</span></div>
<span>{closeBrace}</span>
</div>
</div>
</div>
);
}
public thirdPane() {
const openBrace: string = '{';
const closeBrace: string = '}';
return (
<div>
<div className="content">
<h3 className="h3">JavaScript</h3>
<div className="code-preview">
<span>var</span> image = document.getElementById("custom-image");
<div>image.addEventListener("click", function() { openBrace }</div>
<div>// Code block for click action</div>
<span> {closeBrace }) </span>
</div>
</div>
</div>
);
}
public render() {
return (<div className="App">
<SplitterComponent id="splitter" height="250px" width="550px">
<PanesDirective>
<PaneDirective content = {this.firstPane}/>
<PaneDirective content = {this.secondPane}/>
<PaneDirective content = {this.thirdPane}/>
</PanesDirective>
</SplitterComponent>
</div>);
}
}
export default App;