البناء · جديد

خطوات التقدم

تبيّن موقع المستخدم في مسار من عدة مراحل مثل فتح حساب: علامة صح على المنجز، ولون العلامة على الخطوة الحالية، والباقي رمادي.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/progress-steps

الاعتماديات التي يضيفها: @phosphor-icons/react

الاستخدام

import { ProgressStep, ProgressSteps } from "@/components/ui/progress-steps";

<ProgressSteps current={2} aria-label="Account opening">
  <ProgressStep href="/open/details">Personal details</ProgressStep>
  <ProgressStep>Verify ID</ProgressStep>
  <ProgressStep>Address</ProgressStep>
</ProgressSteps>

أمثلة

مختصر

نقاط على خط والتسميات فوقها، حتى ست خطوات.

بالأيقونات

أيقونة في كل دائرة؛ الخطوات المنجزة تعرض علامة الصح.

عمودي

للهاتف واللوحات الجانبية.

مرجع الخصائص

ProgressSteps

الخاصية	النوع	الافتراضي	الوصف
`current`	`number`		خاصية Current step: الخطوة الحالية تبدأ من 1، وما قبلها منجز.
`variant`	`"numbers" \| "minimal" \| "icons"`	`"numbers"`	مجموعات Figma الثلاث.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	خاصية Direction.
`numerals`	`"latn" \| "arab"`	`"latn"`	نظام أرقام الخطوات.
`aria-label`	`string`		اسم المسار لقارئ الشاشة («فتح الحساب»).

ProgressStep

الخاصية	النوع	الوصف
`children`	`ReactNode`	خاصية Label: ما يفعله المستخدم في الخطوة.
`icon`	`IconComponent`	أيقونة الدائرة في نمط الأيقونات.
`href`	`string`	رابط للعودة إلى خطوة منجزة وتعديلها.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	إلى روابط الخطوات المنجزة فقط؛ الخطوات الأخرى ليست تفاعلية.

ARIA

قائمة مرتبة ol باسم المسار، والخطوة الحالية aria-current="step".
كل خطوة تقول حالتها نصًا بلغة الصفحة: «الخطوة 2 من 4، الحالية»، لا باللون وحده.
لا تعلّم خطوة كمنجزة قبل حفظ بياناتها.

ملاحظات العربية والاتجاه

ينعكس

المسار يبدأ من اليمين، والخطوط تمتد نحو اليسار.
في العمودي تكون الدوائر على اليمين والتسميات على يسارها.

لا ينعكس

علامة الصح وأيقونات الخطوات.

الأرقام: أرقام الخطوات ونص الحالة بنظام الأرقام المختار (١ ٢ ٣ أو 1 2 3).
الخط العربي: ‏body-14 للتسميات وlabel-16 بوزن Medium للأرقام.
النص ثنائي الاتجاه: التسمية لا تنكسر في الأفقي؛ اجعلها قصيرة.

كل المكونات ›