التنقّلجديد
مؤشّر خطوات
ProgressIndicatorمؤشّر خطوات في React للتدفّقات متعدّدة الخطوات بحالات مكتملة وحالية وقادمة، وتخطيطين أفقي وعمودي، ومظهر نقطي. يعلّم الخطوة الحالية لقارئ الشاشة.
يحدد كل Step حالته state: مكتملة أو حالية أو قادمة. بدل التخطيط بـ orientation وشكل العلامة بـ appearance.
متى تستخدمه
استخدم ProgressIndicator للتدفّقات ذات عدد خطوات ثابت، مثل طلب رخصة ببيانات شخصية ومستندات ومراجعة ودفع. اعرضه في كل خطوة ليعرف المستخدم موضعه وما تبقّى.
استخدم التخطيط العمودي حين يكون للخطوات أوصاف. للنسبة المئوية، استخدم Progress.
أمثلة
الخصائص
الخصائص التي يعرّفها ProgressIndicator. سمات العنصر الأصلي تمرّ كما هي.
<ProgressIndicator>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
orientation | "vertical" | "horizontal" | ||
appearance | "dot" | "circles" |
<Step>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
state | "current" | "completed" | "upcoming" |
<StepIndicator>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
step | string | number | The 1-based step number to render. Shown for current and upcoming
steps, and for completed steps in the dot appearance. Ignored for a
completed step in the circles appearance - it shows a check instead. |
إمكانية الوصول
تُعرض الخطوات قائمة مرتّبة، وتحمل الخطوة الحالية aria-current="step". توصف الحالتان المكتملة والقادمة نصًّا لا باللون أو الأيقونة فقط.
أبقِ عناوين الخطوات قصيرة وفريدة لتُقرأ جيّدًا في القائمة.