حالة فارغة

EmptyState

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

افتح في ستوري بوك ↗

يملأ EmptyState القوائم ونتائج البحث وشاشات الخطأ الفارغة. مرر title وdescription وaction، أو ركب الأجزاء مباشرة.

متى تستخدمه

استخدم EmptyState حين لا يوجد ما يُعرض في قائمة أو بحث أو لوحة تحكّم: لا طلبات بعد، أو لا نتائج مطابقة، أو فشل التحميل. قل ما حدث، ولماذا، وما الخطوة التالية، وقدّم الإجراء التالي زرًّا.

استخدم الأنماط الدلالية للأخطاء والأنماط العادية لشاشات الاستخدام الأول.

أمثلة

لا بيانات

لا توجد طلبات بعد

أنشئ طلبك الأول للبدء.

الأنماط الدلالية

لا توجد نتائج

جرّب كلمة بحث أخرى أو امسح عوامل التصفية.

فشل التحميل

حدث خطأ ما. يرجى المحاولة مرة أخرى.

أنجزت كل شيء

لا توجد مهام معلّقة. عمل رائع.

أجزاء مركّبة

لا توجد مجموعات بيانات منشورة

انشر مجموعة بيانات لجعلها مرئية على بوابة البيانات المفتوحة الوطنية.

العربية (RTL)

لا توجد نتائج

جرّب كلمة بحث أخرى أو امسح عوامل التصفية.

الخصائص

الخصائص التي يعرّفها EmptyState. سمات العنصر الأصلي تمرّ كما هي.

<EmptyState>

الخاصية	النوع	الوصف
`variant`	`"search" \| "default" \| "error" \| "success"`
`size`	`"sm" \| "md" \| "lg"`
`icon`	`react.ReactNode`	Leading media (icon or illustration). Pass `false` to hide the media. Defaults to a variant-appropriate icon. Ignored when `children` is set.
`title`	`react.ReactNode`	Title. Ignored when `children` is set.
`description`	`react.ReactNode`	Supporting description below the title. Ignored when `children` is set.
`action`	`react.ReactNode`	Primary action, e.g. a `<Button>`. Ignored when `children` is set.
`secondaryAction`	`react.ReactNode`	Secondary action beside the primary one. Ignored when `children` is set.
`asChild`	`boolean`	Render the consumer's own element as the root (Radix `Slot`) instead of a `<div>`, so the empty-state surface can compose with a custom container. As with the other composable parts, supply a single child element.

<EmptyStateTitle>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`		Override the heading element (e.g. render an `<h2>` on full-page states).

<EmptyStateDescription>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

<EmptyStateActions>

الخاصية	النوع	الافتراضي	الوصف
`asChild`	`boolean`

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

العنوان عنوان حقيقي والوصف نص، فتُعلن الحالة بالترتيب. الوسائط زخرفية ومخفية عن التقنيات المساعدة.

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