التثبيت
npx sdaia-ui@latest add table-bulk-actions-bar
الاستخدام
import { TableBulkActionsBar } from '@/components/ui/TableBulkActionsBar';<TableBulkActionsBar
selectedCount={selected.length}
totalCount={rows.length}
onSelectAllChange={(all) => setSelected(all ? rows.map((r) => r.id) : [])}
onClearSelection={() => setSelected([])}
onClose={() => setSelected([])}
actions={<Button size="sm">Export</Button>}
/>
<Table selectable selectedRowKeys={selected} onSelectionChange={setSelected} … />الاتجاه من اليمين إلى اليسار
ينعكس كل شيء للعربية.
جارٍ تحميل العرض التوضيحي: table-bulk-actions-bar-rtl
أمثلة
مضمن
يقع فوق رأس الجدول. ألغِ التحديد لإخفائه.
جارٍ تحميل العرض التوضيحي: table-bulk-actions-bar-default
مع جدول
مرتبط بتحديد صفوف الجدول؛ يحل الشريط محل شريط أدوات الجدول أثناء التحديد.
جارٍ تحميل العرض التوضيحي: table-bulk-actions-bar-with-table
عائم
يثبت أسفل الشاشة أثناء تمرير جدول طويل، ويستقر بعد الجدول فلا يغطي التنقل بين الصفحات.
جارٍ تحميل العرض التوضيحي: table-bulk-actions-bar-floating
إجراءات أقل
بدون رابط إلغاء التحديد وبإجراء واحد.
جارٍ تحميل العرض التوضيحي: table-bulk-actions-bar-fewer-actions
متى تستخدمه
- الجداول التي يعمل فيها المستخدم على عدة صفوف معًا
- اعتماد التحديد أو تصديره أو حذفه
- إظهار عدد الصفوف المحددة
- إلغاء التحديد بسرعة
متى لا تستخدمه
- إجراءات صف واحد — استخدم إجراءات الصف
- الجداول التي لا تدعم تحديد الصفوف
- أكثر من ثلاثة إجراءات جماعية — استخدم قائمة
- الإجراءات الدائمة بلا خطوة تأكيد
الخصائص
الخاصية | النوع | القيمة الافتراضية | مطلوبة |
|---|---|---|---|
selectedCount | number | — | اختيارية |
totalCount | number | — | اختيارية |
onSelectAllChange | (checked: boolean) => void | — | اختيارية |
onClearSelection | () => void | — | اختيارية |
onClose | () => void | — | اختيارية |
actions | ReactNode | — | اختيارية |
position | "inline" | "floating" | "inline" | اختيارية |
returnFocusRef | RefObject<HTMLElement> | next focusable | اختيارية |
labels | Partial<TableBulkActionsBarLabels> | English | اختيارية |
dir | "ltr" | "rtl" | inherited | اختيارية |
إمكانية الوصول
- الشريط منطقة role="region" باسم "Bulk actions" (labels.region).
- يُعلن عدد الصفوف المحددة بهدوء (aria-live="polite") عند تغيره.
- تكون خانة تحديد الكل جزئية (aria-checked="mixed") عند تحديد بعض الصفوف فقط.
- "إلغاء التحديد" زر بمظهر رابط لأنه ينفذ إجراءً ولا ينتقل. عندما يختفي الشريط وهو يحمل التركيز، ينتقل التركيز إلى العنصر التالي (أو returnFocusRef) بدل أن يضيع.
- يجب أن تطلب الإجراءات الحذفية تأكيدًا.
السلوك المتجاوب
- يلتف الشريط: عندما يقل عرضه عن 36rem تنتقل الإجراءات إلى صف خاص تحت العدد وزر الإغلاق.
- الشريط العائم لا يتجاوز 760px ويتوسط الصفحة؛ يستخدم position: sticky على بعد 24px من أسفل الشاشة.
- تستخدم المسافات والخطوط الرموز المتجاوبة.