مخطط زمني

Timeline

مخطط زمني عمودي في React لسجل الطلبات وتتبع المعاملات وموجز النشاط، بعلامات حالة وأيقونات وصور رمزية. يستخدم دلالات القائمة المرتبة.

ركّب عناصر TimelineItem، لكل منها علامة ومحتوى. تؤثر الخاصية status في مظهر العلامة فقط، لذا ضع المعنى في النص.

متى تستخدمه

استخدم Timeline لعرض سجل الطلب: الإرسال، المراجعة، الاعتماد، والتسليم. استخدم status في العلامة لقراءة بصرية سريعة، وضع التاريخ والنتيجة في النص.

للخطوات القادمة في نموذج، استخدم ProgressIndicator.

أمثلة

سجل الطلبات

الحالات

علامات بأيقونات

موجز نشاط (مع صورة رمزية)

الخصائص

الخصائص التي يعرفها Timeline. سمات العنصر الأصلي تمر كما هي.

<Timeline>

الخاصيةالنوعالافتراضيالوصف
size"sm" | "md"
orientation"vertical" | "horizontal"

<TimelineMarker>

الخاصيةالنوعالافتراضيالوصف
status"default" | "error" | "success" | "warning" | "info"

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

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

ثبّت ترتيباً واحداً في المنتج كله: الأحدث أولاً أو الأقدم أولاً.