بطاقة أشرطة المراحل
القمع كقائمة - حبة دائرية لكل مرحلة فوق مسار الرسم البياني، الاسم على اليسار، والقيمة والحصة من المرحلة الأولى على اليمين. تتحرك العروض عند التحميل، ويؤدي التمرير فوق مرحلة إلى تغميق حبتها وتلاشي البقية، ويتبع العنوان الرئيسي ذلك. يأخذ نفس المراحل كبطاقة مخطط القمع.
Pipeline
1,180
+2.4%التثبيت
بطاقة أشرطة المراحل جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
أحادي
mono يُسقط ألوان كل مرحلة لصالح حبر واحد - رمادي متوسط على الفاتح، وشبه أبيض على الداكن - قمع المرحلة الأحادية للمرجع.
{/* Single ink: every pill in one grey (mid grey on light, near-white on dark) */}<StageBarsCard mono />البيانات
stages هي قائمة مسطّحة { label, value, color? } قائمة، مع وضع أعلى القمع أولاً. أضف مرحلة وستحصل على صف وبطاقة (ثلاث بطاقات لكل صف، تنمو البطاقة لتناسب المحتوى)؛ يتكيف عمود التسمية مع أطول اسم، وتُشتق الحصص من المرحلة الأولى. قد تحمل كل مرحلة حجم 14px أيقونة يُرسم عند الطرف الأيسر داخل شريطه - showIcons={false} يخفيها جميعاً. تكون حبة الفترة الزمنية قائمة منسدلة عند تمرير ranges - كل نطاق يحمل بياناته الخاصة (واختياريًا delta / headline) وتُعيد الرسم البياني تحريكه عند التحديد؛ onRangeChange يتيح لك الجلب بدلاً من ذلك. عند غياب خصائص البيانات، تُشحن البطاقة بثلاثة نطاقات تجريبية، وهو ما تستخدمه المعاينات أعلاه.
import { RiEyeLine, RiUserAddLine } from "@remixicon/react";
// One entry per stage, top of the funnel first - the same shape FunnelChartCard// takes, plus an optional 14px icon drawn at the left end inside the bar.const stages = [ { label: "Visits", value: 4820, icon: <RiEyeLine className="size-3.5 text-neutral-950" /> }, { label: "Sign-up", value: 3260, icon: <RiUserAddLine className="size-3.5 text-neutral-950" /> }, { label: "Active", value: 2010 }, { label: "Pro", value: 1160 }, { label: "Team", value: 540 }, { label: "Enterprise", value: 180, color: "var(--color-chart-1)" }, // override any colour];
<StageBarsCard title="Pipeline" stages={stages} headline={4820} // optional resting headline (defaults to the first stage) delta={0.024} // "+2.4%" chip range="Last 30 days" // static pill… showIcons // default; false hides the icons without removing them from the data/>
// …or a working period dropdown: each range overrides stages / delta / headline.<StageBarsCard title="Pipeline" ranges={[ { id: "7d", label: "Last 7 days", stages: week, delta: 0.024 }, { id: "30d", label: "Last 30 days", stages: month, delta: 0.061 }, { id: "90d", label: "Last 90 days", stages: quarter, delta: -0.012 }, ]}/>