قائمة الوصف
أزواج من التسميات والقيم للإيصالات ومراجعة التحويلات وتفاصيل الحساب.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add description-listويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/description-listالاعتماديات التي يضيفها
@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { DescriptionItem, DescriptionList } from "@/components/ui/description-list";<DescriptionList title="Transfer details"> <DescriptionItem label="To">Noor Al-Hassan</DescriptionItem></DescriptionList>مرجع الخصائص
DescriptionList
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "card" | "muted" | "plain" | "card" | خاصية Style. |
title | ReactNode | لا يوجد | خاصية Title. |
action | ReactNode | لا يوجد | خاصية Show action: رابط تعديل. |
DescriptionItem
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
label | ReactNode | لا يوجد | خاصية Label. |
children | ReactNode | لا يوجد | خاصية Value: نص أو مبلغ أو وسم. |
layout | "horizontal" | "stacked" | "horizontal" | خاصية Layout. |
icon | IconComponent | لا يوجد | خاصية Show icon. |
copyValue / copyLabels | string / { copy, copied } | لا يوجد | خاصية Show copy: زر نسخ مسمّى. |
divider | boolean | true | خاصية Show divider؛ آخر عنصر بلا فاصل. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| Tab | ينتقل إلى أزرار النسخ والروابط. |
ARIA
- القائمة
<dl>: التسمية<dt>والقيمة<dd>. - زر النسخ مسمّى ويقول «تم النسخ» بعد النسخ.
ملاحظات العربية والاتجاه
ينعكس
- التسمية في البداية والقيمة في النهاية.
لا ينعكس
- أرقام الحسابات والمراجع معزولة من اليسار إلى اليمين.
- الأرقام
- القيم كما يمرّرها التطبيق.
- الخط العربي
- التسمية
body-14والقيمةbody-14بوزن Medium. - النص ثنائي الاتجاه
- كل قيمة معزولة في
<bdi>تأخذ اتجاهها بنفسها، وتبقى الخانة باتجاه الصفحة: رقم الآيبان يُقرأ من اليسار إلى اليمين ويقع تحت تسميته.