بطاقة الرصيد

تجريبي

احصل على Ritla UI

رصيد الصفحة الرئيسية: مبلغ بحجم 56 بخانات عشرية باهتة، وتغيّر الشهر، وزر إخفاء، ورقم الحساب مع النسخ.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

balance-card.tsx

import { BalanceCard } from "@/components/ui/balance-card";<BalanceCard label="Available balance" amount={2450.75} currency="JOD" change={12.4} changeText="+JOD 214.670 this month" account="JO94 CBJO •••• 0302" labels={labels} />

مرجع الخصائص

BalanceCard

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"light" \| "graphite"`	`"light"`	خاصية Style.
`label`	`ReactNode`	لا يوجد	العنوان («الرصيد المتاح»).
`amount / currency / decimals`	`number / ReactNode / number`	`decimals 3`	الرصيد؛ 3 خانات عشرية للدينار.
`change / changeText`	`number / ReactNode`	لا يوجد	شارة الاتجاه والكلمات بعدها.
`account / copyValue`	`string`	لا يوجد	الحساب كما يُعرض، وما يضعه النسخ في الحافظة.
`labels`	`{ hide, show, copy, copied, hidden }`	لا يوجد	أسماء الأزرار والنص المخفي بلغة الصفحة.
`defaultHidden`	`boolean`	`false`	ابدأ والرصيد مخفي.
`headingLevel`	`2 \| 3`	`2`	مستوى العنوان.

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

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

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

المفتاح	ما يفعله
`EnterSpace`	يخفي الرصيد أو يُظهره، وينسخ الحساب.

ARIA

زر الإخفاء زر تبديل (aria-pressed)، وعند الإخفاء يسمع قارئ الشاشة «الرصيد مخفي».
«تم النسخ» يُعلَن بهدوء بعد النسخ.

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

ينعكس

العنوان يمينًا وزر الإخفاء يسارًا، والنسخ يسارًا.

لا ينعكس

المبلغ ورقم الحساب يبقيان من اليسار إلى اليمين.

الأرقام: المبلغ يأتي من Amount فيتبع إعداد الأرقام، ورقم الحساب معرّف لا تتغيّر أرقامه.
الخط العربي: numeric-56 Semibold للمبلغ وlabel-14 Medium للعنوان.