البناء · جديد
الشارة
عدد (رسائل غير مقروءة، موافقات معلّقة) أو نقطة لشيء جديد، داخل التبويبات وعناصر التنقل والقوائم والصفوف. لكلمات الحالة استخدم الوسم.
المعاينة
المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.
npx shadcn@latest add @ritla/badgeالاستخدام
import { Badge } from "@/components/ui/badge";<Badge variant="brand" count={3} label="unread messages" />أمثلة
الأنماط والمقاسات
خمسة ألوان، وon-brand للخلفيات بلون العلامة؛ lg وmd يعرضان العدد وsm نقطة. الأعداد فوق max (99) تظهر «99+».
مرجع الخصائص
Badge
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "gray" | "brand" | "green" | "amber" | "red" | "on-brand" | "gray" | خاصية Style (الاسم محجوز في React). الأحمر للأعداد العاجلة فقط. |
size | "lg" | "md" | "sm" | "md" | خاصية Size؛ sm نقطة بلا رقم. |
count | number | string | خاصية Count؛ الرقم يُنسَّق بنظام الأرقام. | |
max | number | 99 | ما فوقه يظهر «99+». |
label | ReactNode | نص مخفي يُقرأ بعد العدد («رسائل غير مقروءة»)؛ النقطة بلا تسمية تُقرأ «جديد». | |
numerals | "latn" | "arab" | الافتراضي من KanzProvider. |
إمكانية الوصول
ARIA
- العدد نص يُقرأ مع معناه عبر
label(٣ رسائل غير مقروءة)؛ لا تعتمد على اللون وحده. - النقطة لها اسم مخفي، «جديد» افتراضيًا بلغة الصفحة.
ملاحظات العربية والاتجاه
ينعكس
- الشارة تتبع موضعها في الصف: في نهاية السطر (اليسار) في العربية.
لا ينعكس
- «99+» تبقى بالترتيب نفسه: الرقم معزول باتجاه LTR.
- الأرقام
- العدد يتبع
numeralsأوKanzProvider(غربية افتراضيًا)، ليطابق المبالغ في بقية الشاشة. - الخط العربي
-
label-12بوزن Medium؛ الشارة تطول مع السطر العربي.