Skeletonv1.1.0
جای‌نگهداری با انیمیشن پالس، شیمر یا بدون انیمیشن که هنگام بارگذاری داده به‌جای محتوا نمایش داده می‌شود.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/skeleton.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/skeleton.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/skeleton.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/skeleton.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="h-4 w-40" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
دسترس‌پذیری
- اسکلت صرفاً بصری است؛ برای اعلام وضعیت بارگذاری به صفحه‌خوان از aria-busy روی ظرف محتوا استفاده کنید.
- برای کاربرانی که انیمیشن حرکتی حساسیت دارند، prefers-reduced-motion را در سطح پروژه رعایت کنید یا animation="none" را برای همان کاربران فعال کنید.
مرجع API
Skeleton
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| animation | "pulse" | "shimmer" | "none" | "pulse" | نوع انیمیشن جای‌نگهدار: پالس (پیش‌فرض)، شیمر (باند نور متحرک) یا بدون انیمیشن. |
| className | string | — | ابعاد و شکل جای‌نگهدار را با کلاس‌های Tailwind تعیین کنید. |
SkeletonGroup
چند Skeleton با animation="shimmer" را طوری هماهنگ می‌کند که یک باند نور واحد از روی کل گروه رد شود؛ خودش هیچ prop اختصاصی‌ای ندارد.
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| className | string | — | چیدمان گروه (grid، space-y و…) را با Tailwind تعیین کنید. |
data-slot
برای استایل‌دهی سفارشی یا انتخاب در CSS از همین‌ها استفاده کنید.
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| skeleton | div | — | خودِ جای‌نگهدار؛ همراه با data-animation برای نوع انیمیشن فعلی. |
| skeleton-group | div | — | ظرف SkeletonGroup که شیمر فرزندانش را هماهنگ می‌کند. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Loading Card
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
انواع انیمیشن
با animation می‌توان بین پالس (پیش‌فرض)، شیمر (باند نور متحرک) و بدون انیمیشن سوییچ کرد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شیمر هماهنگ گروه
SkeletonGroup چند Skeleton با animation="shimmer" را طوری هماهنگ می‌کند که یک باند نور واحد از روی کل گروه رد شود، نه شیمر جداگانه روی هر کدام.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
پروفایل کاربر
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
فهرست
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شبکه (Grid)
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
متن چندخطی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
شکل هم‌راستا با محتوا
اسکلت باید شکل محتوای واقعی را داشته باشد: دایره برای آواتار، خطوط با پهنای متفاوت برای متن. یک مستطیل تنها به کاربر چیزی دربارهٔ ساختار صفحه نمی‌گوید و چیدمان با رسیدن داده می‌پرد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
حرکتِ کاهش‌یافته
برخی کاربران pulse مداوم را آزاردهنده می‌بینند. با animation="none" شکل جای‌نگهدار می‌ماند بدون انیمیشن؛ این تصمیم را می‌توانید به prefers-reduced-motion هم وصل کنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Loading Card | کارت مقاله یا محصول در حال بارگذاری اولیهٔ صفحه |
| انواع انیمیشن | با animation می‌توان بین پالس (پیش‌فرض)، شیمر (باند نور متحرک) و بدون انیمیشن سوییچ کرد. |
| شیمر هماهنگ گروه | SkeletonGroup چند Skeleton با animation="shimmer" را طوری هماهنگ می‌کند که یک باند نور واحد از روی کل گروه رد شود، نه شیمر جداگانه روی هر کدام. |
| پروفایل کاربر | هدر پروفایل یا کارت نویسنده تا رسیدن نام و آواتار |
| فهرست | فهرست پیام‌ها یا اعلان‌ها پیش از رسیدن چند ردیف اول از سرور |
| شبکه (Grid) | گالری تصاویر یا شبکهٔ محصولات فروشگاه در حال بارگذاری |
| متن چندخطی | پاراگراف مقاله یا توضیح محصول تا تمام‌شدن دریافت متن کامل |
| شکل هم‌راستا با محتوا | کارت کاربر یا ردیف فهرست که هنوز داده‌اش نرسیده |
| حرکتِ کاهش‌یافته | کاربرانی که prefers-reduced-motion را روشن کرده‌اند |
دستورالعمل استفاده
شکل اسکلت باید شبیه محتوای واقعی باشد
انجام بده
ابعاد هر Skeleton را با className (اندازه، عرض، rounded-full یا rounded-md) طوری تنظیم کنید که چیدمانش با محتوای نهایی یکی باشد؛ کاربر از همان لحظهٔ اول شکل نتیجه را حدس می‌زند.
انجام نده
یک بلوک مستطیلی یکسان برای همه‌چیز نگذارید؛ وقتی شکل اسکلت با آواتار و متن نهایی فرقی ندارد، تعویض ناگهانی محتوا در چشم می‌زند و حس پرش می‌دهد.
تعداد خطوط متناسب با محتوای واقعی
انجام بده
برای کارتی با تصویر و دو خط متن (عنوان کوتاه، توضیح کوتاه‌تر)، همان تعداد و نسبت عرض را در اسکلت بازسازی کنید.
انجام نده
برای همان کارت یک اسکلت تکی و بلند نگذارید؛ کاربر نمی‌فهمد قرار است تصویر و چند خط متن جداگانه بارگذاری شود یا فقط یک بلوک بزرگ.
شیمر هماهنگ برای گروه‌های بزرگ
انجام بده
وقتی چند Skeleton کنار هم (مثل یک شبکهٔ کارت یا فهرست) با animation="shimmer" نمایش داده می‌شوند، داخل SkeletonGroup بگذارید تا یک باند نور واحد از روی همه رد شود؛ شلوغی چند شیمر جدا و ناهماهنگ را از بین می‌برد.
انجام نده
بدون SkeletonGroup، هر خانه شیمر خودش را جدا و با تأخیر تصادفی نسبت به بقیه اجرا می‌کند؛ در شبکه‌های بزرگ این حالت آشفته به نظر می‌رسد.