106k
New

方向

PreviousNext

一个为您的应用设置文本方向的提供者组件。

Radix UIBase UI

DirectionProvider 组件用于为您的应用设置文本方向（ltr 或 rtl）。这对于支持阿拉伯语、希伯来语和波斯语等从右到左的语言非常重要。

以下是该组件在 RTL 模式下的预览。使用语言选择器切换语言。要查看更多示例，请查看组件页面中的 RTL 部分。

تسجيل الدخول إلى حسابك
أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك
نسيت كلمة المرور؟

安装

pnpm dlx shadcn@latest add direction

使用

import { DirectionProvider } from "@/components/ui/direction"
<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* 您的应用内容 */}
    </DirectionProvider>
  </body>
</html>

useDirection

useDirection 钩子用于获取应用当前的文本方向。

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>当前方向：{direction}</div>
}