Multi Language Support.

Mate supports multi language. It became very useful to people from around the world.

For multi-language conversion Mate use https://github.com/yahoo/react-intl library.

Lets discuss the procedure step by step of how to Add/Convert into new languages.

Step 1 :

Go to Project Root folder >srcfolder >languageProviderfolder

Openindex.jsfile and Add the language name intoconst AppLocalewhich you want to add into Mate App.

const
 AppLocale = {
  en: Enlang,
  zh: Zhlang,
  sa: Salang,
  it: Itlang,
  es: Eslang,
  fr: Frlang
};

for example you want to Add/Convert German language.

then adddelanguage code into AppLocale constant like this.

const AppLocale = {
  en: Enlang,
  zh: Zhlang,
  sa: Salang,
  it: Itlang,
  es: Eslang,
  fr: Frlang,
  de: GermanLang
};

and Add this codeaddLocaleData(AppLocale.de.data);

Step 2 :

create a new file insrc > languageProvider > entries > de_DE.js fileand paste this code.

import antdSA from 'antd/lib/locale-provider/de_DE';
import appLocaleData from 'react-intl/locale-data/de';
import deMessages from '../locales/de_DE.json';

const deLang = {
  messages: {
    ...deMessages
  },
  antd: antdDE,
  locale: 'de-DE',
  data: appLocaleData
};
export default deLang;

Step 3 :

Now, create a JSON file namedde_DE.jsoninsrc > languageProvider > localesfolder.

Step 4 :

This is the big step for the language conversion. To change language in every MeteAdmin components this is the general procedure. Let's discuss an Alert box component inside the FeedBack section.

Step 4.1

copy all the element from_en_US.json _file and paste this into_de_DE.json _file. Now all the text strings are listed there. Just translate every json element's value into German language.

Example :

"sidebar.formsWithValidation": "Forms With Validation"will be convert like this

"sidebar.formsWithValidation": "Formulare mit Validierung"

Step 5 :

To add this new language into Sidebar switcher option, follow this file pathsrc > containers > languageSwitcher > config.jsfile.

add the new icon image from image folder in the top of the file like thisimport italianLang from '../../image/flag/german.svg';
Then add this new Language into config -> option array by this

    {
      languageId: 'german',
      locale: 'de',
      text: 'German',
      icon: germanLang,
    },

Step 6 (additional step) :+

To chose the default language of Mate go to this filesrc > settings > index.jsand change this codeconst language = 'english';intoconst language = 'german';

This will initiate german language as default language.

Ta-Da!!

Thanks for reading & understanding the process. It's not that hard. For any inquiries or issues you can contact with us via our support portal https://redqsupport.ticksy.com/

results matching ""

    No results matching ""