نوار فیلتر (Filter Bar)

معرفی

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

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

• برای ایجاد سیستم فیلتر چندگانه در داشبوردها و لیست‌ها
• وقتی نیاز به نمایش فیلترهای فعال با قابلیت حذف تکی و پاک‌کردن کامل دارید
• در صفحات جستجو و گزارش‌گیری با چندین معیار فیلتر

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

• برای یک فیلتر تکی — از FilterChip به تنهایی استفاده کنید
• وقتی فیلترها نباید قابل حذف باشند — از ToggleGroup استفاده کنید

استفاده

import {
  FilterBar,
  FilterBarRow,
  FilterBarActions,
  FilterBarClear,
  FilterBarActiveFilters,
  FilterChip,
  Button,
} from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <FilterBar>
      <FilterBarRow>
        <Button variant="outline" size="sm">
          نوع محتوا
        </Button>
        <Button variant="outline" size="sm">
          پلتفرم
        </Button>
        <Button variant="outline" size="sm">
          بازه زمانی
        </Button>
        <FilterBarActions>
          <FilterBarClear onClear={() => {}} />
        </FilterBarActions>
      </FilterBarRow>
      <FilterBarActiveFilters>
        <FilterChip label="اینستاگرام" onRemove={() => {}} />
        <FilterChip label="هفته گذشته" onRemove={() => {}} />
      </FilterBarActiveFilters>
    </FilterBar>
  )
}

کامپوننت‌ها

• FilterBar — wrapper اصلی با فضای عمودی بین ردیف‌ها
• FilterBarRow — ردیف افقی حاوی دکمه‌های فیلتر
• FilterBarActions — ناحیه عملیات در انتهای ردیف (ms-auto)
• FilterBarClear — دکمه پاک‌کردن تمام فیلترها
• FilterBarActiveFilters — ردیف نمایش فیلترهای فعال (اگر خالی باشد مخفی می‌شود)

Props

FilterBar

FilterBarClear

FilterBarRow / FilterBarActions / FilterBarActiveFilters

همه این کامپوننت‌ها React.HTMLAttributes<HTMLDivElement> را می‌پذیرند و از className پشتیبانی می‌کنند.

حالت‌ها و انواع

با دکمه‌های فیلتر

ردیف دکمه‌ها برای انتخاب نوع فیلتر (نوع محتوا، پلتفرم، بازه زمانی و ...).

با فیلترهای فعال

نمایش فیلترهای اعمال‌شده به صورت FilterChip در ردیف جداگانه.

با دکمه پاک‌کردن

FilterBarClear برای حذف تمام فیلترها به صورت یکجا.

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

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

• FilterBarActiveFilters از aria-label داخلی برای معرفی فیلترهای فعال استفاده می‌کند
• FilterBarClear دارای متن قابل خواندن توسط screen reader است
• تمام دکمه‌ها با صفحه‌کلید قابل دسترسی هستند
• پشتیبانی کامل از RTL

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

• اگر فقط نیاز به نمایش یک فیلتر فعال دارید → FilterChip
• اگر نیاز به انتخاب فیلترها از لیست dropdown دارید → MultiSelect
• اگر نیاز به فیلتر زمانی با دوره‌های از پیش تعریف‌شده دارید → PeriodSelector