حقل الاسم باللغتين
الاسم بالعربية والاسم بالإنجليزية كما في جواز السفر، كلٌّ يُكتب باتجاهه، وبترتيب الهوية.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add bilingual-name-fieldويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/bilingual-name-fieldأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { BilingualNameField } from "@/components/ui/bilingual-name-field";<BilingualNameField name={{ ar: "nameAr", en: "nameEn" }} onValueChange={setName} />مرجع الخصائص
BilingualNameField
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
value / defaultValue / onValueChange | { ar, en } | لا يوجد | الاسمان. |
error | { ar?, en? } | لا يوجد | أخطاؤك أنت؛ وإلا يُفحص كل اسم بحروفه عند مغادرة حقله. |
name | { ar?, en? } | لا يوجد | اسما الحقلين في النموذج. |
required / disabled | boolean | true / false | كما في حقل الإدخال. |
isArabicName / isLatinName | (value) => boolean | لا يوجد | فحص الحروف. |
إمكانية الوصول
ARIA
- لكل حقل
langوdir، فيُنطق الاسم العربي بالعربية والإنجليزي بالإنجليزية. - الخطأ يقول ما يجب فعله، ولا يظهر قبل مغادرة الحقل.
ملاحظات العربية والاتجاه
ينعكس
- التسميات والتلميحات تتبع الصفحة.
لا ينعكس
- حقل الاسم العربي يُكتب من اليمين دائمًا، والإنجليزي من اليسار، أيًا كان اتجاه الصفحة.
- الأرقام
- لا أرقام فيها.
- الخط العربي
- الحقل العربي بخط IBM Plex Sans Arabic لأن
lang="ar"عليه، حتى في صفحة إنجليزية.