واجهة البحث
البحث مع نتائجه: حقل فيه زرا الرجوع والمسح فوق قائمة بالأشخاص والحسابات والعمليات. لوحة بإطار أو نافذة حوار على سطح المكتب، والشاشة كلها على الهاتف.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
إنجليزيمعكوسعربي
سطح المكتبالجوال
← RTL
أمثلة
ملء الشاشة (الهاتف)
قبل الكتابة، عمليات البحث الأخيرة.
إنجليزيمعكوسعربي
سطح المكتبالجوال
← RTL
نافذة فوق الصفحة
SearchViewDialog: يفتحها زر البحث، ويغلقها زر الرجوع أو مفتاح Escape أو اختيار نتيجة. على سطح المكتب تحلّ مكان anchor (الشريط أو الزر الذي يفتحها) كما في Search view modal في Figma، وعلى الهاتف تملأ الشاشة.
إنجليزيمعكوسعربي
سطح المكتبالجوال
← RTL
التثبيت
أضف القالب
npx ritla add search-viewويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/search-view
مبني من
مكوّنات Ritla UI التي يتكوّن منها هذا القالب، وتُثبَّت معه.
ملاحظات العربية والاتجاه
ينعكس
- ينعكس الشريط: زر الرجوع على اليمين ويشير إلى اليمين، وزر المسح على اليسار.
- تنتقل صورة كل نتيجة أو أيقونتها إلى اليمين، ووسمها إلى اليسار.
لا ينعكس
- علامة المسح X.
- الأرقام
- يتبع عدد النتائج إعداد الأرقام. أما المبالغ والتواريخ في النتائج فهي بياناتك وتظهر كما تمررها.
- النص ثنائي الاتجاه
- يأخذ الحقل اتجاه ما يُكتب فيه، فيُقرأ الاسم اللاتيني من اليسار إلى اليمين في بحث عربي، وكذلك العناوين والأوصاف. ضع أرقام الهواتف داخل
<bdi dir="ltr">. ويجد البحث العربي ما يكتبه الناس بأي شكل: أحمد واحمد، وآمنة وامنه، وتُتجاهل الحركات.