ددیگ

Spinner

یک کمانِ چرخان برای نشان‌دادن بارگذاری وقتی مدت‌زمان دقیق معلوم نیست؛ برخلاف Progress که یک مقدار مشخص دارد.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API و Reka UISvelte ۵ با runes و Bits UIانگولار با signals و Angular CDK

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

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

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

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

نصب

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

نصب سریع با لینک سخت و دیسک مشترکپکیج‌منیجر پیش‌فرض Node.jsYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/spinner.json
npx dig-ui@latest add https://design-system-tau-green.vercel.app/r/spinner.json
yarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/spinner.json
bunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/spinner.json

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

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

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

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

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

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

استفاده

import { Spinner } from "@/components/ui/spinner"

<Spinner size="md" color="primary" />

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

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

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

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

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

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

ترکیب اجزا

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 فقط کمان چرخان است.
labelstring"در حال بارگذاری"متن aria-label برای صفحه‌خوان.

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

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

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

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

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

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