نوار اقدام گروهی (BulkActionBar)

نوار اقدام‌های گروهی روی موارد انتخاب‌شده، با شمار انتخاب، اقدام‌ها و «لغو انتخاب».

معرفی

BulkActionBar نواری است که تا وقتی موردی انتخاب شده باشد نمایش داده می‌شود: شمار انتخاب، اقدام‌های گروهی و دکمهٔ «لغو انتخاب». نوار یک توقف Tab دارد و با کلیدهای جهت (در RTL قرینه) میان دکمه‌ها جابه‌جا می‌شود.

DataTable و EntityCollection این نوار را خودشان از bulkActions می‌سازند؛ آن را جداگانه فقط برای انتخابی به کار ببرید که این دو مالکش نیستند. PostBulkActionBar یک پیش‌تنظیم شناور روی همین نوار است.

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

در ListPage: قالب، نوار انتخاب را از selection.bulkActions خودش به جای نوار ابزار نشان می‌دهد.
برای اقدام روی یک مورد: از اقدام‌های همان ردیف یا کارت استفاده کنید.

فروشگاه نمونه
مجلهٔ سبک زندگی
کانال خبری شهر
صفحهٔ رسمی کتاب‌فروشی

استفاده

import { BulkActionBar } from '@partodata/ui/bulk-action-bar'
import { Archive, Trash2 } from 'lucide-react'

;<BulkActionBar
  selected={selectedIds}
  total={items.length}
  actions={[
    { id: 'archive', label: 'بایگانی', icon: <Archive />, onSelect: (ids) => archive(ids) },
    {
      id: 'export',
      label: 'خروجی',
      options: [
        { id: 'csv', label: 'CSV' },
        { id: 'xlsx', label: 'اکسل' },
      ],
      onSelect: (ids, format) => exportRows(ids, format),
    },
    { id: 'delete', label: 'حذف', icon: <Trash2 />, tone: 'destructive', onSelect: (ids) => confirmDelete(ids) },
  ]}
  onClear={() => setSelectedIds([])}
/>

در DataTable

<DataTable
  columns={columns}
  data={rows}
  selection={{ selectedRows, onSelectionChange: setSelectedRows, getRowKey: (row) => row.id }}
  bulkActions={[{ id: 'archive', label: 'بایگانی', onSelect: (rows) => archive(rows.map((r) => r.id)) }]}
/>