مبدّل العملة

تجريبي

احصل على Ritla UI

محافظ بعدة عملات، لكل منها علمها ورصيدها؛ المختارة مرفوعة.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

currency-switcher.tsx

import { CurrencySwitcher } from "@/components/ui/currency-switcher";<CurrencySwitcher aria-label="Wallet" wallets={[{ code: "JOD", country: "JO", balance: "2,450.750" }, { code: "USD", country: "US", balance: "3,455.12" }]} />

مرجع الخصائص

CurrencySwitcher

الخاصية	النوع	الافتراضي	الوصف
`wallets`	`{ code, country, balance? }[]`	لا يوجد	المحافظ: الرمز ودولة العلم (ISO) والرصيد.
`aria-label`	`string`	لا يوجد	يسمّي الاختيار.
`value / defaultValue / onValueChange`	`string`	لا يوجد	رمز العملة المختارة. افتراضيًا الأولى.

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

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

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

المفتاح	ما يفعله
`ArrowLeftArrowRight`	يختار المحفظة السابقة أو التالية (السهم الأيسر هو التالي في العربية).

ARIA

مجموعة اختيار واحد، ورمز العملة اسم كل خيار.

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

ينعكس

تبدأ المحافظ من اليمين.

لا ينعكس

الأعلام والأرصدة.

الأرقام: الأرقام التي يُنسّقها التطبيق (الأسعار والأرصدة) تصل نصًا، والمكوّن يُبقيها من اليسار إلى اليمين بوسم <bdi dir="ltr">.
الخط العربي: label-12 Medium للرمز وnumeric-12 للرصيد.