البطاقة القابلة للاختيار

تجريبي

احصل على Ritla UI

بطاقة تعمل كزر اختيار أو مربع اختيار، لاختيار حساب أو خطة أو بطاقة أو طريقة توصيل.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

selectable-tile.tsx

import { SelectableTile, SelectableTileGroup } from "@/components/ui/selectable-tile";<SelectableTileGroup label="Pay from" defaultValue="current">  <SelectableTile value="current" icon={BankIcon} description="JO94 •••• 0302">Current account</SelectableTile></SelectableTileGroup>

أمثلة

عمودي، مربعات اختيار

شبكة من اثنين إلى أربعة، واختيار أكثر من واحد.

إنجليزيمعكوسعربي

احصل على الكود

← RTL

مرجع الخصائص

SelectableTileGroup

الخاصية	النوع	الافتراضي	الوصف
`control`	`"radio" \| "checkbox"`	`"radio"`	خاصية Control.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	خاصية Layout.
`value / defaultValue / onValueChange`	`string \| string[]`	لا يوجد	قيمة واحدة للاختيار الفردي، ومصفوفة للمتعدد.
`label / required / helperText / error / disabled / name`	`…`	لا يوجد	كما في مجموعة أزرار الاختيار.

SelectableTile

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	العنوان.
`description`	`ReactNode`	لا يوجد	خاصية Show description.
`icon`	`IconComponent \| ReactNode`	لا يوجد	خاصية Show icon.
`trailing`	`ReactNode`	لا يوجد	خاصية Show trailing: مبلغ أو سعر في النهاية.
`value / disabled`	`string / boolean`	لا يوجد	قيمة البطاقة في مجموعتها.

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

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

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

المفتاح	ما يفعله
`Tab`	إلى المجموعة (أزرار الاختيار) أو كل بطاقة (المربعات).
`ArrowDownArrowUpArrowRightArrowLeft`	بين بطاقات الاختيار الفردي، بترتيب القراءة.
`Space`	يختار البطاقة.

ARIA

البطاقة كلها التسمية والهدف، وعنوانها ووصفها يسمّيان عنصر التحكم.
البطاقة المعطّلة تبقى ظاهرة ليعرف الناس أن الخيار موجود.

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

ينعكس

الأيقونة في البداية على اليمين، وعنصر التحكم في النهاية على اليسار.

لا ينعكس

الأرقام المقنّعة والمبالغ تبقى من اليسار إلى اليمين.

الأرقام: المبلغ في trailing يتبع تنسيقك.
الخط العربي: ‏body-16 Medium للعنوان وbody-14 للوصف.