شريحة المستلم

تجريبي

احصل على Ritla UI

شخص تدفع له: شريحة بالاسم وآخر أربعة أرقام، أو صورة كبيرة فوق الاسم الأول لـ«أرسل مجددًا».

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

recipient-chip.tsx

import { ChipGroup } from "@/components/ui/account-chip";import { RecipientChip } from "@/components/ui/recipient-chip";<ChipGroup aria-label="Select the recipient">  <RecipientChip value="khaled" name="Khaled Omar" detail="•• 7544" /></ChipGroup>

مرجع الخصائص

RecipientChip

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`	لا يوجد	قيمة هذه الشريحة في ChipGroup.
`name / src`	`string`	لا يوجد	اسم الشخص (الأحرف الأولى عند غياب الصورة) وصورته.
`detail`	`ReactNode`	لا يوجد	آخر أربعة أرقام من الحساب تحت الاسم (Chip).
`badge`	`IconComponent`	`BankIcon`	شارة البنك أو المحفظة على الصورة.
`layout`	`"chip" \| "stacked"`	`"chip"`	خاصية Layout.

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

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

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

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

ARIA

Stacked يعرض الاسم الأول لكنه يُسمّى بالاسم الكامل.
مجموعة اختيار واحد مثل شريحة الحساب.

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

ينعكس

تنتقل الصورة إلى اليمين، وشارة البنك في أسفلها يسارًا.

لا ينعكس

آخر أربعة أرقام تبقى من اليسار إلى اليمين.

الأرقام: الأسماء العربية تُظهر حرفًا عربيًا واحدًا كأحرف أولى، من مكوّن Avatar.
الخط العربي: label-14 Medium في Chip أو label-12 Medium في Stacked.