مؤشر خطوات
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. |
إمكانية الوصول
يعرض ProgressIndicator الخطوات في قائمة مرتبة، وتحمل الخطوة الحالية aria-current="step". يصف المكون الحالتين المكتملة والقادمة بالنص أيضاً، حتى لا يعتمد المعنى على اللون أو الأيقونة وحدهما.
أبق عناوين الخطوات قصيرة وفريدة، ليسهل تمييزها عند قراءة القائمة.