CODEWITHSUNDEEP
jqueryinternationalizationsemantic-ui
pme
pme

Reputation: 14803

Semantic-UI: How to handle i18n

I have a dropdown that has a property that is language specific (i18n).

My solution at the moment is:

$('.ui.dropdown').dropdown({
        fullTextSearch: true,
        match: "text"
    });

$('.ui.dropdown.de').dropdown({
        fullTextSearch: true,
        match: "text",
        message: {
            noResults: 'Keine Resultate gefunden.'
        }
    });

As you can see I have to copy all 'non-i18n' specific properties!

What is the proper way to do this with Semantic-UI.

Upvotes: 0

Views: 622

Answers (1)

rubentd
rubentd

Reputation: 1275

You need to implement some sort of i18n strategy for all your app. This is not something specific to semantic ui.

One simple way to achieve this is to keep a dictionary with all the sentences and load the needed sentences for the current language.

Example:

const languages = {
  'en-US': {
    'noResults': 'No Results found.',
  },
  'de-DE': {
    'noResults' : 'Keine Resultate gefunden.',
  },
};

const i18n = languages[currentLanguage];

$('.ui.dropdown').dropdown({
      fullTextSearch: true,
      match: "text",
      message: {
          noResults: i18n[noResults],
      }
  });

There are also several libraries to help with this, like http://airbnb.io/polyglot.js/

Upvotes: 2

Related Questions