البناء · جديد

الخط الزمني

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

المعاينة

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

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/timeline

الاعتماديات التي يضيفها: @phosphor-icons/react

الاستخدام

import { Timeline, TimelineItem } from "@/components/ui/timeline";

<Timeline>
  <TimelineItem time="24 Sep, 10:42" title="Transfer submitted" description="Reference FT26270X482" />
  <TimelineItem status="current" time="In progress" title="Sent to beneficiary bank" />
  <TimelineItem status="upcoming" time="Expected by 11:45" title="Credited to account" />
</Timeline>

أمثلة

أفقي على الشاشات العريضة

‏layout="auto": عمودي على الجوال وأفقي من md. الأفقي لأربع خطوات أو أقل فقط، ويسير من اليمين إلى اليسار بالعربية.

نشاط الحساب

كل الأحداث منتهية، فكل العناصر مكتملة. سطر واحد لكل حدث، ورابط إلى السجل الكامل بدل النص الطويل.

مرجع الخصائص

Timeline

الخاصية	النوع	الافتراضي	الوصف
`layout`	`"vertical" \| "horizontal" \| "auto"`	`"vertical"`	خاصية Layout. ‏`auto` عمودي على الجوال وأفقي من `md`.
`children`	`TimelineItem[]`		العناصر، الأقدم أولًا.

TimelineItem

الخاصية	النوع	الافتراضي	الوصف
`status`	`"complete" \| "current" \| "upcoming"`	`"complete"`	خاصية Status.
`title`	`ReactNode`		خاصية Title: ما حدث، في سطر.
`time`	`ReactNode`		خاصية Show time: الوقت أو الحالة فوق العنوان.
`dateTime`	`string`		تاريخ ISO يجعل الوقت عنصر `<time>`.
`description`	`ReactNode`		خاصية Show description: سطر تفصيل أو رابط.
`connector`	`boolean`	`true`	خاصية Show connector. العنصر الأخير بلا خط دائمًا.
`statusLabel`	`string`		الحالة لقارئ الشاشة. افتراضيًا: مكتمل، قيد التنفيذ، قادم، بلغة الصفحة.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	إلى الروابط داخل العناصر فقط؛ الخط الزمني نفسه ليس عنصر تحكم.

ARIA

قائمة مرتبة (ol)، فيقول قارئ الشاشة عدد الخطوات وموضع كل واحدة.
المؤشرات مخفية عنه، والحالة تُقال بكلمة قبل العنوان. الخطوة الحالية aria-current="step".
الوقت مع dateTime عنصر <time> يُقرأ آليًا.

ملاحظات العربية والاتجاه

ينعكس

الخط والمؤشرات على اليمين في العمودي.
الأفقي يسير من اليمين إلى اليسار، والمسافة في نهاية المحتوى على اليسار.

لا ينعكس

علامة الصح لا تنعكس.
المراجع والأرقام والهواتف تبقى من اليسار إلى اليمين (<bdi dir="ltr">).

الأرقام: الأوقات والأرقام تتبع إعداد الأرقام: toNumerals للنصوص الثابتة وformatNumber للمبالغ.
الخط العربي: الوقت label-12، والعنوان label-14 Semibold، والتفصيل label-14.
النص ثنائي الاتجاه: كل سطر dir="auto"، فيبدأ السطر العربي بكلمة عربية كما تقول Figma، والمرجع اللاتيني لا يقلب الجملة.

كل المكونات ›