Localization

Default loc library provides three built-in locales:

• English
• Chinese
• German

You can also apply a custom locale.

Default locale

The English locale is applied by default

Applying locales

To apply a built-in locale, import the Locale object from "@svar-ui/svelte-core", the locale package from "@svar-ui/core-locales", and a built-in locale from "@svar-ui/filter-locales", and then add the words attribute for the required language to the Locale tag. Then, wrap Filter into the Locale tag.

Example:

<script>
  import { Locale } from "@svar-ui/svelte-core";
  import { cn } from "@svar-ui/filter-locales";
  import { cn as cnCore } from "@svar-ui/core-locales";
</script>

<Locale words={{ ...cn, ...cnCore }}>
    <FilterBuilder {fields} />
</Locale>

To apply a custom locale, you need to create an object for the custom locale (or modify the existing one) and provide translations for all Filter text labels (it can be any language you need). You also need to add labels from the core and calendar components ("@svar-ui/core-locales"). Refer to Core localization for more details.

Example for the Korean language:

<script>
    import { Locale } from "@svar-ui/svelte-core";
    import { FilterBuilder } from "@svar-ui/svelte-filter";

    const ko = {
        filter: {
            "Add filter": "필터 추가",
            "Add group": "그룹 추가",
        },
        core:{ ... },
        calendar: { ... }
    };

<Locale words={{ ko }}>
    <FilterBuilder {fields} />
</Locale>