الشارة

نظرة عامة

تعرض الشارة عددا قصيرا أو نصا قصيرا، مثل عدد العناصر الجديدة أو وسم "جديد". اختر الحالة حسب ما يمثله المحتوى، وقوة التأكيد حسب بروزه المطلوب على الشاشة.

بالإضافة إلى الحالة، تتحكم ثلاث خصائص في المظهر: قوة التأكيد، والحجم، ونقطة الحالة الاختيارية.

الخصائص

خمس خصائص تحكم الشارة. القيم المذكورة شاملة.

• small يساوي ارتفاعا ثابتا 20 بكسل (مطابق لشارة الحالة). large يساوي 24 بكسل، لمواضع أكثف أو أعلى تأكيدا (مثل عدّاد تبويب).

الحالات

تعرّف الشارة حالة واحدة فقط، الافتراضية. لا تحويم ولا تعطيل ولا تحميل، لأن الشارة ليست عنصرا تفاعليا وليست قابلة للنقر بشكل مستقل.

السلوك

الشارة عنصر عرض غير تفاعلي: لا تركيز ولا تحويم ولا نقر بذاتها، فلا تحمل حلقة تركيز خاصة بها. حين توضع على عنصر قابل للنقر مثل أيقونة تنقّل أو زر، يخص التفاعل ذلك العنصر المضيف لا الشارة، وتتبع مساحة اللمس المضيف. تحديث العدد يجري فوريا دون حركة انتقال، ويُعلن العدد الجديد لتقنية المساعدة عبر تسمية العنصر المضيف.

المحتوى

الرقم دائما بالأرقام الغربية (الإنجليزية)، لا يُكتب بحروف ولا بالأرقام الهندية الشرقية. عند تجاوز العدد 99 يُعرض "+99" بدل الرقم الكامل.

إمكانية الوصول

• الشارة ليست قابلة للنقر بشكل مستقل؛ إن وُضعت على عنصر قابل للنقر (أيقونة أو زر) فمساحة اللمس تخص ذلك العنصر لا الشارة.
• أعلن العدد الكامل في تسمية الوصول حتى عند اختصار العرض المرئي إلى "+99".
• تسمية الوصول تسمّي ما يمثله العدد (مثل "طلبات جديدة")، لا الرقم وحده ولا اسم اللون. اللون وحده لا يكفي أبدا.

الاتجاه والتوطين

الاتجاه منطقي: النقطة الرائدة في صيغة الحلقة توضع عند بداية المحتوى منطقيا، فتنعكس تلقائيا بين العربية والإنجليزية دون أي تبديل يدوي بين اليسار واليمين. الأرقام نفسها تبقى بصيغتها الغربية وتُقرأ من اليسار إلى اليمين داخل الشارة، بصرف النظر عن اتجاه الشاشة.

افعل ولا تفعل

الرموز المستخدمة

ملاحظة: تعبئة البرتقالي والمحايد في هذه الشارة أغمق درجة من الرمزين الدلاليين الأقرب (brand.warning-low-stock ومحايد الحالة brand.status-neutral)، وهذا مقصود حسب تصميم Figma النهائي، وليس خطأ.

الشيفرة

الشارة تُستورد من حزمة المكوّنات، وتُنسّق بالكامل من الرموز الدلالية. الاستخدام في React أولا، ثم الجزء الجوهري من تنفيذها: خرائط الحالة الناعمة والصلبة، وكل واحدة تحمل زوج الوضع الفاتح والداكن معا.

import { Badge } from "@mercato/components";

<Badge status="info" content="12" />
<Badge status="critical" strong content="99+" />
<Badge status="success" size="large" icon content="4" />
<Badge status="warning" content="جديد" />

// Tone by status, emphasis by `strong`. Soft is a tint fill with deep
// text; strong is a full-color fill. Each entry carries the light and
// dark pair, so dark mode flows through the same class.
const SOFT = {
  info: "bg-dodger-blue-50 text-dodger-blue-600 dark:bg-dodger-blue-950 dark:text-dodger-blue-300",
  success: "bg-apple-100 text-apple-700 dark:bg-apple-950 dark:text-apple-300",
  critical: "bg-red-ribbon-100 text-red-ribbon-600 dark:bg-red-ribbon-950 dark:text-red-ribbon-300",
  // ...default / warning / attention
};
const SOLID = { info: "bg-primary text-primary-on", critical: "bg-red-ribbon-600 text-white" /* ... */ };

const tone = strong ? SOLID[status] : SOFT[status];
// Cap a pure numeric count at 99+; text content is shown as-is.
const label = /^\d+$/.test(content) && Number(content) > 99 ? "99+" : content;

<span className={`inline-flex items-center justify-center rounded-full font-bold leading-none ${sz} ${tone}`}>
  {label}
</span>

لا تحمل الشارة قيمة لون خام: كل حالة تحمل زوج الفاتح والداكن معا، فتبديل الوضع الداكن أو إعادة العلامة يسري تلقائيا.

مكوّنات ذات صلة