使用 Premium Chakra UI 组件更快地构建 💎
了解更多2025年1月3日
Chakra UI v3.0 支持 RTL 语言。您需要了解的关键事项是
html 元素或任何父元素上的 dir 属性LocaleProvider 组件用于设置 locale 和 dir设置这些后，组件将以正确的方向呈现，并且辅助功能属性也将正确设置。
هذا مثال على كيفية استخدام موفر اللغة في تطبيقك. يمكنك تغيير اللغة بسهولة.
import { Heading, LocaleProvider, Slider, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<LocaleProvider locale="ar-AE">
<Stack gap="4" maxW="sm" dir="rtl">
<Heading>مرحباً بكم في تشاكرا يو آي</Heading>
<Text textStyle="body-sm">
هذا مثال على كيفية استخدام موفر اللغة في تطبيقك. يمكنك تغيير اللغة
بسهولة.
</Text>
<Slider.Root defaultValue={[50]}>
<Slider.Control>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumbs />
</Slider.Control>
</Slider.Root>
</Stack>
</LocaleProvider>
)
}
dir 属性html 元素或任何父元素上的 dir 属性将设置组件的方向。
<html dir="rtl">
<Heading>RTL - الى أن مرجع ويتّفق, ان </Heading>
<Slider />
</html>LocaleProvider 组件在 Ark UI 基于逻辑的组件上，LocaleProvider 组件用于设置 locale 和 dir。
<LocaleProvider locale="ar-Ar">
<Heading>RTL - الى أن مرجع ويتّفق, ان </Heading>
<Slider />
</LocaleProvider>请确保将根组件包裹在 LocaleProvider 组件中。
总而言之，RTL 支持的工作方式如下
<LocaleProvider locale="ar-Ar">
<Stack dir="rtl">
<Heading>RTL - الى أن مرجع ويتّفق, ان </Heading>
<Slider />
</Stack>
</LocaleProvider>