Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/143.44e42ee2.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[143],{1366:function(e,t,n){"use strict";n.r(t),t.default="const settingsConfig = {\n layout: {\n style: 'layout1', // layout1 layout2 layout3\n config: {}, // checkout default layout configs at app/fuse-layouts for example app/fuse-layouts/layout1/Layout1Config.js\n },\n customScrollbars: true,\n direction: 'ltr', // rtl, ltr\n theme: {\n main: 'default',\n navbar: 'greyDark',\n toolbar: 'mainThemeLight',\n footer: 'mainThemeDark',\n },\n};\n\nexport default settingsConfig;\n"},2632:function(e,t,n){"use strict";n.r(t);var a=n(118),s=n(194),r=n(1);t.default=function(){return Object(r.jsxs)(r.Fragment,{children:[Object(r.jsx)(s.a,{variant:"h4",className:"mb-24",children:"RTL Support"}),Object(r.jsx)(s.a,{className:"mb-16",component:"p",children:"Fuse React supports Right-to-left languages such as Arabic, Persian or Hebrew, etc."}),Object(r.jsx)(s.a,{className:"mb-8",variant:"h5",children:"Development"}),Object(r.jsxs)(s.a,{className:"mb-16",component:"p",children:["There are two plugins"," ",Object(r.jsx)("a",{href:"https://github.com/RonMelkhior/tailwindcss-dir",target:"_blank",rel:"noopener noreferrer",children:Object(r.jsx)("code",{children:"tailwindcss-dir"})})," ","and"," ",Object(r.jsx)("a",{href:"https://github.com/alitaheri/jss-rtl",target:"_blank",rel:"noopener noreferrer",children:Object(r.jsx)("code",{children:"jss-rtl"})})," ","that we use to develop RTL support of the Fuse React."]}),Object(r.jsxs)(s.a,{className:"mb-16",component:"p",children:[Object(r.jsx)("a",{href:"https://github.com/alitaheri/jss-rtl",target:"_blank",rel:"noopener noreferrer",children:Object(r.jsx)("code",{children:"jss-rtl"})})," ","enables right-to-left support by flipping every rule of the jss styles on the x-axis. You can write the application left-to-right and then turn it into right-to-left using this plugin. Or you can start right-to-left and turn it into left-to-right."]}),Object(r.jsxs)(s.a,{className:"mb-16",component:"p",children:[Object(r.jsx)("a",{href:"https://github.com/RonMelkhior/tailwindcss-dir",target:"_blank",rel:"noopener noreferrer",children:Object(r.jsx)("code",{children:"tailwindcss-dir"})})," ","adds a custom direction variant to your tailwind project, letting you have custom CSS rules for LTR and RTL layouts. For example:"]}),Object(r.jsx)(a.a,{component:"pre",className:"language-jsx mb-24",children:'\n <div class="text-green text-2xl ltr:pl-4 rtl:pr-4">\n Hello, world.\n </div>\n '}),Object(r.jsx)(s.a,{className:"mb-8",variant:"h5",children:"Configuration"}),Object(r.jsxs)(s.a,{className:"mb-16",component:"p",children:["To change the default direction of the Fuse React, you need to change ",Object(r.jsx)("code",{children:"direction"}),"setting in the file ",Object(r.jsx)("code",{children:"src/app/fuse-configs/settingsConfig.js"})]}),Object(r.jsx)(a.a,{component:"pre",className:"language-jsx mb-24",children:n(1366)}),Object(r.jsx)(s.a,{className:"mb-8",variant:"h5",children:"Dynamically Direction Changing"}),Object(r.jsx)(s.a,{className:"mb-16",component:"p",children:"If you need to change theme direction dynamically, for example when you need to change LTR to RTL language, you need dispatch an action as below:"}),Object(r.jsx)(a.a,{component:"pre",className:"language-jsx mb-24",children:"\n dispatch(setDefaultSettings({direction: 'rtl'}));\n "}),Object(r.jsxs)(s.a,{className:"mb-16",component:"p",children:["Checkout example usage at",Object(r.jsx)("code",{children:"src/app/fuse-layouts/shared-components/LanguageSwitcher.js"})]})]})}}}]);
Mini Shell