Template Direction

The Crema template is fully RTL supported. On one toggle button, the user can switch between 'Right to left' direction or 'Left to Right' direction.

The Crema template is fully RTL supported. On one toggle button, the user can switch between 'Right to left' direction or 'Left to Right' direction.

Changing Template Direction in run time:-

Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find RTL support toggle button. By using that button, you can enable or disable RTL support.

Changing RTL support in development mode (setting default RTL type):-

To set the default RTL type, go to the defaultConfig.js file, it can be found at the path:-

In this file, you will find a property named 'direction' . You need to set the value of 'direction' according to your choice from the accepted values like below.

src/@crema/utility/AppContextProvider/defaultConfig.tsx

export const defaultTheme = {
  theme: {
    spacing: 4,
    cardRadius: cardRadius,
    direction: LayoutDirection.RTL, //ltr, rtln you can switch theme direction here
    palette: {...}
  }
}

####### Layout Direction #########(src/shared/constants/AppEnums.js)

export const LayoutDirection = {
  RTL: 'rtl',
  LTR: 'ltr',
};

Since some languages are read from 'Right to Left', so whenever that language is chosen, the template direction changes to 'Right to Left'. This is managed by the property name "rtlLocale". This property can be found in the above file. It takes an array as the value and language codes for which RTL is to be enabled can be passed in it.

rtlLocale: ['ar'],

Currently, 'ar' which has been used for the Arabic language in the Crema has been passed in the array which means whenever the Arabic language is chosen, RTL will be enabled. Similarly, you can pass any other language locale code in the array to enable RTL on the selection of that language.