البناء · جديد

الشرائح

عناصر تفاعلية صغيرة: تقترح أو تنفّذ اختصارًا أو تصفّي أو تحمل قيمًا مُدخلة أو تعمل خيارات متعددة.

المعاينة

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

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/chip

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

import { FilterChip, SuggestionChip } from "@/components/ui/chip";

<SuggestionChip size="lg" onClick={() => setAmount(100)}>100 SAR</SuggestionChip>
<FilterChip defaultSelected>Income</FilterChip>

اختصار بأيقونة أو علم، وعدد اختياري بـbadge.

زر تبديل: المحددة تُظهر علامة صح، وcaret يضيف سهمًا لشريحة تفتح خياراتها.

قيمة اختارها الشخص؛ onRemove يضيف زر حذف باسم واضح (إزالة ليلى حداد).

خيار في اختيار متعدد بمربع تفعيل حقيقي؛ الشريحة كلها تسميته.

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label.
`size`	`"sm" \| "lg"`	`"sm"`	خاصية Size: ‏24 أو 32 بكسل.
`badge`	`ReactNode`		خاصية Show Badge: عدد بعد النص.
`leading / flag`	`IconComponent \| ReactNode / string`		للمساعدة: خاصية Style = Icon أو Flag.
`…button props`	`ComponentProps<"button">`		‏`onClick` و`disabled` وغيرها.

الخاصية	النوع	الافتراضي	الوصف
`selected / defaultSelected`	`boolean`		خاصية Selected.
`onSelectedChange`	`(selected: boolean) => void`		عند التبديل.
`caret`	`boolean`	`false`	خاصية Show Trailing: سهم وهي محددة.

الخاصية	النوع	الوصف
`leading / flag`	`IconComponent \| ReactNode / string`	خاصية Leading: أيقونة أو صورة شخصية أو علم.
`onRemove`	`() => void`	يضيف زر الحذف.
`disabled`	`boolean`	معطّلة.

الخاصية	النوع	الوصف
`checked / defaultChecked / onCheckedChange`	`…`	خاصية Selected، كما في Checkbox.
`leading / flag`	`IconComponent \| ReactNode / string`	خاصية Leading.
`name / value / disabled`	`…`	للنماذج.

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

المفتاح	ما يفعله
`Tab`	بين الشرائح وأزرار الحذف.
`SpaceEnter`	ينفّذ الشريحة أو يبدّلها (مربع التفعيل بـSpace).

شرائح الاقتراح والمساعدة أزرار؛ شريحة التصفية زر بـaria-pressed؛ شريحة الاختيار role="checkbox" مسمّى بنصه.
زر الحذف مسمّى «إزالة» واسم القيمة بلغة الصفحة.
مساحة اللمس ٤٨ بكسل ارتفاعًا حتى للشريحة الصغيرة.

الأيقونات والأعلام ومربع التفعيل في بداية الشريحة (اليمين)، وزر الحذف والسهم في نهايتها.