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 thewords
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 thewords
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:
const core = {
ok: "OK",
cancel: "Cancel"
};
In German locale it looks like this:
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.
<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 thewords
property to set the necessary locale:
<Locale words={de}>
<Modal title="Custom Prompt" ok={hideAll} cancel={hideAll}>
<Text select={true} focus={true} value="Some" />
</Modal>
</Locale>