项目作者: hamidfzm

项目描述 :
Farsi translations for react admin
高级语言: TypeScript
项目地址: git://github.com/hamidfzm/ra-language-farsi.git
创建时间: 2018-08-18T21:46:23Z
项目社区:https://github.com/hamidfzm/ra-language-farsi

开源协议:BSD 2-Clause "Simplified" License

下载


Farsi Translations for React-Admin

Farsi translations for React-Admin, the frontend framework for building admin applications on top of REST/GraphQL services.

react-admin-demo

Installation

npm

  1. npm install --save ra-language-farsi

yarn

  1. yarn add ra-language-farsi

Usage

  1. import farsiMessages from 'ra-language-farsi';
  2. import polyglotI18nProvider from 'ra-i18n-polyglot';
  3. const messages = {
  4. 'fa': farsiMessages,
  5. };
  6. const i18nProvider = polyglotI18nProvider(locale => messages[locale], 'fa');
  7. <Admin i18nProvider={i18nProvider}>
  8. ...
  9. </Admin>

RTL

Material UI is already supprting RTL, so we can add its support to React Admin using these 2 steps:

  1. Change dir property to rtl in your root elements (like body).

Using HTML (public/index.html):

  1. <body>
  2. <noscript>
  3. You need to enable JavaScript to run this app.
  4. </noscript>
  5. <div id="root" dir="rtl"></div>
  6. </body>

Using CSS style:

  1. body {
  2. direction: rtl;
  3. }

Or Pure JS:

  1. document.getElementsByTagName("body")[0].setAttribute('dir', 'rtl');
  1. Change the theme direction (MUI theme direction)
    ```javascript
    import { defaultTheme } from “react-admin”;
    import { deepmerge } from “@mui/utils”;

const theme = deepmerge(defaultTheme, { direction: “rtl” });

  1. 3. Configure RTL style plugin ([MUI doc](https://mui.com/material-ui/customization/right-to-left/#3-configure-rtl-style-plugin))
  2. ```javascript
  3. import { CacheProvider } from "@emotion/react";
  4. import createCache from "@emotion/cache";
  5. import { prefixer } from "stylis";
  6. import rtlPlugin from "stylis-plugin-rtl";
  7. // Configure cache
  8. const cacheRtl = createCache({
  9. key: "muirtl",
  10. stylisPlugins: [prefixer, rtlPlugin],
  11. });
  12. const App = () => (
  13. <CacheProvider value={cacheRtl}>
  14. <Admin theme={theme}>
  15. // ...
  16. </Admin>
  17. </CacheProvider>
  18. );

Version Compatibility

  • For React-Admin v5, use version 5.x of this package.
  • For React-Admin v4, use version 4.x of this package.
  • For React-Admin v3, use version 3.x of this package.
  • For React-Admin v2, use version 2.x of this package.
  • For React-Admin v1, use version 1.x of this package.

License

This translation is licensed under the BSD Licence, and sponsored by Hamid FzM.