خطوات Steps

توجيه المستخدم خلال تدفق خطواتي. اتجاهان أفقي وعمودي، وتنقّل قابل للنقر، وتجاوز الحالات.

خطوات

<template>
  <div class="demo-col" style="max-width: 680px; gap: 28px">
    <LhSteps :current="current">
      <LhStep title="الاقتناء" description="مسح عالي الدقة وإدراجه" />
      <LhStep title="معايرة الألوان" description="مقارنة مع القيم المرجعية" />
      <LhStep title="المراجعة" description="مراجعة الخبراء" />
      <LhStep title="النشر" description="إطلاق المعرض الرقمي" />
    </LhSteps>
    <div class="demo-row" style="gap: 12px">
      <LhButton size="small" :disabled="current === 0" @click="current--">السابق</LhButton>
      <LhButton size="small" type="primary" :disabled="current === 3" @click="current++">التالي</LhButton>
    </div>
    <LhSteps :current="2" direction="vertical">
      <LhStep title="الاقتناء" description="مكتملة" />
      <LhStep title="معايرة الألوان" description="مكتملة" />
      <LhStep title="المراجعة" description="قيد التنفيذ" />
      <LhStep title="النشر" description="بانتظار المعالجة" />
    </LhSteps>
    <LhSteps :current="1" status="error" :clickable="true" @click="onStepClick">
      <LhStep title="الخطوة الأولى" />
      <LhStep title="خطوة بها خطأ" icon="lh-icon-user" />
      <LhStep title="الخطوة الثالثة" />
    </LhSteps>
    <p class="demo-note">clickable يتيح التنقّل بالنقر؛ status="error" تتجاوز الحالة الكلية؛ icon لأيقونة مخصصة.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    current: 1,
  }),
  methods: {
    onStepClick(index) {
      this.current = index
    },
  },
}
</script>

Steps Props

خاصية	الوصف	النوع	الافتراضي
current	فهرس الخطوة الحالية (:current.sync, الحدث update:current, يبدأ من 0)	number	0
direction	الاتجاه	'horizontal' \| 'vertical'	'horizontal'
clickable	ما إذا كانت الخطوات قابلة للنقر للتنقّل	boolean	false
status	حالة تتجاوز حالات جميع الخطوات (للعرض المخصص)	'wait' \| 'process' \| 'finish' \| 'error'	—
sx	خاصية sx المختصرة للتخطيط	—	—

Step Props

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

Events

حدث	الوصف	معاملات الاستدعاء
click	النقر على عنصر الخطوة (ذو معنى فقط عند تفعيل clickable)	(الفهرس)