Globalization in Vue Splitter component

11 Jun 20243 minutes to read

RTL

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.

html
<template>
  <div id="app" class="col-lg-12 control-section default-splitter">
    <ejs-splitter id='splitter' height='200px' enableRtl='true'>
      <e-panes>
        <e-pane content='Left Pane' size='200px'></e-pane>
        <e-pane content='Middle Pane' size='200px'></e-pane>
        <e-pane content='Right Pane' size='200px'></e-pane>
      </e-panes>
    </ejs-splitter>
  </div>
</template>
<script setup>

import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';

</script>

<style>
.e-pane {
  align-items: center;
  padding: 9px;
  display: flex;
}

@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
</style>
html
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='splitter' height='200px' enableRtl='true'>
            <e-panes>
                <e-pane content='Left Pane' size='200px'></e-pane>
                <e-pane content='Middle Pane' size='200px'></e-pane>
                <e-pane content='Right Pane' size='200px'></e-pane>
            </e-panes>
        </ejs-splitter>
    </div>
</template>
<script>

import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';

export default {
    name: "App",
    components: {
        "ejs-splitter": SplitterComponent,
        "e-panes": PanesDirective,
        "e-pane": PaneDirective
    },
    data() {
        return {}
    }
}
</script>

<style>
.e-pane {
    align-items: center;
    padding: 9px;
    display: flex;
}

@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
</style>

See Also