فیلتر چیپ (FilterChip)

معرفی

کامپوننت FilterChip برای نمایش فیلترهای فعال شده استفاده می‌شود. کاربر می‌تواند فیلتر را با کلیک روی دکمه حذف، حذف کند.

چه زمانی استفاده کنیم:

• برای نمایش فیلترهای فعال با قابلیت حذف توسط کاربر
• در ترکیب با FilterBar برای نمایش فیلترهای اعمال‌شده
• وقتی نیاز به بازخورد بصری فیلترهای فعال دارید

چه زمانی استفاده نکنیم:

• برای ناوبری بین صفحات — از Tabs استفاده کنید
• برای فیلترهای تکی بدون قابلیت حذف — از Badge استفاده کنید
• وقتی گزینه‌های زیادی دارید — از MultiSelect با FilterChip برای نمایش استفاده کنید

استفاده

import { FilterChip } from '@parto-system-design/ui'

;<FilterChip label="فیلتر فعال" onRemove={() => console.log('removed')} />

انواع (Variants)

<FilterChip label="پیش‌فرض" variant="default" onRemove={() => {}} />
<FilterChip label="برند" variant="brand" onRemove={() => {}} />
<FilterChip label="هشدار" variant="warning" onRemove={() => {}} />
<FilterChip label="مخرب" variant="destructive" onRemove={() => {}} />

اندازه‌ها

<FilterChip label="کوچک" size="sm" onRemove={() => {}} />
<FilterChip label="متوسط" size="md" onRemove={() => {}} />

حالت غیرفعال

در حالت disabled، دکمه حذف مخفی می‌شود:

<FilterChip label="غیرقابل حذف" disabled />

FilterChipGroup

برای نمایش چندین فیلتر با محدودیت تعداد نمایش:

import { FilterChip, FilterChipGroup } from '@parto-system-design/ui'

;<FilterChipGroup maxVisible={3}>
  <FilterChip label="تهران" onRemove={() => {}} />
  <FilterChip label="اصفهان" onRemove={() => {}} />
  <FilterChip label="شیراز" onRemove={() => {}} />
  <FilterChip label="تبریز" onRemove={() => {}} />
  <FilterChip label="مشهد" onRemove={() => {}} />
</FilterChipGroup>
{
  /* نمایش: تهران | اصفهان | شیراز | +2 */
}

Props

FilterChip

FilterChipGroup

راهنمای استفاده

دسترسی‌پذیری

• دکمه حذف دارای aria-label پیش‌فرض فارسی است (قابل سفارشی‌سازی با removeAriaLabel)
• در حالت disabled، دکمه حذف مخفی می‌شود
• پشتیبانی از تمرکز با کیبورد روی دکمه حذف
• پشتیبانی کامل از RTL

کامپوننت‌های مرتبط

• اگر نیاز به نوار فیلتر کامل با مدیریت فیلترها دارید → FilterBar
• اگر نیاز به انتخاب گزینه‌ها از لیست دارید → MultiSelect
• اگر نیاز به نمایش label غیرقابل حذف دارید → Badge