Light Dark System

Translations

<zn-translations> | ZnTranslations
Since ?

The Translations component allows users to enter text for multiple languages, with a tabbed interface for switching between languages. 

<zn-translations></zn-translations>

Attributes

Attribute Type Description
languages Object A key-value pair of language codes and names (e.g., { "en": "English", "fr": "French" }).
values Object A key-value pair of language codes and translations.
value String A JSON string representing the current translations.

Examples

With Label 


<zn-translations
  label="Description"
  languages='{&quot;en&quot;:&quot;English&quot;,&quot;fr&quot;:&quot;French&quot;,&quot;de&quot;:&quot;German&quot;}'>
</zn-translations>

Custom Languages

You can provide a custom list of available languages via the languages property.


<zn-translations
  languages='{&quot;en&quot;:&quot;English&quot;,&quot;fr&quot;:&quot;French&quot;,&quot;de&quot;:&quot;German&quot;,&quot;es&quot;:&quot;Spanish&quot;,&quot;it&quot;:&quot;Italian&quot;,&quot;pt&quot;:&quot;Portuguese&quot;,&quot;ru&quot;:&quot;Russian&quot;,&quot;zh&quot;:&quot;Chinese&quot;,&quot;ja&quot;:&quot;Japanese&quot;,&quot;ar&quot;:&quot;Arabic&quot;}'></zn-translations>

Pre-filled Values 


<zn-translations
  languages='{&quot;en&quot;:&quot;English&quot;,&quot;fr&quot;:&quot;French&quot;}'
  values='{&quot;en&quot;:&quot;Hello World&quot;,&quot;fr&quot;:&quot;Bonjour le monde&quot;}'
></zn-translations>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.23/dist/components/translations/translations.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.23/dist/components/translations/translations.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/translations/translations.js';