صف المعاملة

احصل على Ritla UI

معاملة واحدة: الأيقونة والتاجر والفئة والمبلغ والوقت، والواردة بالأخضر.

افتح في Figma

المعاينة

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

التثبيت

أضف المكوّن
$ npx ritla add transaction-row
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/transaction-row
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

transaction-row.tsx

import { TransactionList, TransactionRow } from "@/components/ui/transaction-row";<TransactionList aria-label="Recent transactions">  <TransactionRow icon={ShoppingBagIcon} title="Carrefour" subtitle="Groceries" amount="−JOD 86.400" time="09:41" /></TransactionList>

مرجع الخصائص

TransactionRow

الخاصية	النوع	الافتراضي	الوصف
`icon`	`IconComponent`	لا يوجد	خاصية Icon.
`title / subtitle`	`ReactNode`	لا يوجد	خاصيتا Title وSubtitle.
`amount`	`ReactNode`	لا يوجد	المبلغ مع إشارته، معزولًا من اليسار إلى اليمين.
`time / dateTime`	`ReactNode / string`	لا يوجد	خاصية Time.
`type`	`"outgoing" \| "incoming"`	`"outgoing"`	خاصية Type.
`href`	`string`	لا يوجد	يجعل الصف رابطًا.

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

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

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

المفتاح	ما يفعله
`Tab`	ينتقل بين الصفوف حين تكون روابط.

ARIA

القائمة <ul> مسمّاة، والصف رابط يغطي الصف كله.
لا يعتمد الوارد على اللون: الإشارة + جزء من المبلغ.

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

ينعكس

الأيقونة في البداية والمبلغ في النهاية.

لا ينعكس

المبلغ وإشارته معزولان، فتبقى الإشارة بجانب الرقم.

الأرقام: المبالغ كما يمرّرها التطبيق.
الخط العربي: العنوان label-14 Medium والمبلغ numeric-14 Medium.
النص ثنائي الاتجاه: أسماء التجار معزولة، فيبقى الاسم اللاتيني في مكانه داخل الصف العربي.