دعم RTL
يدعم BoardUI الكتابة من اليمين إلى اليسار بالكامل للغة العربية والعبرية وغيرها من اللغات التي تُكتب من اليمين إلى اليسار، وذلك عبر المكوّنات المجانية وكتل Pro والقوالب.
أمثلة على المكوّنات
بدّل اللغات وجرّب عناصر التحكم. يتبع التخطيط واتجاه النص والتباعد وأسهم التنقل وسلوك شريط التمرير وموضع التراكب الاتجاه المحدد. تتضمن الأمثلة بطاقة مخطط Pro.
أمثلة القوالب
استكشف القوالب الفعلية بمحتوى نموذجي بالعربية والعبرية والإنجليزية. بدّل اللغات لترى النصوص والتخطيط والتفاعلات معاً.
موفّر الاتجاه
يُبقي تحديد اللغة الصريح اتجاه CSS، والتنقل بلوحة المفاتيح، والتقويمات، والقوائم المنبثقة متزامنة. يمكن تداخل الموفرين للمناطق متعددة اللغات؛ وتحافظ غلاف المحتوى الافتراضي على تخطيطك.
إعداد RTL
ثبّت DirectionProvider، ثم اضبط لغة تطبيقك واتجاهه. لا حاجة إلى علامة CLI خاصة بـ RTL أو إصدار منفصل من المكوّن.
npx boardui@latest add directionapp/layout.tsx
import { DirectionProvider } from "@/components/foundations/direction/direction";import "@/styles/globals.css";
export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="ar" dir="rtl"> <body> <DirectionProvider locale="ar">{children}</DirectionProvider> </body> </html> );}locale="ar" يُحلّل إلى RTL. استخدم he للعبرية، en-US للإنجليزية، أو zh-CN للصينية، التي تبقى من اليسار إلى اليمين. ضبط dir وحده يحدّث CSS؛ كما يُهيّئ المزوّد التنقل بلوحة المفاتيح عبر React Aria، والتقويمات، والقوائم المنبثقة.
مناطق متعددة اللغات
// Works in Next.js, Vite, React Router, and other React apps.<DirectionProvider locale="he"> <AccountSettings /></DirectionProvider>
// Providers can be nested for a region in another language.<DirectionProvider locale="ar"> <Dashboard /> <DirectionProvider locale="en-US"> <EnglishSupportPanel /> </DirectionProvider></DirectionProvider>للتثبيت اليدوي، أكمل BoardUI setup، وثبّت react-aria-components، ثم انسخ شفرة المزوّد أدناه.
components/foundations/direction/direction.tsx
// components/foundations/direction/direction.tsx"use client";
import type { HTMLAttributes, ReactNode } from "react";import { I18nProvider, useLocale } from "react-aria-components";import { cx } from "@/utils/cx";
export type Direction = "ltr" | "rtl";
export interface DirectionProviderProps extends Omit<HTMLAttributes<HTMLDivElement>, "dir" | "lang" | "children"> { /** BCP 47 language tag. Arabic and Hebrew resolve to RTL; Chinese to LTR. */ locale: string; children: ReactNode;}
/** Keeps CSS direction, React Aria keyboard behavior and portalled menus in sync. * Use at the app root, or nest providers for regions in another language. * The default display: contents boundary preserves the surrounding layout. */export function DirectionProvider({ locale, ...props }: DirectionProviderProps) { return ( <I18nProvider locale={locale}> <DirectionBoundary {...props} /> </I18nProvider> );}
function DirectionBoundary({ children, className, ...props }: Omit<DirectionProviderProps, "locale">) { const { locale, direction } = useLocale(); return <div {...props} lang={locale} dir={direction} className={cx("contents", className)}>{children}</div>;}
/** Also works inside a React Aria I18nProvider. */export function useDirection(): Direction { return useLocale().direction;}المشاريع الحالية
يقوم BoardUI بتثبيت الشيفرة المصدرية في مشروعك. أضف المزوّد، ثم حدّث المكوّنات المثبّتة قبل دعم RTL. احتفظ بنسخة احتياطية من تخصيصاتك قبل استخدام --overwrite، أو ادمج المصدر الحالي في ملفاتك المعدَّلة. حدِّث التبعيات المشتركة مثل الأزرار وأنماط القوائم والأيقونات وCSS العام إضافة إلى قالبك.
npx boardui@latest add button select tabs --overwriteتستخدم مكوّنات وقوالب Pro نفس المزوّد والأنماط المنطقية. ثبّت التحديثات عبر CLI المرخّص لديك، أو نزّل حزمة المصدر المحدّثة. يمكن لتطبيقك تغيير اللغة أثناء التشغيل دون إعادة تثبيت المكوّنات.
أنماط الاتجاه
استخدام ps / pe, ms / me, start / end، و text-start / text-end في التخطيطات المخصصة. يتبع Flex وgrid اتجاه المنطقة تلقائيًا. تستخدم رموز التنقل rtl:rotate-180؛ تُعكس الأيقونات الممرَّرة إلى أزرار BoardUI عند كونها أسهم تنقل.
احتفظ بعناوين البريد الإلكتروني وعناوين URL وأرقام OTP والشيفرة المصدرية بترتيبها الطبيعي من اليسار إلى اليمين. استخدم inputDir للتحكم في قيمة الحقل بشكل مستقل عن تسميته، و bdi لعزل النصوص المختلطة. تحتفظ محاور المخططات والبيانات بترتيب إحداثياتها؛ بينما يتبع تخطيط البطاقة وعناصر التحكم الخاصة بها اتجاه RTL.
محتوى مختلط
<Input label="البريد الإلكتروني" type="email" /> // value defaults to LTR<Input label="الاسم" inputDir="auto" />
<p>تم إرسال رسالة إلى <bdi>sara@example.com</bdi></p><pre dir="ltr"><code>npm run build</code></pre>تحافظ طبقات BoardUI العلوية على إعدادات اللغة الخاصة بها. عند كتابة بوابة مخصصة، احمل اتجاه الكتابة إلى عنصرها الجذري حتى يتمكن من العرض بشكل صحيح خارج منطقة DOM الأصلية.
بوابات مخصصة
import { createPortal } from "react-dom";import { useDirection } from "@/components/foundations/direction/direction";
function CustomOverlay() { const direction = useDirection(); return createPortal(<div dir={direction}>…</div>, document.body);}تكدسات الإشعارات تعتمد افتراضياً على bottom-end. استخدم top-start, top-end، أو bottom-start للزوايا المنطقية. الزوايا الصريحة يسار و يمين تحتفظ المواضع بمعناها الفعلي.
التوطين والخطوط
يتولى دعم RTL معالجة التخطيط والتفاعلات. تتضمن الأمثلة أعلاه ترجمات نموذجية بالعربية والعبرية. تسميات تطبيقك والأسماء القابلة للوصول والعملات والرسائل تنتمي إلى طبقة الترجمة الخاصة بك. توفر React Aria سلاسل تفاعل مدركة للغة المحلية؛ استخدم Intl.NumberFormat و Intl.DateTimeFormat لبيانات التطبيق.
اختر خطاً يدعم لغتك، مثل Noto Sans Arabic أو Noto Sans Hebrew. حمّله باستخدام أدوات الخطوط في إطار عملك وأضفه إلى --font-sans المكدّس. يحتاج النص العربي إلى تشكيل متصل وارتفاع سطر مريح؛ تجنّب التباعد الإضافي بين الحروف. تستخدم اللغة الصينية نفس أساس اللغة المحلية مع تخطيط LTR.
يتبع النهج مبدأ الأسلوب المنطقي المستخدم من قِبل shadcn/ui ويستخدم موفّر اللغة في React Aria لعناصر التفاعل الأولية الموجودة في BoardUI.