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

المكوّنات

الرسوم التوضيحية

رسوم بخط محيطي لشاشات المنتج، من رموز التصميم، تنعكس مع الاتجاه وتبقى نصوصها مقروءة.

تجريبي

المعاينة

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

التثبيت

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

npx ritla add illustration

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

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

الاستخدام

import { IlBar, IlCard, IlText, IllustrationBackdrop, IllustrationSvg } from "@/components/ui/illustration";

<IllustrationBackdrop grid={20}>
  <IllustrationSvg width={240} height={120}>
    <IlCard x={20} y={10} width={200} height={100} />
    <IlText x={34} y={34} weight="semibold">New transfer</IlText>
    <IlBar x={34} y={48} width={120} />
  </IllustrationSvg>
</IllustrationBackdrop>

أمثلة

أجزاء الطقم

كل جزء كما في لوحة Figma «Outline kit»: البطاقة بظل حادّ، والأشرطة، والوسم، والزر، والفاصل، ونقطة الصورة، والمفتاح، والسهمان، ورمز QR، والحقل، وصف القائمة، وأعمدة الرسم، والنافذة، وبطاقة البنك. في RTL ينتقل الظل ومقبض المفتاح وسهم «التالي» وأحدث عمود، ويبقى سهم التبديل والأرقام ورمز QR.

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

كود واحد للاتجاهين

‏CodebaseIllustration: الشاشة نفسها بالاتجاهين حول محور. يرسم الاتجاهين بنفسه، فلا ينعكس مع الصفحة.

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

متغيرات Figma

‏VariablesIllustration: كل عيّنة تلوّن رمز التصميم الحيّ في وضعها، الفاتح أو الداكن، أيًّا كان وضع الصفحة. واجهة Figma بالإنجليزية، فتبقى من اليسار إلى اليمين.

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

نتائج الفحص

‏ScanListIllustration: الصفوف تتبع اتجاه الصفحة والعدد في نهاية السطر، والنطاقات من اليسار إلى اليمين.

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

مرجع الخصائص

IllustrationSvg

الخاصية	النوع	الافتراضي	الوصف
`width / height`	`number`	لا يوجد	مساحة الرسم بإحداثيات من اليسار إلى اليمين. يتمدد الرسم مع عرض حاويته.
`mirror`	`boolean`	`true`	ينعكس الرسم داخل اتجاه RTL حول خطه الأوسط. ‏`false` للرسوم التي لا اتجاه قراءة لها.
`label`	`string`	لا يوجد	مع الاسم يصبح الرسم صورة بهذا الاسم، وبدونه زخرفيًا مخفيًا.

IlCard

‏IlRect وIlBar وIlDot وIlLine تأخذ خصائص الموضع واللون نفسها.

الخاصية	النوع	الافتراضي	الوصف
`x, y, width, height / cx, cy, r / x1, y1, x2, y2`	`number`	لا يوجد	الموضع والحجم بوحدات الرسم.
`fill / stroke`	`IllustrationTone`	لا يوجد	اسم لون من لوحة الرسوم، وكل لون رمز تصميم. الخط المحيطي الافتراضي `border/brand/dim`.
`radius`	`number`	لا يوجد	نصف قطر الزوايا.
`elevation / onBrand`	`"none" \| "hard" / boolean`	`"none"`	‏`IlCard`: الظل الحادّ، 6 نحو نهاية السطر و6 للأسفل (أسفل اليسار في RTL)، والأعمق منه فوق الشريط السماوي.
`dashed`	`boolean`	لا يوجد	خط متقطع لخطوط البناء مثل محور الانعكاس.

IlText

الخاصية	النوع	الافتراضي	الوصف
`anchor`	`"start" \| "end" \| "middle"`	`"start"`	أي طرف من النص يقع على `x` كما يُرسم من اليسار. في RTL يبقى الطرف نفسه على `x` المعكوس.
`size / weight / fill`	`number / Weight / IllustrationTone`	لا يوجد	حجم الخط ووزنه ولونه، بلا تباعد بين الحروف.
`mono`	`boolean`	لا يوجد	خط ثابت العرض للأكواد والنطاقات.

IlArrow

الخاصية	النوع	الافتراضي	الوصف
`kind`	`"next" \| "swap"`	`"next"`	‏`next` يشير إلى نهاية السطر وينعكس، و`swap` (تبادل) لا ينعكس أبدًا.
`badge`	`boolean`	لا يوجد	داخل دائرة بلون العلامة كما في Figma، وبدونها الرمز وحده داخل زر.
`toward`	`"end" \| "start"`	`"end"`	‏`start` لسهم يعود إلى الخلف في رسم يعرض الاتجاهين معًا.

IlSwitch

الخاصية	النوع	الافتراضي	الوصف
`on`	`boolean`	لا يوجد	المقبض عند نهاية السطر حين يعمل.

IlInput

وIlListRow وIlTag وIlButton بالطريقة نفسها.

الخاصية	النوع	الافتراضي	الوصف
`value / tag`	`ReactNode`	لا يوجد	القيمة (قائمة دائمًا) والوسم عند نهاية السطر.

IlChartBars

الخاصية	النوع	الافتراضي	الوصف
`values`	`number[]`	لا يوجد	الأقدم أولًا، والأحدث بلون العلامة. رسوم الصفحة الرئيسية التوضيحية ومؤشر KPI تتبع اتجاه القراءة، فيقع الأقدم في البداية (اليمين) والأحدث في النهاية (اليسار) بالعربية.

IlWindow

الخاصية	النوع	الافتراضي	الوصف
`elevation / onBrand`	`"none" \| "hard" / boolean`	لا يوجد	الظل الحادّ كما في `IlCard`، والأعمق منه فوق الشريط السماوي.

IlBankCard

وIlQr لا ينعكس كذلك.

الخاصية	النوع	الافتراضي	الوصف
`last4 / pattern`	`string`	لا يوجد	آخر أربعة أرقام، ونمط رمز QR.

Upright

وIlCheck لا ينعكس كذلك.

الخاصية	النوع	الافتراضي	الوصف
`children / x, y, size`	`ReactNode / number`	لا يوجد	علامة الصح لا تنعكس، و`Upright` يحمي مجموعة كاملة من الانعكاس.

CodebaseIllustration

الخاصية	النوع	الافتراضي	الوصف
`label / startTag / endTag`	`string`	لا يوجد	كلمات الشريحة على المحور ووسمَي الشاشتين.

VariablesIllustration

الخاصية	النوع	الافتراضي	الوصف
`rows / labels`	`VariableRow[] / { variable; light; dark; direction }`	لا يوجد	صفوف المتغيرات وكلمات الأعمدة.

ScanListIllustration

الخاصية	النوع	الافتراضي	الوصف
`rows / caption`	`ScanRow[] / ReactNode`	لا يوجد	الصفحات المفحوصة وعدد ملاحظات كل واحدة، والسطر تحتها.

IllustrationBackdrop

الخاصية	النوع	الافتراضي	الوصف
`grid`	`16 \| 20 \| 40`	`20`	خلية شبكة البناء: 16 للبطاقات الصغيرة و20 للبطاقات و40 للبطل.
`surface`	`"sky" \| "none"`	`"sky"`	‏`sky` يلوّن الشريط بـ `background/brand/faint`، و`none` يرسم الشبكة وحدها.
`fade`	`boolean`	لا يوجد	تتلاشى الشبكة من المنتصف.

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

ARIA

الرسم زخرفي ومخفي عن قارئ الشاشة ما لم يُعطَ label، وعندها يُقرأ صورة بذلك الاسم.
الشبكة زخرفة فقط ولا تستقبل النقر.

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

ينعكس

التخطيط كله حول خطه الأوسط: الصورة الرمزية والتسميات والأزرار تنتقل إلى الجهة الأخرى.
السهم يتبع اللغة، وفي رسوم الصفحة الرئيسية التوضيحية ومؤشر KPI يجري الزمن مع اتجاه القراءة.

لا ينعكس

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

الأرقام: الأرقام في الرسم من اليسار إلى اليمين دائمًا، فالرسم يرتب النص من اليسار.
الخط العربي: الخط يتبع أقرب lang: ‏Geist أو IBM Plex Sans Arabic، ولا تباعد بين الحروف العربية أبدًا.