مخطط زمني
Timelineمخطط زمني عمودي في React لسجل الطلبات وتتبع المعاملات وموجز النشاط، بعلامات حالة وأيقونات وصور رمزية. يستخدم دلالات القائمة المرتبة.
ركّب عناصر TimelineItem، لكل منها علامة ومحتوى. تؤثر الخاصية status في مظهر العلامة فقط، لذا ضع المعنى في النص.
متى تستخدمه
استخدم Timeline لعرض سجل الطلب: الإرسال، المراجعة، الاعتماد، والتسليم. استخدم status في العلامة لقراءة بصرية سريعة، وضع التاريخ والنتيجة في النص.
للخطوات القادمة في نموذج، استخدم ProgressIndicator.
أمثلة
الخصائص
الخصائص التي يعرفها Timeline. سمات العنصر الأصلي تمر كما هي.
<Timeline>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | ||
orientation | "vertical" | "horizontal" |
<TimelineMarker>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
status | "default" | "error" | "success" | "warning" | "info" |
إمكانية الوصول
يعرض Timeline قائمة مرتبة، لذا يعلن قارئ الشاشة عدد الأحداث وترتيبها. يجب أن يذكر نص كل عنصر ما حدث ومتى، لأن حالة العلامة والأيقونات زخرفية.
ثبّت ترتيباً واحداً في المنتج كله: الأحدث أولاً أو الأقدم أولاً.