شريحة الحساب

تجريبي

احصل على Ritla UI

اختر البطاقة أو الحساب الذي تدفع منه من صف يمكن تمريره؛ الشريحة المختارة تأخذ إطارًا داكنًا.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

account-chip.tsx

import { AccountChip, ChipGroup } from "@/components/ui/account-chip";<ChipGroup aria-label="Pay from" defaultValue="card">  <AccountChip value="card" title="•• 8152" balance="JOD 2,450.750" />  <AccountChip value="savings" kind="account" title="Savings" balance="JOD 8,120.000" /></ChipGroup>

مرجع الخصائص

ChipGroup

الخاصية	النوع	الافتراضي	الوصف
`aria-label`	`string`	لا يوجد	يسمّي الاختيار («الدفع من»).
`value / defaultValue / onValueChange`	`string`	لا يوجد	الشريحة المختارة.
`name`	`string`	لا يوجد	اسم الحقل في النموذج.

AccountChip

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`	لا يوجد	قيمة هذه الشريحة.
`kind`	`"card" \| "account"`	`"card"`	خاصية Kind: أيقونة البطاقة أو البنك في المربع الداكن.
`icon`	`IconComponent`	لا يوجد	أيقونة أخرى.
`title / balance`	`ReactNode`	لا يوجد	آخر أربعة أرقام أو اسم الحساب، والرصيد.

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

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

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

المفتاح	ما يفعله
`ArrowLeftArrowRight`	ينتقل إلى الشريحة السابقة أو التالية ويختارها (السهم الأيسر هو التالي في العربية).
`Tab`	يدخل الصف إلى الشريحة المختارة ثم يخرج منه.

ARIA

مجموعة اختيار واحد: شريحة واحدة مختارة، وتقول قارئات الشاشة «زر اختيار، 1 من 3، محدد».
الإطار يتغيّر سُمكًا ولونًا، لا لونًا وحده.

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

ينعكس

ينتقل مربع الأيقونة إلى اليمين، والصف يبدأ من اليمين.

لا ينعكس

الأرصدة تبقى كتلة واحدة من اليسار إلى اليمين.

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