Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

switch between style rtl react


Hi ,
I am using Metronic 8 react and i have a problem when add rtl
how switch between style when change from rtl to ltr and vice versa


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Unfortunately, dynamic direction switching is currently not supported by Metronic SPA versions.

The only way to change the direction dynamically in our React version is by updating the link href of the main style file. To achieve this, follow the steps below:

  1. Generate RTL and LTR CSS style files using our HTML version.
    To generate styles, refer to our gulp build and rtl version setup docs.
  2. Copy the generated style.bundle.css and style.bundle.rtl.css files to public folder in your React app.
  3. In the index.html file, add link tag with default direction styles as shown in this gist file.
  4. Remove the style import line below from src/main.tsx:

    import "./_metronic/assets/sass/style.scss"

  5. To switch the direction, you just need to change the link href from style.bundle.css to style.bundle.rtl.css.
    You can reuse switch functions from this gist.



Regards,
Lauris Stepanovs,
Keenthemes Support Team
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(