Spinnerv1.0.0
یک کمانِ چرخان برای نشان‌دادن بارگذاری وقتی مدت‌زمان دقیق معلوم نیست؛ برخلاف Progress که یک مقدار مشخص دارد.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/spinner.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/spinner.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/spinner.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/spinner.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { Spinner } from "@/components/ui/spinner"
<Spinner size="md" color="primary" />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
Spinner یک عنصر مستقل (span با role=status) است؛ خودش متن یا برچسب کنارش نمی‌گذارد. برای نوشتن برچسب، آن را با flex کنار متن قرار دهید.
برای دکمه‌ها، از پراپ loading خودِ Button استفاده کنید که اسپینر را به‌صورت شبه‌عنصر داخلی رندر می‌کند، نه این کامپوننت.
دسترس‌پذیری
- role=status و aria-label دارد؛ برچسب پیش‌فرض «در حال بارگذاری» است و با پراپ label قابل تغییر است.
- چون role=status یک لایو-ریجن ملایم است، صفحه‌خوان تغییر حضور/غیابش را اعلام می‌کند؛ اسپینرهای همیشه-حاضر (نه شرطی) را داخل یک کانتینر بدون role نگه دارید تا حاشیه‌متن اضافه اعلام نشود.
- رنگ به‌تنهایی حامل معنا نیست؛ متن یا برچسب کناری همیشه بگذارید.
مرجع API
Spinner
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | اندازهٔ حلقه. |
| color | "default" | "primary" | "success" | "warning" | "destructive" | "primary" | رنگ کمانِ چرخان. |
| variant | "default" | "simple" | "default" | default حلقهٔ زمینه دارد؛ simple فقط کمان چرخان است. |
| label | string | "در حال بارگذاری" | متن aria-label برای صفحه‌خوان. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
اندازه‌ها
sm برای داخل متن/دکمه، md پیش‌فرض، lg برای صفحهٔ تمام‌عرض.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
رنگ‌ها
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
بدون حلقهٔ زمینه (simple)
فقط کمانِ چرخان، بدون ردِ ایستای پشتش؛ برای زمینه‌های شلوغ که حلقهٔ خاکستری اضافه به‌نظر می‌رسد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کنار متن
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
داخل دکمهٔ غیرفعال
برای خودِ دکمه از پراپ loading استفاده کنید؛ این فقط برای نمایش کنار هم است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| اندازه‌ها | sm برای داخل متن/دکمه، md پیش‌فرض، lg برای صفحهٔ تمام‌عرض. |
| رنگ‌ها | هماهنگ‌کردن رنگ اسپینر با معنای عملیات، مثل موفق یا خطر |
| بدون حلقهٔ زمینه (simple) | فقط کمانِ چرخان، بدون ردِ ایستای پشتش؛ برای زمینه‌های شلوغ که حلقهٔ خاکستری اضافه به‌نظر می‌رسد. |
| کنار متن | پیام میان‌حالتِ «در حال دریافت اطلاعات» زیر یک فهرست یا کارت |
| داخل دکمهٔ غیرفعال | برای خودِ دکمه از پراپ loading استفاده کنید؛ این فقط برای نمایش کنار هم است. |