Localization

SVAR library provides the possibility to present interfaces of controls in different languages. It is possible to localize Calendar and controls that contain calendars: RangeCalendar, DatePicker and DateRangePicker, set time format for TimePicker and change the locale of buttons' labels in modal boxes.

Using in-built locales

There are 9 locales provided:

• en-EN - American English - the default locale
• cn-CN - Chinese
• de-DE - German
• es-ES - Spanish
• fr-FR - French
• it-IT - Italian
• ja-JA - Japanese
• pt-PT - Portuguese
• ru-RU - Russian

Locale packages are stored in a separate repository. The default locale is English. To use a different locale, you need to include it on a page of your application together with the Locale object, e.g. the German locale is added like this:

<script>
    import { Locale } from "@wx/svelte-core";
    import { de } from "@wx/core-locales";
</script>

Related sample: Locales

Changing locale of a control

To apply a different locale to a control, you should:

• import the control together with the Locale object:

<script>
    import { Calendar, Locale } from "@wx/svelte-core";
</script>

• include the necessary locale package on a page. In the example below the German locale is applied to a calendar:

<script>
    import { Calendar, Locale } from "@wx/svelte-core";
    import { de } from "@wx/core-locales";
</script>

• wrap the control you want to localize in the <Locale> tags and use the words property to set the language:

<Locale words={de}>
    <Calendar />
</Locale>

Related sample: Locales

Read more on Calendar localization.

Using different locales for separate instances

You may need to use several instances of a control with different locales. For this you need to:

• include the necessary locale package on a page. In the example below German and Chinese locales are applied to calendars:

<script>
    import { Calendar, Locale } from "@wx/svelte-core";
    import { de, cn } from "@wx/core-locales";
</script>

• wrap the necessary control's instance in the <Locale> tags and use the words property to set the locale of choice:

<Locale words={de}>
    <Calendar value={new Date(2022, 2, 18)} />
</Locale>
<Locale words={cn}>
    <Calendar value={new Date(2022, 2, 18)} />
</Locale>

Related sample: Calendar

Setting time format for TimePicker

The words property of the Locale object contains the calendar object that allows adjusting time format for the TimePicker control. TimePicker can display time both in the 12-hour and 24-hour format. The 24-hour format is used by default, to apply the 12-hour format for a time picker, you should:

• wrap a time picker instance in the Locale tag
• set the words property
• specify the calendar object as a value of the words property
• specify the timeFormat object as a property of the calendar object and set "12" as a value of this property

<script>
    import { Timepicker, Locale } from "@wx/svelte-core";
</script>

<Locale words={{ calendar:{timeFormat: 12} }}>
    <Timepicker {value} />
</Locale>

Related sample: Timepicker

There are more details at the TimePicker page.

Changing locale of a modal box

The built-in locales include the core object that allows you to localize the labels of buttons in modal boxes:

en.js

const core = {
    ok: "OK",
    cancel: "Cancel"
};

In German locale it looks like this:

de.js

const core = {
    ok:"OK",
    cancel:"Abbrechen"
};

To apply a necessary locale to a modal box, you should:

• include the Locale object on a page with a modal box and import the necessary locale package on a page.

Dialog.svelte

<script>
    import { Modal, Locale } from "@wx/svelte-core";
    import { de } from "@wx/core-locales";
</script>

• wrap the modal box you want to localize in the <Locale> tag and use the words property to set the necessary locale:

Dialog.svelte

<Locale words={de}>
    <Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
        <Text select={true} focus={true} value="Some" />
    </Modal>
</Locale>