Jumbo React
Jumbo 6.x
Jumbo 6.x
  • Overview
  • Package Content
  • Installation and Setup
    • Environment Setup
    • Project Setup
  • Structure
    • Folder Structure
  • Layouts
    • Understanding Layouts
    • Pre-built Layouts
    • Create Custom Layout
  • Content Layout
    • Understanding Content Layout
  • Routes
    • Understanding Routes
    • Setup a New Route
    • Route Middleware
    • Create Route Middleware
  • Style Customization
    • Understanding Theme
    • Customize Theme
    • Dark Theme
    • Font Changes
  • How To
    • Apply RTL as default
    • Set RTL direction dynamically
    • Make sidebar menus dynamic
  • Auth Implementation
    • Auth Setting
    • Implement Login Form
Powered by GitBook
On this page
  • Set <body> tag's direction to "rtl"
  • Set "direction" property in active theme object
  1. How To

Apply RTL as default

To apply RTL as default layout option in Jumbo follow the steps given below:

Set <body> tag's direction to "rtl"

For this, you will need to go to the /public/index.html and set the "dir" attribute to "rtl". After the changes your body tag will look like:

<body dir="rtl">

Set "direction" property in active theme object

Now, as a final step, you will need to set the direction property of your active theme object. In usual case, the active theme is /src/app/themes/default.js and after changes your theme object will look like below:

import {alpha} from "@mui/material";

export const mainTheme = {
    direction: "rtl",
    ...
}

That is all you will need to do to setup the RTL direction as default.

PreviousFont ChangesNextSet RTL direction dynamically

Last updated 2 years ago