لوحة التصفية

تجريبي

احصل على Ritla UI

لوحة جانبية لعوامل تصفية جدول أو قائمة، مع شرائح للعوامل المطبقة.

افتح في Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

أضف المكوّن
$ npx ritla add filter-panel
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/filter-panel
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

filter-panel.tsx

import { FilterPanel, FilterSection } from "@/components/ui/filter-panel";<FilterPanel title="Filters" footer={<Button type="submit">Show 24 results</Button>}>  <FilterSection legend="Status">…</FilterSection></FilterPanel>

مرجع الخصائص

FilterPanel

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`	لا يوجد	عنوان اللوحة.
`onClose / closeLabel`	`() => void / string`	لا يوجد	خاصية Show close: زر إغلاق مسمّى.
`footer`	`ReactNode`	لا يوجد	إعادة التعيين والتطبيق، والتطبيق يذكر عدد النتائج.

FilterSection

الخاصية	النوع	الافتراضي	الوصف
`legend`	`ReactNode`	لا يوجد	اسم المجموعة؛ احذفه حين تحمل المجموعة اسمها (مجموعة مربعات أو أزرار اختيار).

AppliedFilters

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	شرائح `InputChip` لكل عامل مطبّق.
`onClearAll / clearLabel`	`() => void / string`	لا يوجد	زر «مسح الكل».

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	ينتقل بين عوامل التصفية ثم إعادة التعيين والتطبيق.

ARIA

اللوحة نموذج، وكل مجموعة fieldset باسمها.
العوامل المطبقة مجموعة مسمّاة، وكل شريحة لها زر إزالة.

ملاحظات العربية والاتجاه

ينعكس

الإغلاق في نهاية الرأس، والشرائح تبدأ من اليمين.

لا ينعكس

حقول المبالغ تبقى من اليسار إلى اليمين.

الأرقام: أعداد النتائج كما يمرّرها التطبيق.
الخط العربي: الأسماء label-14 Semibold.