دیگ

Empty Statev1.0.0

وقتی فهرست، جدول یا نتیجهٔ جست‌وجو خالی است: یک آیکون، عنوان کوتاه، یک خط توضیح که می‌گوید چرا خالی است، و یک یا دو کنش روشن برای بیرون آمدن از این حالت. هر صفحه‌ای که داده نشان می‌دهد یک روز خالی است؛ این کامپوننت آن روز را یکدست و مفید می‌کند.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API — هنوز برای این کامپوننت پورت نشدهSvelte ۵ با runes — هنوز برای این کامپوننت پورت نشدهانگولار با signals و دایرکتیوهای standalone — هنوز برای این کامپوننت پورت نشده

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

سبد خرید شما خالی است

محصولی که به سبد اضافه کنید این‌جا نمایش داده می‌شود.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
npx digdesign@latest add https://docs.digdesign.ir/r/empty-state.json
pnpm dlx digdesign@latest add https://docs.digdesign.ir/r/empty-state.json
yarn dlx digdesign@latest add https://docs.digdesign.ir/r/empty-state.json
bunx --bun digdesign@latest add https://docs.digdesign.ir/r/empty-state.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

استفاده

import {
  EmptyState,
  EmptyStateIcon,
  EmptyStateTitle,
  EmptyStateDescription,
  EmptyStateActions,
} from "@/components/ui/empty-state"

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

ترکیب اجزا

همهٔ بخش‌ها اختیاری‌اند جز عنوان. EmptyStateIcon قاب دایره‌ای آیکون است و آیکون را خودکار ۲۴ پیکسل می‌کند؛ EmptyStateActions دکمه‌ها را وسط‌چین کنار هم می‌گذارد و کنش اصلی که اول بیاید در RTL سمت راست می‌نشیند.

سه حالت ظاهری دارد: default بدون قاب برای وسط صفحه، bordered با خط‌چین برای جای خالی داخل یک بخش، و muted با پس‌زمینهٔ ملایم داخل کارت. size فقط فاصلهٔ داخلی را عوض می‌کند.

دسترس‌پذیری

  • عنوان یک h3 است؛ اگر حالت خالی جای عنوان اصلی صفحه نشسته، به‌جای EmptyStateTitle یک h2 با همان کلاس‌ها بگذارید تا ترتیب سرتیترها درست بماند.
  • آیکون تزئینی است و aria-hidden دارد؛ معنا باید در عنوان باشد.
  • بعد از فیلتر یا جست‌وجوی بی‌نتیجه، حالت خالی را در یک ناحیهٔ aria-live="polite" بگذارید تا صفحه‌خوان هم نتیجه را بشنود.

مرجع API

EmptyState

ویژگینوعپیش‌فرضتوضیح
variant"default" | "bordered" | "muted""default"بدون قاب، خط‌چین، یا پس‌زمینهٔ ملایم.
size"sm" | "default" | "lg""default"فاصلهٔ داخلی.

EmptyStateIcon

قاب دایره‌ای آیکون؛ آیکون خودکار ۲۴ پیکسل می‌شود و از صفحه‌خوان پنهان است.

ویژگینوعپیش‌فرضتوضیح
childrenReact.ReactNode—یک svg.

EmptyStateTitle / EmptyStateDescription / EmptyStateActions

عنوان h3، توضیح p با حداکثر عرض خوانا، و ردیف وسط‌چین دکمه‌ها.

ویژگینوعپیش‌فرضتوضیح
childrenReact.ReactNode—محتوا.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.