خطوات Steps

مؤشر خطوات العملية: أربع حالات (حالي/مكتمل/منتظِر/خطأ)، اتجاهان أفقي وعمودي، مع إمكانية التنقّل بالنقر. يُلتف الشريط الأفقي تلقائيًا وفق أساس عرض ثابت، ويبقى العنوان في سطر واحد دائمًا.

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

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

1. ✓
   طحن الحبر
2. 2
   إمساك الفرشاة
3. 3
   ختم الخاتم

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

<template>
  <LhSteps :current="1">
    <LhStep title="طحن الحبر" />
    <LhStep title="إمساك الفرشاة" />
    <LhStep title="ختم الخاتم" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="طحن الحبر" />
    <LhStep title="إمساك الفرشاة" />
    <LhStep title="ختم الخاتم" />
  </LhSteps>
</template>

مع وصف

مع وصف

1. ✓
   التسجيل

   تعبئة المعلومات الأساسية
2. 2
   التحقق

   التحقق من البريد الإلكتروني والهاتف
3. 3
   التفعيل

   تفعيل صلاحيات الحساب

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

<template>
  <LhSteps :current="1">
    <LhStep title="التسجيل" description="تعبئة المعلومات الأساسية" />
    <LhStep title="التحقق" description="التحقق من البريد الإلكتروني والهاتف" />
    <LhStep title="التفعيل" description="تفعيل صلاحيات الحساب" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="التسجيل" description="تعبئة المعلومات الأساسية" />
    <LhStep title="التحقق" description="التحقق من البريد الإلكتروني والهاتف" />
    <LhStep title="التفعيل" description="تفعيل صلاحيات الحساب" />
  </LhSteps>
</template>

يحدد icon أيقونة مخصصة للخطوة (بأخذ اسم أيقونة LhIcon المدمجة، مثل user/check/star)، وعند عدم التمرير تُستخدم علامة الصح أو الخطأ للحالتين finish/error، ويرقم الباقي. ولمراد عرض أيقونة مخصصة بالكامل، يمكن استخدام الفتحة #icon للتجاوز.

أيقونة مخصصة

1. التسجيل
2. التحقق
3. التفعيل

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

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="التسجيل" />
    <LhStep icon="check" title="التحقق" />
    <LhStep icon="star" title="التفعيل" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="التسجيل" />
    <LhStep icon="check" title="التحقق" />
    <LhStep icon="star" title="التفعيل" />
  </LhSteps>
</template>

حالة الخطأ

حالة الخطأ

1. ✕
   الرفع
2. ✕
   التحقق
3. ✕
   الإكمال

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

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="الرفع" />
    <LhStep title="التحقق" />
    <LhStep title="الإكمال" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="الرفع" />
    <LhStep title="التحقق" />
    <LhStep title="الإكمال" />
  </LhSteps>
</template>

status تجاوز شامل: عند ضبطه تصبح جميع الخطوات بتلك الحالة، وهو مناسب للعرض المخصص.

تنقّل بالنقر

تنقّل بالنقر

1. اختيار المسودة

   انتقاء النسخة الأصلية
2. النسخ

   نسخ مقابل أو نسخ من الذاكرة
3. 3
   التأطير

   التأطير على الحائط

الخطوة الحالية: 1

<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="اختيار المسودة" description="انتقاء النسخة الأصلية" />
    <LhStep title="النسخ" description="نسخ مقابل أو نسخ من الذاكرة" />
    <LhStep title="التأطير" description="التأطير على الحائط" />
  </LhSteps>
</template>

<script>
export default {
  data() {
    return { current: 1 }
  },
}
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="اختيار المسودة" description="انتقاء النسخة الأصلية" />
    <LhStep title="النسخ" description="نسخ مقابل أو نسخ من الذاكرة" />
    <LhStep title="التأطير" description="التأطير على الحائط" />
  </LhSteps>
</template>

الاتجاه العمودي

الاتجاه العمودي

1. ✓
   البداية

   انطلاقة تخبئ الريشة
2. 2
   السير

   سير الفرشاة بالقلم الأوسط
3. 3
   النهاية

   إنهاء بإعادة ريشة الفرشاة

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

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="البداية" description="انطلاقة تخبئ الريشة" />
    <LhStep title="السير" description="سير الفرشاة بالقلم الأوسط" />
    <LhStep title="النهاية" description="إنهاء بإعادة ريشة الفرشاة" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="البداية" description="انطلاقة تخبئ الريشة" />
    <LhStep title="السير" description="سير الفرشاة بالقلم الأوسط" />
    <LhStep title="النهاية" description="إنهاء بإعادة ريشة الفرشاة" />
  </LhSteps>
</template>

التفاف بعرض ثابت

يُرتّب شريط الخطوات الأفقي وفق عرض أساسي --lh-steps-item-basis (الافتراضي 160px): عندما تتسع الحاوية تتوزع الخطوات بالتساوي في سطر واحد، وعندما لا تتسع ينتقل العنصر بأكمله إلى السطر التالي بدلًا من دفع العنوان للالتفاف. ويبقى العنوان دائمًا في سطر واحد، ويُقطع بعلامة الحذف عند الطول الزائد؛ وبعد الالتفاف تُخفى خطوط الاتصال في نهاية السطر تلقائيًا، فلا تشير إلى فراغ في الذيل.

التفاف بعرض ثابت

1. ✓
   اختيار المسودة

   انتقاء النسخة الأصلية
2. 2
   النسخ

   نسخ مقابل أو نسخ من الذاكرة
3. 3
   الإهداء

   كتابة الإهداء وختمه
4. 4
   التأطير

   التأطير على الحائط

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

<template>
  <LhSteps :current="1">
    <LhStep title="اختيار المسودة" description="انتقاء النسخة الأصلية" />
    <LhStep title="النسخ" description="نسخ مقابل أو نسخ من الذاكرة" />
    <LhStep title="الإهداء" description="كتابة الإهداء وختمه" />
    <LhStep title="التأطير" description="التأطير على الحائط" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="اختيار المسودة" description="انتقاء النسخة الأصلية" />
    <LhStep title="النسخ" description="نسخ مقابل أو نسخ من الذاكرة" />
    <LhStep title="الإهداء" description="كتابة الإهداء وختمه" />
    <LhStep title="التأطير" description="التأطير على الحائط" />
  </LhSteps>
</template>

حاوية المثال أعلاه محدودة العرض 280px لعرض الالتفاف. ولتغيير إيقاع الالتفاف، غطِّ steps-item-basis عبر themeVars (تُضاف تلقائيًا بادئة --lh- إلى المفتاح): <LhSteps :theme-vars="{ 'steps-item-basis': '220px' }">، ويمكن أيضًا ضبطه عامًا عبر componentTheme.steps في LhConfigProvider.

Steps API

LhSteps Props

اسم الخاصية	الوصف	النوع	الافتراضي
current	فهرس الخطوة الحالية (v-model:current، يبدأ من 0)	number	0
direction	الاتجاه	"horizontal" | "vertical"	'horizontal'
clickable	الخطوات قابلة للنقر للتنقّل	boolean	false
status	حالة تتجاوز كل الخطوات (للعرض المخصص)	"wait" | "process" | "finish" | "error"	—
themeVars	متغيّرات السمة على مستوى المكوّن (تُضاف تلقائيًا بادئة --lh- إلى المفاتيح)	{ [x: string]: string; }	—
sx	خصائص التخطيط السريع sx	LhSxProps	—

LhSteps Events

اسم الحدث	الوصف	وسائط الاستدعاء
update:current	تتغير الخطوة الحالية (v-model)	(index: number)
change	تتغير الخطوة الحالية	(index: number)

LhStep Props

اسم الخاصية	الوصف	النوع	الافتراضي
title	عنوان الخطوة (يمكن أيضًا استخدام فتحة title)	string	''
description	وصف الخطوة (يمكن أيضًا استخدام فتحة description)	string	''
icon	اسم أيقونة مخصصة (أيقونات LhIcon المدمجة؛ عند عدم التمرير تُستخدم علامة الصح/الخطأ لـ finish/error، ويرقم الباقي)	LhIconName	—

Slots

اسم الفتحة	الوصف	المكوّن المعني
default	عناصر الخطوات (قائمة LhStep)	LhSteps
title	عنوان مخصص	LhStep
description	وصف مخصص	LhStep
icon	أيقونة مخصصة (تتجاوز العرض الافتراضي لـ icon prop)	LhStep

متغيّرات على مستوى المكوّن

تُعرَّف القيم الافتراضية لمتغيّرات CSS التالية على .lh-steps، ويمكن تجاوزها عامًا أو على مستوى المكوّن عبر themeVars (تُضاف تلقائيًا بادئة --lh- إلى المفاتيح):

اسم المتغيّر	الوصف	الافتراضي
--lh-steps-item-basis	عرض الأساس الثابت لعنصر الخطوة الأفقي، يُلتف وفق هذا العرض عندما لا تتسع الحاوية	160px

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

• الحاوية <ol role="list">، والترتيب الدلالي هو ترتيب العملية
• الخطوة الحالية تضبط aria-current="step" تلقائيًا
• عند clickable يكون رأس الخطوة المكتملة/الحالية زر <button> حقيقيًا، ويُؤخذ aria-label من حزمة اللغة (steps.finish / steps.error / steps.step)؛ والخطوات المنتظِرة غير قابلة للنقر، تفاديًا لإرشاد المستخدم لتخطّي مراحل لم يصلها بعد
• خطوط الاتصال مرسومة بعناصر زائفة، فلا تدخل شجرة إمكانية الوصول بطبيعتها

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

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

LhStepsProps

export interface LhStepsProps {
  /** فهرس الخطوة الحالية (v-model:current، يبدأ من 0) */
  current?: number
  /** الاتجاه */
  direction?: LhStepsDirection
  /** الخطوات قابلة للنقر للتنقّل */
  clickable?: boolean
  /** حالة تتجاوز كل الخطوات (للعرض المخصص) */
  status?: LhStepStatus
  /** متغيّرات السمة على مستوى المكوّن (تُضاف تلقائيًا بادئة --lh-، مثل `steps-item-basis`) */
  themeVars?: Record<string, string>
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhStepProps

export interface LhStepProps {
  /** عنوان الخطوة (يمكن أيضًا استخدام فتحة title) */
  title?: string
  /** وصف الخطوة (يمكن أيضًا استخدام فتحة description) */
  description?: string
  /** اسم أيقونة مخصصة (عند عدم التمرير تُستخدم علامة الصح/الخطأ لـ finish/error، ويرقم الباقي) */
  icon?: LhIconName
}

LhIconName _{(مأخوذ من @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

LhStepsDirection _{(مأخوذ من @lh-ui/share/core/steps)}

/**
 * اتجاه شريط الخطوات
 */
export type LhStepsDirection = 'horizontal' | 'vertical'

LhStepStatus _{(مأخوذ من @lh-ui/share/core/steps)}

/**
 * حالة الخطوة
 */
export type LhStepStatus = 'wait' | 'process' | 'finish' | 'error'