العربية والاتجاه

نفس المكوّن يعمل بالعربية والإنجليزية.

الاتجاه جزء من تصميم المكوّن. المسافات تستخدم خصائص منطقية، والأسهم والتنقل تتبع اللغة في المكوّنات التي تحتاج ذلك.

واجهة عربية

app/layout.tsx
<html lang="ar" dir="rtl">
  <body>
    <Theme locale="ar" theme="dga">
      {children}
    </Theme>
  </body>
</html>

خاصية locale تضبط اتجاه الحاوية والنصوص الداخلية مثل ترقيم الصفحات واختيار الملفات. النصوص التي تمرّرها أنت، مثل اسم الخدمة ووصفها، تبقى مسؤولية التطبيق.

واجهة إنجليزية

example.tsx
<Theme locale="en" theme="ocean">
  <Button>Start service</Button>
</Theme>

النصوص المختلطة

استخدم bdi للأرقام والمعرّفات والبريد داخل نص عربي. اجعل حقول البريد والروابط باتجاه من اليسار إلى اليمين.

example.tsx
<p>رقم الطلب: <bdi>TK-1041</bdi></p>
<Input
  label="البريد الإلكتروني"
  name="email"
  type="email"
  autoComplete="email"
  dir="ltr"
/>

عند بناء مكوّن جديد

  • استخدم padding-inline-start وmargin-inline-end بدل ربط المسافات بجهة ثابتة.
  • اعكس الأسهم الدالة على التنقل، وأبقِ الأيقونات غير الاتجاهية كما هي.
  • اختبر عناوين عربية طويلة، نصوصًا إنجليزية، وتكبير النص.
  • جرّب القوائم والتبويبات بالمفاتيح في كلا الاتجاهين.

يمكن تجربة الاتجاهين من شريط الإعدادات فوق كل معاينة.