多语言 LocaleProvider - Svelte

目前支持语言

最低支持版本	语言
v0.0.1	简体中文: zh_CN
v0.7.0	英语: en_GB、日语: ja_JP、韩语: ko_KR
v1.8.0	阿拉伯语: ar
v1.11.0	越南语: vi_VN、俄罗斯语: ru_RU、印尼语: id_ID、马来语: ms_MY、泰语: th_TH、土耳其语: tr_TR
v1.17.0	葡萄牙语（巴西）: pt_BR
v1.28.0	繁体中文: zh_TW
v2.2.0	西班牙语: es
v2.15.0	意大利语: it、法语：fr、德语：de
v2.21.0	罗马尼亚语: ro
v2.29.0	瑞典语： sv_SE、波兰语： pl_PL、荷兰语： nl_NL
v2.88.0	阿塞拜疆语：az、保加利亚语：bg、加泰罗尼亚语：ca、捷克语：cs_CZ、宿务语：ceb_PH、丹麦语： da、希腊语：el_GR、西班牙语（拉美）：es_419、爱沙尼亚语：et、波斯语：fa_IR、菲律宾语：fil_PH、芬兰语： fi_FI、法语（加）：fr_CA、爱尔兰语：ga、希伯来语：he_IL、印地语：hi_IN、克罗地亚语：hr、匈牙利语：hu_HU、冰岛语：is、爪哇语：jv_ID、哈萨克语：kk、高棉语：km_KH、立陶宛语：lt、拉脱维亚语：lv、缅甸语：my_MM、挪威语： nb、葡萄牙语：pt、斯洛伐克语：sk、斯洛文尼亚语：sl、阿尔巴尼亚语：sq、斯瓦希里语：sw、乌克兰语：uk_UA、乌尔都语：ur、乌兹别克语：uz

已支持组件

目前有以下组件存在内置默认文本，均已实现国际化多语言适配
Calendar、Cascader、Chat、DatePicker、Form、Image、List、Modal、Navigation、Nav、Pagination、Popconfirm、Select、Table、TimePicker、Transfer、Tree、TreeSelect、Typography、Upload

使用

LocaleProvider 使用 context 向后代传递语言包，你只需要在应用外围包裹一次即可全局生效
当需要切换语言时，把 locale 绑定到随之变化的状态上即可，子树会自动更新。

<script lang="ts">
    import en_GB from '@fibrae/semi-foundation/locale/source/en_GB';
    import { LocaleProvider } from '@fibrae/semi-ui-svelte';
</script>

<LocaleProvider locale={en_GB}>
    <App />
</LocaleProvider>

不传 locale 时 LocaleProvider 继承外层 LocaleProvider 的语言，最外层都没有时回退 zh_CN；ConfigProvider 的 locale 优先于 LocaleProvider。

代码示例

国际化

Total pages: 10
Items per page: 10

合計ページ数：10
1ページあたりのアイテム数：10

代码

<script lang="ts">
    import en_GB from '@fibrae/semi-foundation/locale/source/en_GB';
    import ja_JP from '@fibrae/semi-foundation/locale/source/ja_JP';
    import { LocaleProvider, Pagination } from '@fibrae/semi-ui-svelte';
</script>

<LocaleProvider locale={en_GB}>
    <Pagination showSizeChanger showTotal style="margin: 20px" total={100} />
</LocaleProvider>
<LocaleProvider locale={ja_JP}>
    <Pagination showSizeChanger showTotal style="margin: 20px" total={100} />
</LocaleProvider>

自定义国际化组件

当你的自定义组件，也希望消费 Semi LocaleProvider 中的 localeCode 或者读取具体某个组件的 i18n 文本时，你可以使用 LocaleConsumer 获取：它的 children snippet 接收 { locale, localeCode, dateFnsLocale, currency }。在组件初始化时也可以调用 useLocale(componentName)，它返回一个 getter，调用它即可读到同样四项。语言的优先级为 ConfigProvider、LocaleProvider、zh_CN。自定义命名空间（示例中的 ComponentA）通过 declaration merging 扩展 Locale 类型。

zh-CN : 开始时间

ko-KR : 시작 시간

en-GB : Start Time

semi

design

dsm

代码

<script lang="ts" module>
    // Custom component text joins the Locale type through declaration merging
    declare module '@fibrae/semi-foundation/locale/interface' {
        export interface Locale {
            ComponentA: { customKey: string };
        }
    }
</script>

<script lang="ts">
    import en_GB from '@fibrae/semi-foundation/locale/source/en_GB';
    import ko_KR from '@fibrae/semi-foundation/locale/source/ko_KR';
    import zh_CN from '@fibrae/semi-foundation/locale/source/zh_CN';
    import { LocaleConsumer, LocaleProvider } from '@fibrae/semi-ui-svelte';

    const locales = [
        { ...zh_CN, ComponentA: { customKey: 'semi' } },
        { ...ko_KR, ComponentA: { customKey: 'design' } },
        { ...en_GB, ComponentA: { customKey: 'dsm' } },
    ];
</script>

{#each locales as locale (`semi-${locale.code}`)}
    <LocaleProvider {locale}>
        <LocaleConsumer componentName="TimePicker">
            {#snippet children({ locale: timePicker, localeCode })}
                <div>{localeCode} : {timePicker.begin}</div>
            {/snippet}
        </LocaleConsumer>
    </LocaleProvider>
{/each}
{#each locales as locale (`custom-${locale.code}`)}
    <LocaleProvider {locale}>
        <LocaleConsumer componentName="ComponentA">
            {#snippet children({ locale: componentA })}
                <div>{componentA.customKey}</div>
            {/snippet}
        </LocaleConsumer>
    </LocaleProvider>
{/each}

支持多语言的组件

示例给出了目前所有支持多语言的组件

当你的网站有RTL适配需求时，推荐直接使用ConfigProvider，除了可配置locale外，还可以直接同时配置direction='rtl'/'ltr'
若无RTL适配需求，直接使用LocaleProvider即可

API 参考

LocaleProvider

Props

属性	说明	类型	默认值
children	使用该语言包的子树。	`Snippet`	-
locale	语言包。不传、传 undefined 或 null 时继承外层 LocaleProvider 的语言，最外层都没有时组件回退 zh_CN；ConfigProvider 的 locale 优先于它。	`Locale \| null`	-

LocaleProvider 不渲染 DOM 元素，class、style 与原生属性和事件都不会落到页面上。

LocaleConsumer

Props

属性	说明	类型	默认值
children	参数为 `{ locale, localeCode, dateFnsLocale, currency }` 的 snippet，其中 locale 是 componentName 对应的文案片段。	`Type`	-
componentName	要读取的语言包命名空间，如 TimePicker；只接受 Locale 中声明的组件名，自定义命名空间通过 declaration merging 扩展 Locale。	`K`	-

LocaleConsumer 不渲染自己的元素，class、style 与原生属性和事件都不会落到页面上。

useLocale

useLocale(componentName) 返回 () => LocaleResult，调用返回的 getter 读取结果。componentName 可以是字符串，也可以是返回字符串的函数。

字段	说明	类型
locale	`componentName` 对应的文案片段	`Locale[K]`
localeCode	语言代码	string
dateFnsLocale	date-fns 的语言对象，缺失时由 date-fns 使用默认的 enUS	`Locale`（date-fns）
currency	语言所在地区的 ISO 4217 货币码	string

多语言

目前支持语言

已支持组件

使用

代码示例

国际化

自定义国际化组件

支持多语言的组件

Pagination

Modal

Select & Cascader

DatePicker

TimePicker

TreeSelect

Table

Table - Empty

List - Empty

Calendar

Typography - Copyable

Typography - Collapsible

Transfer

Image

Form

Navigation

API 参考

LocaleProvider

LocaleConsumer

useLocale