حالة فارغة

EmptyState

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

فتح في Storybook ↗

يملأ 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`

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

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

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