علامات الدفع
علامات طرق الدفع المقبولة كما تقدّمها كل علامة: البطاقات والمحافظ والدفع لاحقًا والتحويل البنكي، وطرق المنطقة مثل مدى وكليك وSTC Pay وتابي وتمارا، والعملات الرقمية. لا تُلوَّن ولا تُقص ولا تُعكس.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add payment-markويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/payment-markأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { PaymentMark, PaymentMarks } from "@/components/ui/payment-mark";<PaymentMarks marks={["visa", "mastercard", "apple-pay", "mada", "cliq"]} label="Accepted payment methods" />أمثلة
الأحجام
sm بارتفاع 24 للملخصات والتذييل، md بارتفاع 32، lg بارتفاع 40 لخيارات الدفع.
إنجليزيمعكوسعربي
← RTL
كل العلامات
كل علامات Figma بترتيبها: البطاقات، ثم المحافظ، ثم الدفع لاحقًا، ثم التحويل البنكي، ثم طرق المنطقة، ثم العملات الرقمية. أسماؤها في paymentMarkNames.
إنجليزيمعكوسعربي
← RTL
مرجع الخصائص
PaymentMark
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
mark | PaymentMarkName | لا يوجد | خاصية Payment method باسمها في الشيفرة: visa وmastercard وamex وapple-pay وmada وcliq وstc-pay وtabby وtamara وmeeza وfawry وbenefit… والقائمة كاملة في paymentMarkNames. العلامة غير المعروفة لا تُرسم. |
size | "sm" | "md" | "lg" | "md" | خاصية Size: 24 و32 و40 بكسل. |
language | "en" | "ar" | "en" | لغة الصفحة للاسم الذي يقرؤه قارئ الشاشة: بالعربية تُسمّى العلامات التي تكتب اسمها بالعربية أيضًا («مدى»، «كليك»). |
PaymentMarks
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
marks | PaymentMarkName[] | لا يوجد | العلامات بالترتيب. |
label | string | لا يوجد | مطلوب. اسم القائمة بلغة الصفحة («طرق الدفع المقبولة»). |
size | "sm" | "md" | "lg" | "sm" | حجم كل علامة. |
language | "en" | "ar" | "en" | تُمرَّر إلى كل علامة. |
إمكانية الوصول
ARIA
- كل علامة صورة باسم العلامة كما تكتبه («Apple Pay») و
lang="en"، فيلفظها قارئ الشاشة العربي كما تلفظها العلامة. - مع
language="ar"تُسمّى العلامات التي تكتب اسمها بالعربية أيضًا بالعربية وlang="ar": مدى وكليك وتابي وتمارا وميزة وفوري وبنفت وكريم باي. البقية تبقى بأسمائها اللاتينية. - الصف قائمة باسمها، فيُسمع «طرق الدفع المقبولة، قائمة من 4».
تجنّب
- لا تستعمل العلامات إلا لتقول ما تقبله فعلًا: هي علامات تجارية لأصحابها.
ملاحظات العربية والاتجاه
ينعكس
- ترتيب العلامات في الصف يبدأ من اليمين.
لا ينعكس
- العلامة نفسها لا تنعكس ولا تُترجم، ومدى تبقى بخطها العربي والإنجليزي كما هي.
- الأرقام
- لا أرقام فيها.
- الخط العربي
- النص جزء من الصورة، فلا تغيّره خطوط Ritla UI.