left-to-right and right-to-left orientations
I aim to design UI templates that support both left-to-right and right-to-left orientations. This versatility is particularly important for languages such as Arabic, where text and layout may vary between these two directions.
4 Replies
Hi @Amine Arrouk. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Refine supports both left-to-right (LTR) and right-to-left (RTL) orientations, which is particularly useful for supporting languages like Arabic.
To set Refine to RTL, you can use
configProviderProps={{ direction: "rtl" }} on your initiated Refine project. However, please note that there was a reported issue where some elements did not reverse as expected when setting to RTL. This issue is now closed, but it's worth being aware of in case you encounter similar problems. You can find more details about this issue on Github (https://github.com/refinedev/refine/issues/1198).
Refine also provides an example of how to manage and customize the content of your Layout for RTL. You can adapt and design your Layout content as you choose by examining this example and the source code. To run this example on your local machine, use the following command:
You can find more details about this example in the Refine documentation (https://refine.dev/docs/examples/customization/rtl).
Refine's UI integration packages expose prebuilt components that are designed to be used with the UI libraries. These components are compositions of Refine's functionalities and the UI libraries' components. They are easy to customize and extend to fit your needs. You can find more details about these components in the Refine documentation (https://refine.dev/docs/guides-concepts/ui-libraries#prebuilt-components).
If you want to customize the default layout elements provided with the @refinedev/chakra-ui package, you can check out the Custom Layout tutorial (https://refine.dev/docs/advanced-tutorials/custom-layout/).
Lastly, Refine supports internationalization with its i18nProvider. This can take any internationalization library and make it available to the app. You can find more details about this in the Refine blog (https://refine.dev/blog/web-development#refines-accessibility-and-internationalization-support).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1199064144956117054> kapa.ai is still learning and improving, please let us know how it did by reacting below
extended-salmon•7mo ago
Cusromizing with Refine ?
unwilling-turquoise•7mo ago
Hey @Amine Arrouk, Refine won't be interfering with your design choices, you can of course use rtl layouts if your UI library supports it and you can also customize the default components exported by Refine's UI integrations easily. Check out the UI Libraries guide for more info about integrations and their components: https://refine.dev/docs/guides-concepts/ui-libraries/
UI Libraries | refine
Refine's UI library integrations enhance the core functionality by exposing hooks and components, offering prebuilt UI elements with minimal additional, library-specific logic. Refine offers seamless integration with popular UI libraries, allowing you to choose the one that suits your needs. These integrations don't constrain your application's ...