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

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

Loading demo: empty-state-real-world

التثبيت

npx sdaia-ui@latest add empty-state

import { EmptyState } from "@/components/ui/empty-state"

<EmptyState type="no-data" />

حالة فارغة لعرض لا تتوفّر فيه بيانات.

Loading demo: empty-state-no-data

حالة فارغة تظهر عند انعدام الاتصال بالإنترنت.

Loading demo: empty-state-no-connection

حالة فارغة تظهر عند حدوث خطأ.

Loading demo: empty-state-error

حالة فارغة لقائمة إشعارات فارغة.

Loading demo: empty-state-no-notifications

حالة فارغة تظهر عند انقطاع الاتصال أثناء الجلسة.

Loading demo: empty-state-connection-lost

حالة فارغة 404 للصفحات التي لا يمكن العثور عليها.

Loading demo: empty-state-page-not-found

خصائص مكوّن EmptyState.

Prop	Type	Default	Required
type	'no-data' \| 'no-connection' \| 'error' \| 'no-notifications' \| 'connection-lost...	'no-data'	optional
rtl	boolean	false	optional
illustration	ReactNode	-	optional
heading	boolean	true	optional
helperText	boolean	true	optional
button	boolean	true	optional
headingContent	ReactNode	-	optional
helperTextContent	ReactNode	-	optional
buttonLabel	string	-	optional
onButtonClick	() => void	-	optional