حالتهای خالی
عدم وجود داده را منتقل کنید و دستورالعمل واضحی برای انجام کاری در مورد آن ارائه دهید.
حالتهای خالی این واقعیت را منتقل میکنند که چیزی برای لیست کردن، انجام دادن، یا نمایش دادن در صفحه فعلی وجود ندارد. در حالت ایدهآل، آنها همچنین یک اقدام واضح برای کاربر ارائه میدهند.
مسیر گمشده
کاربران ممکن است به طور تصادفی به یک مسیر داینامیک غیرموجود ناوبری کنند، مانند یک bucket غیرموجود در Storage یا یک جدول غیرموجود در ویرایشگر جدول. در این موارد، از الگوی یک Admonition متمرکز به صورت زیر استفاده کنید:
<div className="flex items-center justify-center min-h-[400px]">
<Alert variant="destructive" className="max-w-md">
<AlertCircle className="h-4 w-4" />
<AlertTitle>یافت نشد</AlertTitle>
<AlertDescription>
این مسیر وجود ندارد یا دسترسی به آن ندارید.
</AlertDescription>
</Alert>
</div>بدون داده
دو روش برای نمایش حالت خالی در مواردی که داده وجود ندارد وجود دارد:
- صفر نتیجه: بدون داده پس از جستجو یا فیلتر
- حالت اولیه: بدون داده از ابتدا
صفر نتیجه
ارائههای دادهمحور بدون نتیجه باید یک حالت خالی داشته باشند که به طور گسترده با حالتی که داده وجود دارد مطابقت دارد. این باعث میشود انتقال بین دو حالت روانتر شود.
جدول
یک نمونه Table با صفر نتیجه باید یک ردیف واحد نمایش دهد. کمرنگ کردن رنگ متن TableHead و حذف حالت hover از TableCell میتواند عدم وجود داده قابل استفاده را بیشتر تقویت کند.
<Table>
<TableHeader>
<TableRow>
<TableHead className="text-muted-foreground">نام</TableHead>
<TableHead className="text-muted-foreground">ایمیل</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="hover:bg-transparent">
<TableCell colSpan={2} className="text-center text-muted-foreground">
نتیجهای یافت نشد
</TableCell>
</TableRow>
</TableBody>
</Table>DataGrid
DataGrid معمولاً ارتفاع و عرض کامل یک کانتینر را پوشش میدهد. یک نمونه کلاسیک Users است که لیستی از کاربران ثبتشده پروژه را نمایش میدهد. هر نمونه با صفر نتیجه باید یک حالت خالی برجستهتر با عنوان واضح، توضیحات، و تصویر پشتیبانی نمایش دهد.
<div className="flex flex-col items-center justify-center min-h-[400px] p-8">
<div className="text-center space-y-4">
<h3 className="text-lg font-semibold">هیچ کاربری وجود ندارد</h3>
<p className="text-muted-foreground">
شروع به اضافه کردن کاربران به پروژه خود کنید.
</p>
<Button>افزودن کاربر</Button>
</div>
</div>حالت اولیه
شاید کاربر هنوز دادهای ایجاد نکرده است. ارائه این حالت خالی بستگی به زمینه لیست و نوع دادهای که شامل میشود دارد.
ارائهای
کاربر ممکن است برای اولین بار در حال یادگیری یک ویژگی باشد، و این تجربه از آموزش کاربر یا onboarding سود میبرد. در مواردی مانند این، حالت خالی باید بیشتر روی ارزش پیشنهادی ویژگی و اقدامی که کاربر میتواند انجام دهد تمرکز کند.
<div className="flex flex-col items-center justify-center min-h-[400px] p-8">
<div className="text-center space-y-6 max-w-md">
<div className="w-24 h-24 mx-auto bg-muted rounded-full flex items-center justify-center">
<Database className="w-12 h-12 text-muted-foreground" />
</div>
<div className="space-y-2">
<h3 className="text-xl font-semibold">اولین جدول خود را ایجاد کنید</h3>
<p className="text-muted-foreground">
جداول پایه و اساس پایگاه داده شما هستند. شروع به ساخت کنید.
</p>
</div>
<Button size="lg">ایجاد جدول</Button>
</div>
</div>اطلاعاتی
یا شاید نوع لیست دادهمحور است یا از اطلاعات اضافی سود نمیبرد. در این موارد، حالت خالی باید حالت اولیه را در همان ارائهای که لیست زمانی که داده دارد نمایش میدهد نمایش دهد، بسیار شبیه به سناریو صفر نتیجه.
<Table>
<TableHeader>
<TableRow>
<TableHead>نام</TableHead>
<TableHead>ایمیل</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="hover:bg-transparent">
<TableCell colSpan={2} className="text-center text-muted-foreground py-8">
هیچ دادهای وجود ندارد
</TableCell>
</TableRow>
</TableBody>
</Table>به خاطر داشته باشید که حالتهای خالی احتمالاً پس از یک حالت بارگذاری بصری ظاهر میشوند. تغییر چیدمان و قرارگیری دکمه در طول و پس از انتقال را در نظر بگیرید.
کامپوننتها
هنوز یک کامپوننت UI مشترک برای حالت خالی وجود ندارد. زمینه و نیازهای هر قرارگیری به اندازه کافی متفاوت است که کامپوننتهای سفارشی برای هر قرارگیری را توجیه میکند.