الاتجاه

مزود سياق يقوم بتبديل اتجاه عرض المكونات بين «من اليسار إلى اليمين» و«RTL» (من اليمين إلى اليسار)، بحيث تُعرض القوائم وأشرطة التمرير وعلامات التبويب بشكل صحيح باللغات العربية والعبرية والفارسية.

يُستخدم مكوّن DirectionProvider لضبط اتجاه النص (ltr أو rtl) في تطبيقك. وهذا ضروري لدعم اللغات المكتوبة من اليمين إلى اليسار مثل العربية والعبرية والفارسية.

فيما يلي معاينة للمكوّن في وضع RTL. استخدم محدِّد اللغة لتبديل اللغة. لرؤية المزيد من الأمثلة، ابحث عن قسم RTL في صفحات المكوّنات.

تسجيل الدخول إلى حسابك

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

لفّه حول شجرتك مرة واحدة فيقرأ كل مكوّن واعٍ للاتجاه — قوائم منسدلة، منزلقات، تبويبات، تلميحات — الاتجاه من سياق React بدل استشعار DOM. مبني على أداة Base UI Direction Provider؛ لا يعرض شيئًا ولا يحمل تنسيقًا خاصًا — حدود وظلال النيوبروتالية تعيش في المكوّنات التي يوجّهها.

استخدمه عندما:

تطبيقات عربية أو عبرية أو فارسية — تنقل الأسهم، محاذاة المنبثقات، وسلوك المنزلق ينعكس مع اتجاه القراءة.
مبدّل اللغة — اقلب direction للمزوّد مع dir على <html> عندما يغيّر المستخدم اللغة.
صفحات مختلطة الاتجاه — عشّ مزوّدًا حول كتلة RTL (نموذج مضمّن، اقتباس) داخل تطبيق LTR.

التثبيت


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
npx shadcn@latest add https://neobrutalism.com/r/base/direction.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/direction.json

ثبِّت التبعيات التالية:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

انسخ والصق الكود التالي في مشروعك.

components/ui/direction.tsx

"use client"

import * as React from "react"
import { Direction } from "radix-ui"

function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof Direction.DirectionProvider> & {
  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
}) {
  return (
    <Direction.DirectionProvider dir={direction ?? dir}>
      {children}
    </Direction.DirectionProvider>
  )
}

const useDirection = Direction.useDirection

export { DirectionProvider, useDirection }

حدِّث مسارات الاستيراد لتطابق إعداد مشروعك.

الاستخدام

import { DirectionProvider } from "@/components/ui/direction"

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

يُستخدم الخطّاف useDirection للحصول على الاتجاه الحالي للتطبيق.

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

إمكانية الوصول

DirectionProvider يوجّه منطق المكوّنات فقط — لا يضبط سمة dir أبدًا. اضبط دائمًا dir على <html> (أو العنصر المغلف) أيضًا: المتصفحات وقارئات الشاشة وخصائص CSS المنطقية تستمد الاتجاه من سمة DOM لا من سياق React. مزامنة الاثنين هي ما يجعل صفحة RTL تُعرض وتُقرأ بشكل صحيح.

الاتجاه

التثبيت#