سجل النشاط
ما حدث في الحساب: دفعات وتعليقات وتغييرات حالة وملفات وتذكيرات، في بطاقة أو خط زمني.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add activity-feedويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/activity-feedالاعتماديات التي يضيفها
@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { ActivityFeed, ActivityItem } from "@/components/ui/activity-feed";<ActivityFeed heading="Activity"> <ActivityItem leading={<Avatar name="Lina Haddad" />} time="2 min ago"> <strong>Lina Haddad</strong> sent you <strong>JOD 25.000</strong> </ActivityItem></ActivityFeed>أمثلة
مرجع الخصائص
ActivityFeed
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "panel" | "timeline" | "panel" | خاصية Style. |
heading / description | ReactNode | لا يوجد | العنوان والنص الداعم. |
actions | ReactNode | لا يوجد | في نهاية الرأس، مثل زر قائمة. |
footer | ReactNode | لا يوجد | تحت العناصر: رابط «عرض كل النشاط». |
ActivityItem
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
leading | ReactNode | لا يوجد | صورة رمزية لشخص، أو ActivityIcon لحدث من النظام. |
children | ReactNode | لا يوجد | الجملة؛ ضع الأسماء والمبالغ في <strong>. |
time / dateTime | ReactNode / string | لا يوجد | الوقت المعروض وقيمته الآلية. |
detail | ReactNode | لا يوجد | ActivityComment أو ActivityFile أو زر. |
ActivityIcon
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
tone | "brand" | "warning" | "success" | "danger" | "neutral" | "brand" | لون الدائرة. |
ActivityGroup
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
label | ReactNode | لا يوجد | «اليوم»، «في وقت سابق هذا الأسبوع». |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| Tab | ينتقل بين الروابط والأزرار داخل العناصر. |
ARIA
- السجل قسم بعنوان، وعناصره قائمة؛ كل وقت عنصر
<time>. - رابط التنزيل مسمّى باسم الملف.
ملاحظات العربية والاتجاه
ينعكس
- الصورة أو الأيقونة في بداية السطر، وخط الخط الزمني على اليمين.
لا ينعكس
- أيقونات الملف والتنزيل والتقويم لا تنعكس.
- الأرقام
- المبالغ والأوقات كما يمرّرها التطبيق.
- الخط العربي
- الجملة
label-14، والأجزاء المهمة Semibold، والوقتlabel-12. - النص ثنائي الاتجاه
- أسماء الملفات معزولة، والتعليقات
dir="auto".