国际化与 RTL
Reka UI 同时支持 LTR/RTL 方向。了解如何集成国际化。
多方向支持
简介
本文档提供了关于如何在支持 SSR 的 Reka UI 中利用多方向支持的指南。Reka UI 依赖于 Floating UI 来定位浮动元素，这需要提供当前 Web 应用的方向。
Reka 组件默认是 LTR 方向，但您可以控制想要支持的方向（仅 LTR、RTL 或两者）。本节提供了轻松支持 RTL 方向的最佳实践。
RTL
ConfigProvider 是一个包装组件，用于提供全局配置，包括 Web 应用的方向性。
当创建需要从右到左 (RTL) 阅读方向的本地化应用时，您需要使用 ConfigProvider 组件包装您的应用，以确保所有原语根据 dir 属性调整其行为。
要使所有 Reka UI 支持 RTL，请将整个应用包装在 ConfigProvider 中，并传入 dir 属性，值为 rtl。
将以下代码添加到您的 app.vue 或主布局组件中
vue
<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'
</script>
<template>
<ConfigProvider dir="rtl">
<slot />
</ConfigProvider>
</template>所有被提供者包装的 Reka 组件都会继承 dir 属性。
动态方向
要动态更改 Reka UI 的方向，我们可以利用 useTextDirection 可组合函数，并将其与我们的 ConfigProvider 结合使用。
但首先，我们需要安装 @vueuse/core 包。
sh
$ npm add @vueuse/core然后，在您的根 Vue 文件中
vue
<script setup lang="ts">
import { useTextDirection } from '@vueuse/core'
import { ConfigProvider } from 'reka-ui'
import { computed } from 'vue'
const textDirection = useTextDirection()
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</script>
<template>
<ConfigProvider :dir="dir">
<slot />
</ConfigProvider>
</template>为支持 SSR - 当服务器无法访问 html 及其方向时，在 useTextDirection 中设置 initialValue。
vue
<script setup lang="ts">
import { ConfigProvider } from 'reka-ui'
import { useTextDirection } from '@vueuse/core'
const textDirection = useTextDirection({ initialValue: 'rtl' })
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</script>
<template>
<ConfigProvider :dir="dir">
<slot />
</ConfigProvider>
</template>提示
dir 属性不支持 auto 作为值，因此我们需要一个中间的 Ref 来明确定义方向。
textDirection 是一个 Ref，通过将其值更改为“ltr”或“rtl”，html 标签上的 dir 属性也会随之改变。
国际化
有些语言是从左到右书写 (LTR)，而另一些语言是从右到左书写 (RTL)。在一个多语言 Web 应用中，您需要同时配置方向性和翻译。这是一个关于如何使用 reka-ui 原语实现此功能的简化指南。
但首先，让我们安装一些必需的包。
依赖项
我们依赖于 VueI18n 来管理我们想要支持的不同翻译。
sh
$ npm add vue-i18n@latest请继续在 main.ts 中添加“hello”一词在不同语言中的翻译。
ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
语言选择器
设置好翻译并添加 vue-i18n 插件后，您需要在 app.vue 中添加一个语言选择器。通过使用这个 reka-ui 选择原语更改语言，
- 翻译会根据新语言做出响应
- Web 应用的方向会根据新语言做出响应
vue
<script setup lang="ts">
import { useTextDirection } from '@vueuse/core'
import { ConfigProvider, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport, } from 'reka-ui'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
type LanguageInfo = {
label: string
value: string
dir: 'ltr' | 'rtl'
}
const dir = useTextDirection({ initialValue: 'ltr' })
const { locale } = useI18n()
const selectedLanguage = ref<string>()
const languages: LanguageInfo[] = [
{ label: 'English', value: 'en', dir: 'ltr' },
{ label: 'Persian', value: 'fa', dir: 'rtl' },
{ label: 'Arabic', value: 'ar', dir: 'rtl' },
{ label: 'Japanese', value: 'ja', dir: 'ltr' },
]
function selectLanguage(newLanguage: string) {
const langInfo = languages.find(item => item.value === newLanguage)
if (!langInfo)
return
dir.value = langInfo.dir
locale.value = langInfo.value
}
</script>
<template>
<ConfigProvider :dir="dir">
<div class="flex flex-col max-w-[1400px] mx-auto gap-y-[8rem] justify-center items-center p-10">
<div class="text-2xl">
👋 {{ $t("hello") }}
</div>
<div class="text-2xl">
HTML is in <span class="text-bold text-purple-500">{{ dir }}</span> mode
</div>
<SelectRoot
v-model="selectedLanguage"
@update:model-value="selectLanguage"
>
<SelectTrigger
class="inline-flex min-w-[160px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
aria-label="Customize options"
>
<SelectValue placeholder="Select a language..." />
<Icon
icon="radix-icons:chevron-down"
class="h-3.5 w-3.5"
/>
</SelectTrigger>
<SelectPortal>
<SelectContent
class="min-w-[160px] bg-white rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-[100]"
:side-offset="5"
>
<SelectScrollUpButton
class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
>
<Icon icon="radix-icons:chevron-up" />
</SelectScrollUpButton>
<SelectViewport class="p-[5px]">
<SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
Languages
</SelectLabel>
<SelectGroup>
<SelectItem
v-for="(option, index) in languages"
:key="index"
class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
:value="option.value"
>
<SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
<Icon icon="radix-icons:check" />
</SelectItemIndicator>
<SelectItemText>
{{ option.label }}
</SelectItemText>
</SelectItem>
</SelectGroup>
</SelectViewport>
<SelectScrollDownButton
class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
>
<Icon icon="radix-icons:chevron-down" />
</SelectScrollDownButton>
</SelectContent>
</SelectPortal>
</SelectRoot>
</div>
</ConfigProvider>
</template>