پرش به محتوا
1.6k

جهت

یک ارائه‌دهندهٔ زمینه که اجزا را بین راست‌به‌چپ و چپ‌به‌راست جابه‌جا می‌کند تا منوها، اسلایدرها و تب‌ها در زبان‌های عربی، عبری و فارسی به‌درستی آینه‌وار نمایش داده شوند.

کامپوننت DirectionProvider برای تنظیم جهت متن (ltr یا rtl) برنامهٔ شما استفاده می‌شود. این برای پشتیبانی از زبان‌های راست‌به‌چپ مانند عربی، عبری و فارسی ضروری است.

در اینجا یک پیش‌نمایش از کامپوننت در حالت RTL آمده است. برای تغییر زبان از انتخابگر زبان استفاده کنید. برای دیدن نمونه‌های بیشتر، به دنبال بخش RTL در صفحه‌های کامپوننت‌ها بگردید.

یک‌بار دور درختتان بپیچیدش تا هر کامپوننت جهت‌آگاه — منوی dropdown، slider، tab، tooltip — جهت را از React context بخواند نه از بوییدن DOM. بر پایهٔ utilityِ Base UI Direction Provider؛ چیزی رندر نمی‌کند و استایل خودش ندارد — حاشیه‌ها و سایه‌های نئوبروتالیستی در کامپوننت‌هایی هستند که هدایت می‌کند.

برای این موارد از آن استفاده کنید:

  • اپ‌های عربی، عبری یا فارسی — ناوبری کلید جهت، تراز پاپ‌آپ و رفتار slider با جهت خواندن برمی‌گردند.
  • تعویض‌گر locale — وقتی کاربر زبان را عوض می‌کند، direction provider را همراه با dir روی <html> عوض کنید.
  • صفحات mixed-direction — یک provider دور بلوک 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 را مطابق با پیکربندی پروژهٔ خود به‌روزرسانی کنید.

استفاده

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> (یا عنصر wrapper) هم بگذارید: مرورگرها، صفحه‌خوان‌ها و ویژگی‌های منطقی CSS جهت را از attributeِ DOM می‌گیرند نه از React context. همگام نگه داشتن این دو است که صفحهٔ RTL هم درست رندر شود هم درست خوانده شود.