بطاقات الإحصاءات
بطاقات مؤشرات الأداء الرئيسية لرؤوس لوحة التحكم، بمظهرين - الصف المضغوط الذي تستخدمه قوالب لوحة التحكم، ومتغير تذييل مع بلاطة أيقونة متدرجة، وتلميح معلومات اختياري، وقيمة بحجم العرض، وشريط تذييل يحمل تسمية المقارنة وحبة دلتا.
إجمالي الإيرادات
$152,313.92
مقارنةً بالشهر الماضي
16%إجمالي الطلبات
25,162
مقارنةً بالشهر الماضي
20%عملاء جدد
3,847
مقارنةً بالشهر الماضي
8.1%المبالغ المستردة
$4,209.44
مقارنةً بالشهر الماضي
2.4%التثبيت
يمكنك إضافة بطاقات الإحصاءات باستخدام CLI الخاص بنا أو يدويًا. يسحب CLI أيضًا عناصر chip وtooltip الأساسية التي تتألف منها:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add stat-cardsهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
المتغيرات
مظهران عبر variant الخاصية. plain (الافتراضي) هو البطاقة المضغوطة من قوالب لوحة التحكم - لوحة رمز محايدة وتسمية وقيمة وشريحة دلتا. تذييل الصفحة يبدأ بمربع أيقونة متدرج ملوّن بجانب التسمية، ويضبط القيمة بحجم العرض، وينقل المقارنة إلى شريط تذييل يحتوي على حبة دلتا بيضاء يتبع رمزها deltaColor.
<StatCards /> {/* compact: icon, label, value, delta chip */}<StatCards variant="footer" /> {/* icon tile + label, display value, footer band */}أحضر بياناتك الخاصة
تمرير stats لاستبدال مقاييس العرض التوضيحي. يقرأ متغير التذييل ثلاثة حقول اختيارية إضافية لكل إحصاء: tone يُلوّن بلاطة الأيقونة (أزرق، برتقالي، بنفسجي، وردي، سماوي، أو زمردي)، caption يستبدل نص التذييل، و hint يضيف رمز معلومات مع تلميح.
import { RiCoinsFill, RiShoppingBasket2Fill } from "@remixicon/react";import { StatCards, type Stat } from "@/components/application/dashboard/stat-cards";
const stats: Stat[] = [ { icon: RiCoinsFill, label: "Total revenue", value: "$152,313.92", delta: "16%", deltaColor: "lime", // lime | rose | neutral - picks the pill glyph too tone: "blue", // icon tile tint (footer variant) caption: "From last month", // footer band caption (footer variant) hint: "Gross revenue across all channels.", // info tooltip (footer variant) }, { icon: RiShoppingBasket2Fill, label: "Total orders", value: "25,162", delta: "20%", deltaColor: "lime", tone: "orange", },];
<StatCards variant="footer" stats={stats} />