انتقل إلى المحتوى

محوّل العملات

تجريبي
احصل على Ritla UI

حقلا عملة مع زر تبديل بينهما، والسعر ووقته، وبطاقة الرسوم تنتهي بالإجمالي، وملاحظة.

المعاينة

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

المعاينةالكود
إنجليزيمعكوسعربي
← RTL

التثبيت

  1. أضف المكوّن

    npx ritla add fx-converter

    ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/fx-converter

  2. الاعتماديات التي يضيفها

    @phosphor-icons/react

  3. أو انسخه يدويًا

    التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

fx-converter.tsx
import { FxConverter } from "@/components/ui/fx-converter";<FxConverter  send={{ label: "You send", amount, onAmountChange: setAmount, currency: { code: "SAR", country: "SA" } }}  receive={{ label: "Recipient gets", amount: converted, currency: { code: "USD", country: "US" } }}  onSwap={swap}  labels={{ swap: "Swap currencies", changeCurrency: "Change currency" }}  rate="1 SAR = 0.2663 USD"  rateTime="Mid-market rate at 07:17 UTC"  fees={[{ label: "Our fee", value: "SAR 5.00" }, { label: "Total to pay", value: "SAR 1,005.00" }]}/>

مرجع الخصائص

FxConverter

الخاصيةالنوعالافتراضيالوصف
send / receiveSwapFieldلا يوجدكل جهة: التسمية والمبلغ وonAmountChange (اتركه للقراءة فقط) والعملة وonCurrencyClick والتعليق. الحقل نفسه في بطاقة التحويل.
onSwap() => voidلا يوجديبدّل الجهتين.
labels{ swap, changeCurrency }لا يوجدأسماء الأزرار بلغة الصفحة.
ratestringلا يوجدسطر السعر، من اليسار إلى اليمين.
rateTimeReactNodeلا يوجدمتى أُخذ السعر.
fees{ label, value }[]لا يوجدبطاقة الرسوم بالترتيب؛ السطر الأخير هو الإجمالي. بلا أسطر لا تظهر البطاقة.
noteReactNodeلا يوجدالسطر في الأسفل.

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

ARIA

  • كل مبلغ حقل له تسمية، والجهة المحوّلة للقراءة فقط. زر التبديل بين الحقلين في ترتيب التنقل أيضًا.
  • السعر منطقة حيّة مهذبة: تغيّر المبلغ أو العملة يُعلَن مرة واحدة.

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

ينعكس

  • المبلغ يمينًا وحبة العملة يسارًا، والتسميات تبدأ من اليمين.

لا ينعكس

  • سهما التبديل يشيران إلى الأعلى والأسفل ولا ينعكسان.
  • سطر السعر والمبالغ ورموز العملات تبقى من اليسار إلى اليمين.
الأرقام
يمكن كتابة المبالغ بالأرقام اللاتينية أو العربية الهندية، مع الفاصل العشري العربي «٫»؛ اقرأها بـ parseAmount من @/lib/money.
الخط العربي
heading-28 Semibold للمبالغ وbody-16 Semibold للسعر.