التصفية

لوحة تصفية لتضييق نطاق المحتوى. متوفّرة بمُشغِّل زر أو أيقونة، تفتح عند النقر لعرض خيارات التصفية. تدعم RTL.

Loading demo: filtration-real-world

لوحة تصفية لتضييق نطاق المحتوى. متوفّرة بمُشغِّل زر أو أيقونة، تفتح عند النقر لعرض خيارات التصفية. تدعم RTL.

التثبيت

npx sdaia-ui@latest add filtration

import { Filtration } from "@/components/ui/filtration"

<Filtration type="button" />

لوحة تصفية تُفعَّل بزر. انقر لفتحها وتطبيق الفلاتر.

Loading demo: filtration-button

لوحة تصفية تُفعَّل بزر أيقونة.

Loading demo: filtration-icon

خصائص مكوّن Filtration.

Prop	Type	Default	Required
triggerType	'button' \| 'icon'	'button'	optional
triggerLabel	string	'Filter'	optional
activeFilters	FiltrationActiveFilter[]	[]	optional
onRemoveFilter	(id: string) => void	-	optional
sections	FiltrationSectionConfig[]	[]	optional
applyLabel	string	'Apply Filters'	optional
clearLabel	string	'Clear'	optional
activeFilterCount	number	-	optional
onApply	() => void	-	optional
onClear	() => void	-	optional
showActions	boolean	true	optional
open	boolean	-	optional
defaultOpen	boolean	false	optional
onOpenChange	(open: boolean) => void	-	optional
rtl	boolean	false	optional
className	string	-	optional
children	ReactNode	-	optional