متى تستخدمه

استخدم List للخطوات والمتطلّبات والتعدادات القصيرة في صفحات الإرشاد والنماذج. اختر النمط المرتّب حين يهمّ التسلسل، مثل خطوات التقديم. استخدم الأيقونات لتمييز العناصر المكتملة أو المعطّلة.

للصفوف التفاعلية، استخدم StructuredList.

أمثلة

الأنماط

الرياض
جدة
مكة المكرمة

مراجعة بياناتك
التأكيد والدفع
طباعة الإيصال

سريع وموثوق
آمن افتراضيًّا
متاح على مدار الساعة

مستويات التداخل والدرجة

مراجعة بياناتك
التحقق من المجموع
تأكيد العنوان
التأكيد والدفع

مع أيقونة مخصّصة

سريع وموثوق
آمن افتراضيًّا
متاح على مدار الساعة

العربية (RTL)

مراجعة بياناتك
التحقق من المجموع
تأكيد العنوان
التأكيد والدفع

الخصائص

الخصائص التي يعرّفها 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، ونص العنصر يحمل المعنى.

تحافظ القوائم المتداخلة على بنية صحيحة ليبلّغ قارئ الشاشة المستويات بدقّة. في العربية تُرقّم القوائم المرتّبة بالحروف الأبجدية.