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";
function App() {
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";
function App() {
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";
function App() {
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";
function App() {
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";
function App() {
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";
import { useState } from 'react';
function App() {
const firstPaneContent = `<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>`;
const secondPaneContent = `<div>
<div className="content">
<h3 className="h3">CSS</h3>
<div className="code-preview">
<span>img { </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> }</span>
</div>
</div>
</div>`;
const thirdPaneContent = `<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() { </div>
<div>// Code block for click action</div>
<span> }); </span>
</div>
</div>
</div>`;
const [pane1Content] = useState(firstPaneContent);
const [pane2Content] = useState(secondPaneContent);
const [pane3Content] = useState(thirdPaneContent);
return (<div className="App">
<SplitterComponent id="splitter" height="250px" width="550px">
<PanesDirective>
<PaneDirective content={pane1Content}/>
<PaneDirective content={pane2Content}/>
<PaneDirective content={pane3Content}/>
</PanesDirective>
</SplitterComponent>
</div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
import { useState } from 'react';
function App() {
const firstPaneContent = `<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>`;
const secondPaneContent = `<div>
<div className="content">
<h3 className="h3">CSS</h3>
<div className="code-preview">
<span>img { </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> }</span>
</div>
</div>
</div>`;
const thirdPaneContent = `<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() { </div>
<div>// Code block for click action</div>
<span> }); </span>
</div>
</div>
</div>`;
const [pane1Content] = useState(firstPaneContent);
const [pane2Content] = useState(secondPaneContent);
const [pane3Content] = useState(thirdPaneContent);
return (
<div className="App">
<SplitterComponent id="splitter" height="250px" width="550px">
<PanesDirective>
<PaneDirective content={pane1Content} />
<PaneDirective content={pane2Content} />
<PaneDirective content={pane3Content} />
</PanesDirective>
</SplitterComponent>
</div>
);
}
export default App;