خالی (Empty)

معرفی

کامپوننت Empty برای نمایش وضعیت خالی بودن استفاده می‌شود.

چه زمانی استفاده کنیم:

• وقتی لیست یا جدولی هنوز داده‌ای ندارد
• برای صفحاتی که کاربر هنوز محتوایی ایجاد نکرده است
• وقتی نتیجه جستجو یا فیلتر خالی است

چه زمانی استفاده نکنیم:

• برای حالت خالی جدول — از ردیف با پیام مناسب در Table استفاده کنید
• برای حالت خطا — از ErrorState استفاده کنید
• برای صفحه ۴۰۴ — از Alert با لینک بازگشت استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { Empty, EmptyIcon, EmptyTitle, EmptyDescription } from '@parto-system-design/ui'
import { Icons } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <Empty>
      <EmptyIcon>
        <Icons.inbox className="h-6 w-6" />
      </EmptyIcon>
      <EmptyTitle>هیچ موردی یافت نشد</EmptyTitle>
      <EmptyDescription>شما هنوز هیچ موردی اضافه نکرده‌اید</EmptyDescription>
    </Empty>
  )
}

کامپوننت‌ها

• Empty — wrapper اصلی با layout عمودی مرکزچین
• EmptyIcon — محل نمایش آیکون
• EmptyTitle — عنوان وضعیت خالی
• EmptyDescription — توضیح تکمیلی

Props

Empty

EmptyIcon

EmptyTitle

EmptyDescription

حالت‌ها و انواع

با دکمه اقدام

<Empty>
  <EmptyIcon>
    <Icons.inbox className="h-6 w-6" />
  </EmptyIcon>
  <EmptyTitle>هیچ گزارشی وجود ندارد</EmptyTitle>
  <EmptyDescription>با ایجاد اولین گزارش، تحلیل‌های خود را شروع کنید.</EmptyDescription>
  <Button size="sm" className="mt-4">
    ایجاد گزارش جدید
  </Button>
</Empty>

حالت ساده بدون آیکون

<Empty>
  <EmptyTitle>نتیجه‌ای یافت نشد</EmptyTitle>
  <EmptyDescription>فیلترهای جستجو را تغییر دهید و دوباره تلاش کنید.</EmptyDescription>
</Empty>

راهنمای استفاده

دسترسی‌پذیری

• متن عنوان و توضیحات توسط screen reader خوانده می‌شود
• اگر دکمه اقدام دارید، با Tab قابل دسترسی است
• سازگار با RTL

کامپوننت‌های مرتبط

• ErrorState — وقتی خطایی رخ داده و نیاز به نمایش وضعیت خطا دارید، نه وضعیت خالی
• حالت‌های خالی — راهنمای کامل الگوهای empty state