شريحة

Chip

شريحة قابلة للاختيار في React لأشرطة التصفية، قوائم الاختيار المتعدد، والرموز القابلة للإزالة. تدعم الأنماط، الأيقونات، والشكل الدائري، وتعرض aria-pressed.

متى تستخدمه

استخدم Chip حين يجب أن تبقى مجموعة الخيارات ظاهرة وتتبدل باللمس، مثل عوامل التصفية فوق قائمة، الفئات في صفحة بحث، أو القيم المختارة القابلة للإزالة. استخدم Tag للتسمية الثابتة بلا تفاعل.

أبق الشرائح في سطر واحد، ورتبها حسب تكرار الاستخدام.

أمثلة

الأنماط

شريط تصفية (متحكم به)

مع أيقونات

مستدير

الخصائص

الخصائص التي يعرفها Chip. سمات العنصر الأصلي تمر كما هي.

الخاصية	النوع	الوصف
`variant`	`"primary" \| "neutral"`
`size`	`"sm" \| "md" \| "lg"`
`rounded`	`boolean`
`onColor`	`boolean`
`selected`	`boolean`	Controlled selected state - drives `aria-pressed` and the filled treatment.
`defaultSelected`	`boolean`	Uncontrolled initial selected state.
`onSelectedChange`	`(selected: boolean) => void`	Called with the next selected value when the chip toggles.
`leadingIcon`	`react.ReactNode`	Leading icon (inherits the chip text colour; 14px, 18px at `lg`).
`trailingIcon`	`react.ReactNode`	Trailing icon.
`asChild`	`boolean`	Render as the child element (Radix `Slot`) - e.g. wrap a router link.

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

يعمل Chip كزر تبديل يحمل aria-pressed، مما يتيح لقارئ الشاشة إعلان حالة اختياره. يبدل مفتاحا Space وEnter حالته، وتستخدم الشرائح المعطلة aria-disabled لتبقى في ترتيب القراءة.

تغير حالة الاختيار التعبئة والحدود إلى جانب اللون. ولزر الإغلاق في الشريحة القابلة للإزالة اسم متاح الوصول خاص به.