عداد
حبوب عداد رقمية لأعداد التنقل وإجماليات غير المقروءة، بالإضافة إلى تلميح اختصار لوحة المفاتيح Kbd المستخدم في البحث السريع بالشريط الجانبي.
التثبيت
يمكنك إضافة مكون العداد هذا باستخدام CLI أو يدويا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add counterهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
الألوان
neutral (الافتراضي) يقع على الأسطح الفاتحة؛ primary مضبوط للأسطح ذات التدرج الأزرق كالزر الأساسي وعناصر التنقل المحددة.
<Counter color="neutral">91</Counter> {/* neutral pill (default) */}<Counter color="primary">152</Counter> {/* for primary/gradient surfaces */}Kbd
الـ Kbd يشترك تلميح الاختصار في شكل العداد. إنه عنصر منفصل في السجل - أضفه باستخدام npx boardui add kbd.
import { Kbd } from "@/components/base/kbd/kbd";
<Kbd>⌘L</Kbd><Kbd>⌘K</Kbd><Kbd>esc</Kbd>أعيدت تسميته من Badge
كان اسم Counter سابقا Badge. لا يزال npx boardui add badge يعمل: فهو يثبت Counter بالإضافة إلى ملف صغير badge.tsx يعيد تصديره باسم Badge، لذا تستمر عمليات الاستيراد الحالية في العمل.
// Projects that installed it as Badge keep working: badge.tsx re-exports Counterimport { Badge } from "@/components/base/badges/badge";
// New codeimport { Counter } from "@/components/base/badges/counter";