لوحة الأرقام

تجريبي

احصل على Ritla UI

لوحة أرقام للمبالغ والرموز السرية، بفاصلة عشرية أو 000 ومفتاح حذف أغمق؛ لا تنعكس أبدًا.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

keypad.tsx

import { Keypad } from "@/components/ui/keypad";<Keypad onKey={(k) => setValue((v) => v + k)} onDelete={() => setValue((v) => v.slice(0, -1))} deleteLabel="Delete" />

مرجع الخصائص

Keypad

الخاصية	النوع	الافتراضي	الوصف
`onKey`	`(key: string) => void`	لا يوجد	ضُغط مفتاح: من 0 إلى 9 أو «.» أو «000».
`onDelete`	`() => void`	لا يوجد	مفتاح الحذف.
`decimal`	`"dot" \| "000" \| "none"`	`"dot"`	خاصية Decimal؛ none للرموز السرية.
`deleteLabel`	`string`	لا يوجد	اسم مفتاح الحذف.
`disabled`	`boolean`	لا يوجد	يعطّل كل المفاتيح.

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

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

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

المفتاح	ما يفعله
`Tab`	ينتقل بين المفاتيح بترتيب القراءة.
`EnterSpace`	يضغط المفتاح المحدد.

ARIA

كل مفتاح زر، ومفتاح الحذف يسمّيه deleteLabel.
اعرض ما كُتب في منطقة حيّة فوق اللوحة.

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

ينعكس

لا شيء.

لا ينعكس

اللوحة تحافظ على تخطيط الهاتف (1 2 3 في الأعلى والحذف أسفل اليمين) في العربية أيضًا.

الأرقام: المفاتيح تعرض أرقام القارئ: 1 أو ١، من numerals في RitlaProvider.
الخط العربي: numeric-24 Semibold للمفاتيح.