English افحص مجانًا

البناء · جديد

القائمة

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

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/list

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

الاستخدام

import { List, ListItem } from "@/components/ui/list";

<List aria-label="Team">
  <ListItem leading={<Avatar name="Omar Haddad" size="sm" decorative />} supportingText="Product designer">
    Omar Haddad
  </ListItem>
</List>

أمثلة

أيقونة وسطر علوي

‏leadingIcon يضع الأيقونة في دائرة 40 بكسل. الصفوف هنا أزرار (onClick)، فتظهر خلفية المرور عليها.

صف قابل للسحب

اسحب نحو النهاية للأرشفة، ونحو البداية للتأجيل أو الحذف. البداية والنهاية تتبعان اتجاه القراءة. وزر ⋮ يعرض الإجراءات نفسها للوحة المفاتيح وقارئ الشاشة والفأرة.

روابط وصف ثابت

‏href أو render={<Link />} يجعل الصف رابطًا. والصف بلا رابط ولا onClick ثابت، بلا خلفية عند المرور.

مرجع الخصائص

List

الخاصية	النوع	الافتراضي	الوصف
`aria-label`	`string`		اسم القائمة إن كان في الصفحة أكثر من قائمة.
`children`	`ReactNode`		عناصر `ListItem` أو `SwipeableListItem`.

ListItem

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Headline.
`overline`	`ReactNode`		خاصية Overline: سطر قصير فوق العنوان.
`supportingText`	`ReactNode`		خاصية Supporting text تحت العنوان.
`leading`	`ReactNode`		عنصر البداية: صورة رمزية أو علم أو صورة.
`leadingIcon`	`IconComponent`		أيقونة في دائرة 40 بكسل (النوع Icon).
`trailing`	`ReactNode`		خاصية Show Tags: وسم أو أي عنصر في النهاية.
`href`	`string`		يجعل الصف رابطًا.
`render`	`ReactElement`		رابط التوجيه (`<Link>`) بمظهر الصف.
`onClick`	`MouseEventHandler`		يجعل الصف زرًا.

SwipeableListItem

الخاصية	النوع	الافتراضي	الوصف
`leadingActions`	`SwipeAction[]`		إجراءات تظهر في البداية عند السحب نحو النهاية (Swipe = Leading).
`trailingActions`	`SwipeAction[]`		إجراءات تظهر في النهاية عند السحب نحو البداية (Swipe = Trailing).
`SwipeAction`	`{ label, icon, color?: "brand" \| "warning" \| "danger", onAction }`		إجراء واحد بعرض 88 بكسل.
`menu`	`boolean`	`true`	زر ⋮ بالإجراءات نفسها، كي لا يكون السحب الطريق الوحيد.
`menuLabel`	`string`	`"More actions"`	اسم زر ⋮، بلغة الصفحة افتراضيًا.
`…`	`ListItem props`		كل خصائص `ListItem`.

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

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

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

المفتاح	ما يفعله
`Tab`	إلى الصفوف التفاعلية وزر ⋮ في كل صف قابل للسحب.
`Enter`	يفتح الرابط أو يضغط الصف أو يفتح قائمة الإجراءات.

ARIA

القائمة ul وكل صف li، فيعلن قارئ الشاشة عدد العناصر.
الصورة الرمزية بجانب الاسم زخرفية (decorative)، كي لا يُقرأ الاسم مرتين.
السحب ليس الطريق الوحيد: زر ⋮ يعرض الإجراءات نفسها. وبدونه (menu={false}) تصبح أزرار الإجراءات قابلة للتركيز ويفتح الصف عند التركيز عليها.
الصف المفتوح يُغلق عند اللمس أو التركيز خارجه.

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

ينعكس

الصورة الرمزية أو الأيقونة على اليمين، والوسم وزر ⋮ على اليسار.
السحب يتبع اتجاه القراءة: في العربية السحب لليسار يكشف إجراءات البداية (على اليمين)، والسحب لليمين يكشف إجراءات النهاية.

لا ينعكس

أيقونات الإجراءات (أرشفة، ساعة، سلة) والصور الرمزية.

الأرقام: الأرقام في النصوص كما تمرّرها؛ نسّقها بـ formatNumber.
الخط العربي: العنوان body-16 Medium، والنص المساعد body-12، والسطر العلوي label-12. الصف 70 بكسل على الأقل، فالنصوص العربية الأطول تكبّره بدل أن تُقص.
النص ثنائي الاتجاه: أسماء بلغة أخرى داخل النص العربي تُعزل بـ <bdi>.

كل المكونات ›