الثيم الافتراضي

المكوّنات

إطار النافذة

إطار يشبه نافذة المتصفح حول شاشة أو قالب، فيُقرأ تطبيقًا لا جزءًا من الصفحة: ثلاث نقاط والعنوان ووسم اختياري فوق المحتوى.

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

npx ritla add window-frame

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/window-frame

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

import { WindowFrame } from "@/components/ui/window-frame";

<WindowFrame url="ritla.app/blocks/dashboard-shell" label="Sample data">
  <DashboardShell … />
</WindowFrame>

أمثلة

شاشة عربية داخل الإطار

شريط الإطار واجهة متصفح، فيبقى بتخطيط واحد في كل لغة: النقاط على اليسار والعنوان من اليسار إلى اليمين. المحتوى تحته يأخذ اتجاه الصفحة أو اتجاهه الخاص، فتُقرأ الشاشة العربية من اليمين.

احصل على الكود ›

مرجع الخصائص

WindowFrame

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	ما تعرضه النافذة: شاشة أو قالب أو لقطة.
`url`	`string`	لا يوجد	العنوان في الشريط، ويُقرأ دائمًا من اليسار إلى اليمين.
`label`	`ReactNode`	لا يوجد	وسم قصير في نهاية الشريط، مثل «بيانات تجريبية».
`shadow`	`"page" \| "band" \| "none"`	`"page"`	ظل حادّ تحت النافذة نحو نهاية السطر: على الصفحة، أو أغمق قليلًا على شريط سماوي، أو بلا ظل.
`…`	`ComponentProps<"div">`	لا يوجد	خصائص `div`، مثل `aria-label`.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	الإطار لا يتلقى التركيز؛ يصل Tab إلى ما بداخله فقط.

ARIA

النقاط الثلاث زخرفية ومخفية عن قارئ الشاشة.
العنوان والوسم نص عادي يُقرأ كما هو؛ أضف aria-label إن احتاجت النافذة اسمًا.

ملاحظات العربية والاتجاه

ينعكس

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

لا ينعكس

شريط الإطار: النقاط على اليسار والعنوان من اليسار إلى اليمين في كل لغة، كواجهة المتصفح.
الوسم في نهاية الشريط، ونصه يأخذ اتجاهه من كلماته (dir="auto").

الأرقام: لا أرقام يكتبها الإطار بنفسه؛ المحتوى يتبع إعداد الأرقام.
الخط العربي: العنوان body-12 بخط أحادي المسافة، والوسم label-12 بوزن Medium.
النص ثنائي الاتجاه: الشريط dir="ltr" والوسم dir="auto"، فوسم عربي مثل «بيانات تجريبية» يبقى سليمًا داخل الشريط.