تخطّي إلى المحتوى الرئيسي

خطوات Steps

يوجّه المستخدم لإكمال المهمة وفق تسلسل، ويدعم الاتجاهين الأفقي / العمودي، والتنقل بالنقر، وتغطية الحالة بشكل عام.

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

الاستخدام الأساسي
  1. المسودة
    تحديد التكوين والخطوط
  2. التدرّج
    تدراج الحبر على طبقات
  3. التلوين
    إضافة ألوان الدانتشينغ
  4. التوقيع
    التوقيع والختم لإكمال اللوحة
  1. المسودة
  2. التدرّج
  3. التلوين
    يحتاج هذا الجزء إلى إعادة العمل
  4. التوقيع
  1. المسودة
    تحديد التكوين والخطوط
  2. التدرّج
    تدراج الحبر على طبقات
  3. التلوين
  4. التوقيع
import { useState } from 'react'
import { LhSteps, LhStep } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhSteps current={current} onChange={(index) => setCurrent(index)}>
      <LhStep title="رسم المخطط" description="تحديد التكوين والخطوط" />
      <LhStep title="تدرّج الحبر" description="تدرية الحبر على طبقات" />
      <LhStep title="إضافة الألوان" description="إضافة ألوان دانتشينغ" />
      <LhStep title="التوقيع والختم" description="التوقيع وختم اللوحة" />
    </LhSteps>
  )
}

Steps Props​

الخاصيةالوصفالنوعالقيم المتاحةالافتراضي
currentفهرس الخطوة الحالية (يبدأ من 0، متحكَّم به)number——
defaultCurrentالقيمة الافتراضية للخطوة الحالية (غير متحكَّم بها)number—0
directionالاتجاه'horizontal' | 'vertical'—'horizontal'
clickableإمكانية النقر على الخطوات للتنقلboolean—false
statusحالة تُغطِّي جميع الخطوات (للعرض المخصَّص)'wait' | 'process' | 'finish' | 'error'——
themeVarsمتغيّرات سمة خاصة بالمكوّن (تُضاف تلقائيًا بادئة --lh- للمفاتيح)Record<string, string>——
sxخصائص تخطيط سريعةSxProps——

Step Props​

الخاصيةالوصفالنوعالافتراضي
titleعنوان الخطوةReactNode—
descriptionوصف الخطوةReactNode—
iconاسم أيقونة مخصّصة (عند عدم التمرير تستخدم حالتا finish / error علامة صح أو خطأ، وغيرهما يعرض الرقم التسلسلي)LhIconName—

Steps أحداث​

الحدثالوصفمعامل الاستدعاءالمقابل في Vue
onChangeيُطلَق عند تغيُّر الخطوة الحالية (فقط عند تفعيل clickable)(index: number) => void@change
متحكَّم / غير متحكَّم

تمرير current يجعله متحكَّمًا به (لا يحتفظ المكوّن بحالة داخلية)؛ وتمرير defaultCurrent يجعله غير متحكَّم به بحالة داخلية. وكلا الوضعين يُطلِق onChange.

نطاق النقر

حتى عند تفعيل clickable، فقط الخطوات «المكتملة» و«قيد التنفيذ» تُعرَض كـ <button>؛ أما الخطوات المستقبلية (حالة wait) فتبقى <span> دائمًا، لمنع القفز إلى مراحل لم تُتحقَّق — وذلك يتوافق مع سلوك lh-ui-plus.

قيود العناصر الفرعية

يجب أن يكون children مباشرةً LhStep (يمكن العرض عبر .map)، ولا يمكن لفّه بمكوّن مخصَّص — إذ يعتمد المكوّن الأب على Children.toArray لتصفية أنواع العناصر الفرعية وحقن الفهارس، واللفّ يؤدي إلى فشل حقن الفهرس واضطراب حساب الحالات.

متغيّرات السمة​

تُضاف تلقائيًا بادئة --lh- لمفاتيح themeVars وتُكتب في النمط المضمَّن للعنصر الجذري:

<LhSteps current={1} themeVars={{ 'steps-item-basis': '72px' }}>
  <LhStep title="رسم المخطط" />
  <LhStep title="تدرّج الحبر" />
</LhSteps>

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

القائمة هي <ol role="list">؛ والخطوة الحالية تُخرِج aria-current="step"، وتُعبَّر حالة كل خطوة عبر aria-label (قالب اللغة steps.step، مثل «الخطوة 2») إضافةً إلى أصناف الحالة.

المرجع​

forwardRef<HTMLOListElement> —— العنصر الجذري <ol>. ويُمرِّر LhStep HTMLLIElement.

الأنماط​

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/steps'