محوّل العملات
حقلا عملة مع زر تبديل بينهما، والسعر ووقته، وبطاقة الرسوم تنتهي بالإجمالي، وملاحظة.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add fx-converterويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/fx-converterالاعتماديات التي يضيفها
@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
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 / receive | SwapField | لا يوجد | كل جهة: التسمية والمبلغ وonAmountChange (اتركه للقراءة فقط) والعملة وonCurrencyClick والتعليق. الحقل نفسه في بطاقة التحويل. |
onSwap | () => void | لا يوجد | يبدّل الجهتين. |
labels | { swap, changeCurrency } | لا يوجد | أسماء الأزرار بلغة الصفحة. |
rate | string | لا يوجد | سطر السعر، من اليسار إلى اليمين. |
rateTime | ReactNode | لا يوجد | متى أُخذ السعر. |
fees | { label, value }[] | لا يوجد | بطاقة الرسوم بالترتيب؛ السطر الأخير هو الإجمالي. بلا أسطر لا تظهر البطاقة. |
note | ReactNode | لا يوجد | السطر في الأسفل. |
إمكانية الوصول
ARIA
- كل مبلغ حقل له تسمية، والجهة المحوّلة للقراءة فقط. زر التبديل بين الحقلين في ترتيب التنقل أيضًا.
- السعر منطقة حيّة مهذبة: تغيّر المبلغ أو العملة يُعلَن مرة واحدة.
ملاحظات العربية والاتجاه
ينعكس
- المبلغ يمينًا وحبة العملة يسارًا، والتسميات تبدأ من اليمين.
لا ينعكس
- سهما التبديل يشيران إلى الأعلى والأسفل ولا ينعكسان.
- سطر السعر والمبالغ ورموز العملات تبقى من اليسار إلى اليمين.
- الأرقام
- يمكن كتابة المبالغ بالأرقام اللاتينية أو العربية الهندية، مع الفاصل العشري العربي «٫»؛ اقرأها بـ
parseAmountمن@/lib/money. - الخط العربي
heading-28Semibold للمبالغ وbody-16Semibold للسعر.