بطاقة الهدف
هدف ادخار في شبكة من عمودين: أيقونة واسم والمدّخر من الهدف وشريط تقدّم.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add goal-tileويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/goal-tileالاعتماديات التي يضيفها
@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { GoalTile } from "@/components/ui/goal-tile";<GoalTile name="Dream car" detail="JOD 12,567 of 25,000" progress={50} progressLabel="50% saved" />مرجع الخصائص
GoalTile
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
name / detail | ReactNode | لا يوجد | الهدف والمدّخر من المبلغ المستهدف. |
progress | number | لا يوجد | من 0 إلى 100. |
progressLabel | string | لا يوجد | التقدّم بالكلمات. |
icon | IconComponent | TargetIcon | الأيقونة في المربع. |
href | string | لا يوجد | يجعل البطاقة كلها رابطًا. |
إمكانية الوصول
ARIA
- الشريط شريط تقدّم يسمّيه
progressLabel.
ملاحظات العربية والاتجاه
ينعكس
- المحتوى وامتلاء الشريط يبدآن من اليمين.
لا ينعكس
- المبالغ في التفاصيل تبقى كما يكتبها التطبيق.
- الأرقام
- الأرقام التي يُنسّقها التطبيق (الأسعار والأرصدة) تصل نصًا، والمكوّن يُبقيها من اليسار إلى اليمين بوسم
<bdi dir="ltr">. - الخط العربي
label-14Semibold للاسم وbody-12للتفاصيل.