الخط الزمني Timeline

عرض تسلسل الأحداث زمنيًا. في الوضع alternate تتناوب العناصر على الجانبين، وتدعم العناصر الأنواع والعُقد المجوّفة.

خط زمني

<template>
  <div class="demo-col">
    <p class="demo-note">mode="left" (الافتراضي)</p>
    <LhTimeline>
      <LhTimelineItem timestamp="2026-09-01" type="primary">بدء رقمنة «مجموعة لوحات سونغ الكاملة»</LhTimelineItem>
      <LhTimelineItem timestamp="2026-09-10" type="success">اكتمل اقتناء 120 لوحة عالية الدقة</LhTimelineItem>
      <LhTimelineItem timestamp="2026-09-20" type="warning" hollow>رصد 3 انحرافات في مراجعة الألوان</LhTimelineItem>
      <LhTimelineItem timestamp="2026-10-01" type="danger">اكتملت المراجعة وإعادة النشر</LhTimelineItem>
    </LhTimeline>
    <p class="demo-note">mode="alternate" (تناوب على الجانبين)</p>
    <LhTimeline mode="alternate">
      <LhTimelineItem timestamp="سلالة سونغ الشمالية" type="primary">فان كوان، «المسافرون بين الجبال والوديان»</LhTimelineItem>
      <LhTimelineItem timestamp="سلالة سونغ الشمالية" hollow>غوو شي، «الربيع المبكر»</LhTimelineItem>
      <LhTimelineItem timestamp="سلالة يوان" type="success">هوانغ غونغوانغ، «الإقامة في جبال فوتشون»</LhTimelineItem>
    </LhTimeline>
  </div>
</template>

Timeline Props

خاصية	الوصف	النوع	الافتراضي
mode	وضع التخطيط (alternate: تناوب على الجانبين)	'left' \| 'alternate'	'left'
sx	خاصية sx المختصرة للتخطيط	—	—

TimelineItem Props

خاصية	الوصف	النوع	الافتراضي
timestamp	الطابع الزمني	string	—
type	نوع العُقدة	'primary' \| 'success' \| 'warning' \| 'danger'	—
hollow	عُقدة مجوّفة	boolean	false
sx	خاصية sx المختصرة للتخطيط	—	—

Slots

فتحة TimelineItem الافتراضية: محتوى العنصر.