الشريحة

شرائح تسميات ملونة بثلاثة مستويات تأكيد - غامق للحالات والتغيرات، خفيف للقيم، تعليق للوسوم - عبر سبعة أزواج ألوان، بالإضافة إلى مؤشر StatusDot.

+12.5%$3.252مهندس تطوير خلفي

التثبيت

يمكنك إضافة مكوّن chip هذا باستخدام CLI الخاص بنا أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add chip

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

المتغيرات والألوان

ثلاثة مستويات تأكيد عبر variant - كل منها متاح في سبعة أزواج لونية عبر اللون.

limeroseyellowcyanneutralرماديsoft
$3.252$3.252$3.252$3.252$3.252$3.252$3.252
مهندس تطوير خلفيمهندس تطوير خلفيمهندس تطوير خلفيمهندس تطوير خلفيمهندس تطوير خلفيمهندس تطوير خلفيمهندس تطوير خلفي
<Chip variant="bold" color="lime">Active</Chip> {/* statuses, deltas */}<Chip variant="subtle" color="cyan">$3.252</Chip> {/* values */}<Chip variant="caption" color="rose">Designer</Chip> {/* tags */}

StatusDot

الـ StatusDot يتزاوج المؤشر مع الرقائق داخل عناصر الاختيار والجداول. وهو عنصر سجل منفصل: npx boardui add status-dot.

import { StatusDot } from "@/components/base/badges/status-dot"; <StatusDot color="green" /><StatusDot color="yellow" /><StatusDot color="indigo" />