Search results

Right-To-Left

08 Dec 2022 / 2 minutes to read

Right To Left (RTL) can be enabled to the Syncfusion React UI components by adding a enableRtl property as true. This will render all Syncfusion React components in right to left direction.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { enableRtl } from '@syncfusion/ej2-base';
// Enables Right to left alignment for all controls
enableRtl(true);
function App() {
    const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showHeader='true' headerTitle='Painting types'></ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</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="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="index.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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { enableRtl } from '@syncfusion/ej2-base'
// Enables Right to left alignment for all controls
enableRtl(true);

function App() {
  const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

  return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showHeader = 'true' headerTitle = 'Painting types' ></ListViewComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Enable RTL to individual component

To enable the RTL to an individual control, set the enableRtl property directly in its model options. For illustration, the enableRtl is added to the ListView control in following code snippet.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showHeader='true' headerTitle='Painting types' enableRtl='true'></ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</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="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="index.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='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

  return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showHeader = 'true' headerTitle = 'Painting types' enableRtl = 'true' ></ListViewComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));