شارة الاتجاه

تجريبي

التغيّر بجانب الرقم: الصعود بالأخضر والهبوط بالأحمر والثبات بالرمادي، مع سهم لا ينعكس أبدًا.

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

أضف المكوّن
$ npx ritla add trend-badge
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/trend-badge
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

trend-badge.tsx

import { TrendBadge } from "@/components/ui/trend-badge";<TrendBadge value={12.4} />

الخاصية	النوع	الافتراضي	الوصف
`value`	`number`	لا يوجد	التغيّر بالنسبة المئوية: 12.4 تُكتب «‎+12.4%». إشارته تحدد الاتجاه.
`children`	`ReactNode`	لا يوجد	نص آخر بدل النسبة («‎+214.670 د.أ»).
`direction`	`"up" \| "down" \| "flat"`	لا يوجد	خاصية Direction. افتراضيًا من إشارة `value`.
`size`	`"sm" \| "md"`	`"sm"`	خاصية Size: sm في الصفوف والبطاقات الصغيرة، وmd بجانب الرقم الكبير.
`variant`	`"soft" \| "plain"`	`"soft"`	خاصية Style: Soft حبة ملوّنة، وPlain نص فقط للصفوف المزدحمة.
`fractionDigits`	`number`	`1`	عدد الخانات بعد الفاصلة.

اللون ليس الإشارة الوحيدة: السهم والإشارة يقولان الشيء نفسه، والشارة توضع بجانب كلمات مثل «مقارنة بالشهر الماضي».
السهم زخرفي، والنص «‎+12.4%» هو ما يُقرأ.

سهما الصعود والهبوط يشيران إلى الأعلى والأسفل في الاتجاهين، والتغيّر «‎+12.4%» يبقى كتلة واحدة من اليسار إلى اليمين والإشارة أولًا.

الأرقام: النسبة تتبع numerals في RitlaProvider: ‎+12.4% أو ‎+١٢٫٤٪.
الخط العربي: numeric-12 Regular (sm) أو numeric-14 Medium (md)، بأرقام متساوية العرض.