All Components

Right-to-Left Support

Right-to-Left (RTL) support is the ability of a library, website, or application to respond to users who communicate through right-to-left languages such as Arabic, Hebrew, Chinese, and Japanese.

Configuration

In web applications, the RTL mode can be enabled with the dir attribute of a DOM element.

To enable the RTL mode for all Kendo UI components in your Angular application, provide a text direction value by using the RTL token in the root module of the application.

You can also limit the RTL mode to a part of the application by providing the token to a sub-module. By default, the RTL mode is disabled.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <kendo-splitter orientation="horizontal" style="height: 280px">

        <kendo-splitter-pane min="35%">
            <kendo-panelbar [items]="items"></kendo-panelbar>
        </kendo-splitter-pane>

        <kendo-splitter-pane min="35%">
            <kendo-tabstrip>
                <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
                <ng-template kendoTabContent>
                    <div class="weather">
                    <h4>17<span>&ordm;C</span></h4>
                    <p>Rainy weather in Paris</p>
                    </div>
                </ng-template>
                </kendo-tabstrip-tab>
                <kendo-tabstrip-tab [title]="'London'">
                <ng-template kendoTabContent>
                    <div class="weather">
                    <h4>21<span>&ordm;C</span></h4>
                    <p>Sunny weather in London</p>
                    </div>
                </ng-template>
                </kendo-tabstrip-tab>
                <kendo-tabstrip-tab [title]="'Moscow'">
                <ng-template kendoTabContent>
                    <div class="weather">
                    <h4>16<span>&ordm;C</span></h4>
                    <p>Cloudy weather in Moscow</p>
                    </div>
                </ng-template>
                </kendo-tabstrip-tab>
            </kendo-tabstrip>
        </kendo-splitter-pane>

      </kendo-splitter>
    `,
    styles: [ `
        kendo-splitter-pane {
            padding: 16px;
        }
    ` ]
})

export class AppComponent {
    public items: Array<PanelBarItemModel> = [
        <PanelBarItemModel> {
             children: [
                <PanelBarItemModel> {
                    title: "Team 1"
                },
                <PanelBarItemModel> {
                    title: "Team 2"
                },
                <PanelBarItemModel> {
                    title: "Team 3"
                }
            ],
            expanded: true,
            title: "Teams"
        },
        <PanelBarItemModel> {
            children: [
                <PanelBarItemModel> {
                    title: "Q1 2017"
                },
                <PanelBarItemModel> {
                    title: "Q2 2017"
                },
                <PanelBarItemModel> {
                    title: "Q3 2017"
                },
                <PanelBarItemModel> {
                    title: "Q4 2017"
                }
            ],
            title: "Forecast"
        }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { RTL } from '@progress/kendo-angular-l10n';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ BrowserModule, BrowserAnimationsModule, LayoutModule ],
    providers:    [ { provide: RTL, useValue: true } ]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article