Specifies the direction of the Splitter component using the enableRtl property. For writing systems that require it like Arabic, Hebrew, etc., the direction can be switched to right-to-left.
The following code shows how to enable RTL behavior.
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="rtl" height="250px" enableRtl="true">
<PanesDirective>
<PaneDirective size='200px' content = 'Left pane'/>
<PaneDirective size='200px' content = 'Middle pane'/>
<PaneDirective size='200px' content = 'Right pane'/>
</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 {
render() {
return (<div className="App">
<SplitterComponent id="rtl" height="250px" enableRtl="true">
<PanesDirective>
<PaneDirective size='200px' content='Left pane'/>
<PaneDirective size='200px' content='Middle pane'/>
<PaneDirective size='200px' content='Right pane'/>
</PanesDirective>
</SplitterComponent>
</div>);
}
}
export default App;import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));