The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

Angular RTL Conversion

Hi ! Can you please share procedure to convert Metronic 8 Angular into RTL.

I tried to follow these steps https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/rtl.html

But it didn't help

  1. Do I need to convert every scss file into RTL ? (Scss is dived into multiple files (around 50), how to get RTL version for every file?)

  2. How will I get RTL scss files?

  3. Left Side Bar Menu should also move to Right Side in RTL ,

G
Guest 4 years ago
Angular RTL
1 Answers
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)

user
Faizal Author 4 years ago

Hi Hany,

At the moment, RTL for Angular does not officially available yet. We will consider adding it in future updates.
But as a workaround, you can do this.

Copy RTL CSS file from the HTML version from
/metronic_v8.0.x/html/theme/demo1/dist/assets/css/style.bundle.rtl.css
to the Angular folder demo1/src/assets/sass/

Open the Angular file demo1/src/styles.scss, replace the scss file path with 

@import "./assets/sass/style.bundle.rtl.css";


Open demo1/src/index.html in Angular and replace it with this

<html direction="rtl" dir="rtl" >


Run ng serve as usual.

You should get the RTL version of Angular.

Thanks


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  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation