بطاقة القائمة الشريطية
قائمة تحليلات التفصيلية - حركة المرور حسب الجهاز أو المتصفح أو نظام التشغيل أو البلد أو المصدر كصفوف مرتبة تُشفّر أشرطة خلفيتها حصة كل عنصر، مع التسمية على الشريط والمقياس على اليمين. تتبدّل علامات التبويب ذات الخط السفلي بين القوائم، وتقع تسمية المقياس على نفس الخط الأساسي، وتتلاشى القوائم الطويلة خلف حبة صغيرة تُوسّع البقية لتنمو البطاقة معها.
التثبيت
بطاقة القائمة الشريطية جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
قوائم بعلامات تبويب
tabs هو { id, label, items }[]؛ قد يحمل كل عنصر أيقونة - أعلام، أيقونات مواقع، أي شيء بحجم 16 بكسل. الحصص نسبية إلى إجمالي علامة التبويب، وعرض الأشرطة نسبي إلى أكبر عنصر فيها.
import * as Flags from "country-flag-icons/react/3x2";
<BarListCard metricLabel="Visitors" tabs={[ { id: "countries", label: "Countries", items: [ { label: "United States of America", value: 3120, icon: <Flags.US className="h-3 w-[18px] rounded-[2px]" /> }, { label: "India", value: 2160, icon: <Flags.IN className="h-3 w-[18px] rounded-[2px]" /> }, // … ], }, { id: "sources", label: "Sources", items: [{ label: "Direct", value: 5240 }, /* … */] }, ]} defaultTab="countries" onTabChange={(id) => track("breakdown_tab", { id })}/>قائمة واحدة وأحادي
تمرير عناصر + العنوان لقائمة واحدة بدون تبويبات، metric="value" لطباعة الأرقام الخام بدلاً من الحصص، و mono لحبر رمادي واحد.
{/* One list, no tabs - a heading takes the tab strip's place */}<BarListCard title="Pages" metricLabel="Views" metric="value" items={pages} limit={4} />
{/* Single ink, mono grey bars */}<BarListCard mono />