قائمة
Listمكون قائمة في React للقوائم النقطية، المرقمة، والأيقونية، مع إيقاع متسق، تداخل، درجات، وترقيم أبجدي عربي في الاتجاه من اليمين إلى اليسار.
يعرض List قوائم نقطية أو مرقمة أو بأيقونات، ويستخدم العنصر المناسب <ul>/<ol>. يدعم ListItem مستوى ثانياً من التداخل، وأيقونة لكل عنصر.
متى تستخدمه
استخدم List للخطوات، المتطلبات، والتعدادات القصيرة في صفحات الإرشاد والنماذج. اختر النمط المرتب حين يهم التسلسل، مثل خطوات التقديم. استخدم الأيقونات لتمييز العناصر المكتملة أو المعطلة.
للصفوف التفاعلية، استخدم StructuredList.
أمثلة
الخصائص
الخصائص التي يعرفها List. سمات العنصر الأصلي تمر كما هي.
<List>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "ordered" | "unordered" | "with-icon" | ||
tone | "primary" | "neutral" | "on-color" |
<ListItem>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
level | 1 | 2 | Nesting depth: 2 indents 24px and shifts the marker (ordered → letters, unordered → bullet). | |
icon | react.ReactNode | with-icon lists only - overrides the default check-circle for this item. |
إمكانية الوصول
يعرض List عنصر <ul> أو <ol> الأصلي، مما يتيح للتقنيات المساعدة إعلان عدد العناصر ومواضعها. الأيقونات aria-hidden، ويحمل نص العنصر المعنى.
تحافظ القوائم المتداخلة على بنية صحيحة ليبلغ قارئ الشاشة المستويات بدقة. في العربية، ترقم القوائم المرتبة عناصرها بالحروف الأبجدية.