البناء · جديد

الحالة الفارغة

تملأ مساحة لا محتوى فيها بعد، وتقول السبب، وتدل على الخطوة التالية.

المعاينة

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

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/empty

الاستخدام

import { Empty } from "@/components/ui/empty";

<Empty
  illustration="empty-wallet"
  title="No transactions yet"
  description="When you send or receive money, it will show up here."
  primary={{ label: "Add money", href: "/add-money" }}
/>

أمثلة

لا نتائج

لا نتائج ليست استخدامًا أول: تكرر ما بُحث عنه وتعرض «مسح البحث»، وتُعلن (announce="status") والتركيز باقٍ في الحقل. غيّر البحث لترى القائمة.

تعذّر التحميل

قل ما حدث بكلمات بسيطة واعرض «أعد المحاولة».

مدمجة في بطاقة

‏size="compact" للمساحات الصغيرة: بلا رسم، وعنوان أصغر، والإجراء.

أزرار متراصة

‏stacking="vertical" للنصوص الطويلة، والأساسي في الأعلى.

الرسوم

أربعة وعشرون رسمًا من Figma بألوان الرموز، فتتبع الوضع الداكن. اختر ما يطابق المحتوى، ولا تغيّر ألوانها أو تقصّها أو تعكسها.

مرجع الخصائص

Empty

الخاصية	النوع	الافتراضي	الوصف
`illustration`	`EmptyIllustrationName \| ReactNode`		خانة الرسم: اسم أحد الرسوم أو أي عنصر.
`title`	`ReactNode`		خاصية Title: ما المفقود، وهو عنوان.
`description`	`ReactNode`		خاصية Description: ما سيظهر هنا أو كيف يمتلئ.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	مستوى عنوان الحالة.
`primary / secondary`	`{ label; href?; render?; onClick? }`		الإجراء الأساسي (Filled) والثانوي (Tonal).
`stacking`	`"horizontal" \| "vertical"`	`"horizontal"`	خاصية Stacking.
`size`	`"default" \| "compact"`	`"default"`	‏`compact` للبطاقات والمساحات الصغيرة.
`announce`	`"status"`		لرسائل «لا نتائج» بعد بحث أو تصفية.

EmptyIllustration

الخاصية	النوع	الافتراضي	الوصف
`name`	`EmptyIllustrationName`		أحد الرسوم الأربعة والعشرين، زخرفي دائمًا.

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

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

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

المفتاح	ما يفعله
`Tab`	إلى الإجراء الأساسي ثم الثانوي.

ARIA

العنوان عنوان حقيقي (h3 افتراضيًا) ليجده قارئ الشاشة.
الرسوم زخرفية ومخفية عن قارئ الشاشة، والشرح لا يكون في الرسم وحده.
رسائل «لا نتائج» تُعلن بـ status، ويبقى التركيز حيث كان ولا ينتقل إليها.

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

ينعكس

النص يبقى في الوسط، والإجراء الأساسي أولًا: على اليمين.

لا ينعكس

الرسوم لا تنعكس.

الأرقام: الأرقام في الوصف تتبع إعداد الأرقام؛ نسّقها بـ formatNumber.
الخط العربي: العنوان body-20 Medium (وbody-16 في المدمجة) والوصف body-14.
النص ثنائي الاتجاه: ما بحث عنه الشخص يُعزل بـ <bdi> لأنه قد يأتي بأي لغة.

كل المكونات ›