111k
新建

Direction

PreviousNext

用于设置应用文本方向的 provider 组件。

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 hook 用于获取应用当前的方向。

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