دیگ

Stat Tilev1.0.1

کارتِ آمارِ خلاصه: یک برچسب، یک عددِ بزرگ و روندِ تغییرِ اختیاری (٪۱۲٫۴ رشد نسبت به ماه قبل). داشبورد از قبل Progress و Meter برای نمایشِ پیشرفت داشت؛ این کامپوننت جای «Total API Calls: ۱۲۰٬۴۰۰» کنار یک روندِ رنگی را پر می‌کند.

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

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

مجموع درخواست‌ها
۱۲۰٬۴۰۰
+12.4%نسبت به ماه قبل

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

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

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

نصب

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

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

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

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

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

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

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

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

استفاده

import {
  StatTile,
  StatTileHeader,
  StatTileLabel,
  StatTileIcon,
  StatTileValue,
  StatTileTrend,
} from "@/components/ui/stat-tile"

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

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

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

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

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

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

ترکیب اجزا

StatTileValue با dir="ltr" و tabular-nums رندر می‌شود تا رقم‌های فارسی هم در یک متنِ کلاً راست‌به‌چپ، هم‌تراز و بدون جهش‌عرضی باشند — همان مشکلی که در نمایشِ اعدادِ بزرگ داخل UI فارسی معمولاً دیده می‌شود.

StatTileTrend جهت (up/down) را از علامتِ value حدس می‌زند، اما برای متریک‌هایی که کاهش‌شان خبرِ خوب است (نرخِ خروج، زمانِ بارگذاری) از invertColor استفاده کنید تا رنگ برعکس شود بدونِ اینکه جهتِ فلش عوض شود.

دسترس‌پذیری

  • عدد و برچسب هر دو متن ساده‌اند و بدون تنظیم اضافه با صفحه‌خوان خوانده می‌شوند.
  • StatTileTrend فقط با رنگ (سبز/قرمز) جهت را نشان نمی‌دهد؛ آیکونِ فلش هم دارد، برای کاربرانی که رنگ‌ها را به‌سختی تشخیص می‌دهند.

مرجع API

StatTile

ویژگینوعپیش‌فرضتوضیح
variant"elevated" | "bordered" | "flat" | "ghost""elevated"سطح ظاهریِ کارت؛ ghost بدون پس‌زمینه/حاشیه.

StatTileTrend

ویژگینوعپیش‌فرضتوضیح
valuenumber—مقدارِ تغییر؛ علامتِ عدد جهت را تعیین می‌کند مگر direction صریح بدهید.
direction"up" | "down" | "neutral"—بازنویسیِ دستیِ جهت به‌جای حدس‌زدن از روی value.
invertColorbooleanfalseمعکوس‌کردنِ رنگِ سبز/قرمز برای متریک‌هایی که کاهش‌شان خوب است.
labelReact.ReactNode—متنِ کمکی بعد از عدد، مثلِ «نسبت به ماه قبل».
formatValue(value: number) => string—قالب‌بندیِ دلخواهِ عدد به‌جای پیش‌فرضِ «+۱۲٪».

StatTileIcon

قابِ کوچکِ گوشهٔ کارت، معمولاً کنار StatTileLabel در StatTileHeader.

ویژگینوعپیش‌فرضتوضیح
childrenReact.ReactNode—یک svg (مثلاً از Digche)؛ اندازه‌اش خودکار به ۱۶px تنظیم می‌شود.

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

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

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

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

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

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