Meterv1.0.0
نوار اندازه‌گیریِ یک مقدار ثابت (مصرف فضا، امتیاز، ظرفیت باقی‌مانده) با برچسب و مقدار داخلی؛ برخلاف Progress که پیشرفتِ یک تسک در حال انجام را دنبال می‌کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/meter.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/meter.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/meter.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/meter.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { Meter } from "@/components/ui/meter"
<Meter label="فضای ذخیره‌سازی" value={68} min={0} max={100} />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
برخلاف Progress، Meter برچسب و مقدار عددی را خودش رسم می‌کند (چون معنایش یک اندازه‌گیریِ ثابت است، نه یک تسکِ در حال اجرا که ممکن است چند نوار پشت‌سرهم بدون برچسب هم داشته باشد).
اگر فقط label بدهید مقدار درصد خودکار کنارش می‌آید؛ با showValueLabel={false} می‌توانید مخفی‌اش کنید.
دسترس‌پذیری
- role=meter دارد، نه progressbar؛ صفحه‌خوان‌ها آن را به‌عنوان اندازه‌گیری معرفی می‌کنند نه وضعیتِ در حال پیشرفت.
- اگر label رشته باشد به‌طور خودکار aria-label می‌شود؛ برای برچسب پیچیده‌تر (JSX) خودتان aria-label بدهید.
- رنگ به‌تنهایی حامل معنا نیست؛ برای آستانه‌های بحرانی از برچسب متنی هم استفاده کنید.
مرجع API
Meter
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value | number | 0 | مقدار فعلی. |
| min | number | 0 | کمینه. |
| max | number | 100 | بیشینه. |
| label | React.ReactNode | — | برچسب بالای نوار. |
| showValueLabel | boolean | true | نمایش درصد کنار برچسب. |
| size | "sm" | "md" | "lg" | "md" | ضخامت نوار. |
| color | "default" | "primary" | "success" | "warning" | "destructive" | "primary" | رنگ نوار پرشده. |
| formatOptions | Intl.NumberFormatOptions | — | قالب نمایش مقدار عددی. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
با آستانهٔ رنگی
رنگ را بر اساس مقدار خودتان انتخاب کنید (مثلاً نزدیک به سقف = warning).
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
اندازه‌ها
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
بدون برچسب
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Meter در برابر Progress
Progress پیشرفتِ رو به هدف است و رنگش ثابت می‌ماند. Meter اندازه‌گیریِ یک مقدار نسبت به آستانه‌هاست: پایین سبز، نزدیک سقف قرمز. رنگ را با آستانهٔ خودِ برنامه عوض کنید، نه با درصدِ عمومی.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| با آستانهٔ رنگی | رنگ را بر اساس مقدار خودتان انتخاب کنید (مثلاً نزدیک به سقف = warning). |
| اندازه‌ها | هماهنگ‌کردن ضخامت Meter با سایر عناصر همان بخش (کارت فشرده در برابر صفحهٔ کامل) |
| بدون برچسب | کنار متنی که خودش عدد و عنوان را توضیح داده |
| Meter در برابر Progress | فضای دیسک، اعتبار حساب، هر مقداری با آستانهٔ خطر |