الخط الزمني Timeline

تدفّق أحداث عمودي. قائمة <ol> دلالية، حيث يطابق الترتيب الزمني ترتيب المستند.

الاستخدام الأساسي

الاستخدام الأساسي

1. 2026-09-01

   مراجعة اعتماد المشروع
2. 2026-09-15

   تسليم المرحلة الأولى
3. 2026-09-25

   جارٍ الاستلام والاختبار

<script setup lang="ts">
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">مراجعة اعتماد المشروع</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">تسليم المرحلة الأولى</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">جارٍ الاستلام والاختبار</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">مراجعة اعتماد المشروع</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">تسليم المرحلة الأولى</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">جارٍ الاستلام والاختبار</LhTimelineItem>
  </LhTimeline>
</template>

التناوب بين الجانبين

alternate

1. Q1

   التخطيط
2. Q2

   التطوير
3. Q3

   اختبار الضغط

يعرض hollow العقدة على شكل نقطة فارغة، ويُستخدم غالبًا للحالات غير المكتملة.

عقدة فارغة

1. Q1

   لم يبدأ
2. Q2

   قيد التنفيذ
3. Q3

   مكتمل

<script setup lang="ts">
</script>

<template>
  <!-- التناوب بين الجانبين -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">التخطيط</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">التطوير</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">اختبار الضغط</LhTimelineItem>
  </LhTimeline>
  <!-- عقدة فارغة -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>لم يبدأ</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">قيد التنفيذ</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">مكتمل</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <!-- التناوب بين الجانبين -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">التخطيط</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">التطوير</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">اختبار الضغط</LhTimelineItem>
  </LhTimeline>
  <!-- عقدة فارغة -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>لم يبدأ</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">قيد التنفيذ</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">مكتمل</LhTimelineItem>
  </LhTimeline>
</template>

API

LhTimeline Props

اسم الخاصية	الوصف	النوع	القيمة الافتراضية
mode	وضع التخطيط	"left" | "alternate"	'left'
sx	خصائص التخطيط السريع sx	LhSxProps	—

LhTimelineItem Props

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

الفتحات: default للمحتوى، وtimestamp للطابع الزمني، وdot لنقطة مخصصة.

إتاحة الوصول

• قائمة <ol> دلالية، يطابق الترتيب الزمني ترتيب المستند، ويُعلن قارئ الشاشة العناصر بالترتيب
• نقاط العقد زخرفية بحتة (aria-hidden="true")، وفتحة النقطة المخصصة لا تدخل شجرة إتاحة الوصول أيضًا

تعريفات الأنواع

بنية الأنواع التي يُصدِّرها هذا المكوّن بلغة TypeScript كالتالي (مستخرجة آليًا من packages/components/timeline/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhTimelineItemProps

/** props العنصر (مكوّن Item) */
export interface LhTimelineItemProps {
  timestamp?: string
  type?: 'primary' | 'success' | 'warning' | 'danger'
  hollow?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhTimelineProps

/** props الخط الزمني */
export interface LhTimelineProps {
  /** وضع التخطيط (alternate تناوب بين الجانبين) */
  mode?: LhTimelineMode
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhTimelineMode _{(من @lh-ui/share/core/timeline)}

/** وضع تخطيط الخط الزمني */
export type LhTimelineMode = 'left' | 'alternate'