لوح تصفية

Filtration

لوحة مرشحات متعددة الأوجه في React، منبثقة أو مضمنة، مع أقسام، مرشحات بمربعات اختيار، عداد نتائج، وزري التطبيق والمسح. تبقى الحالة في كودك.

فتح في Storybook ↗

يفتح Filtration لوحة من أقسام التصفية، ويغلقها زرا التطبيق والمسح. تبقى الحالة في كودك: يغلف كل قسم عنصراً خاضعاً للتحكم.

متى تستخدمه

استخدم Filtration فوق نتائج البحث، الجداول، وأدلة الخدمات حين يجمع المستخدم عدة معايير: الحالة، المنطقة، التاريخ، والفئة. اجمع التغييرات وطبقها دفعة واحدة حتى لا تتبدل النتائج مع كل نقرة.

استخدم اللوحة المضمنة في الشاشات العريضة، واللوحة المنبثقة في الجوال. لمرشح واحد، يكفي Select أو صف من Chip.

أمثلة

تصفية منبثقة (متحكم بها)

مجموعات البياناتواجهات برمجة التطبيقات

لوح مضمن

المنطقة (1 selections)

الرياض

مكة المكرمة

المنطقة الشرقية

الخصائص

الخصائص التي يعرفها Filtration. سمات العنصر الأصلي تمر كما هي.

<Filtration>

الخاصية	النوع	الوصف
`overlay`	`boolean`	Floating overlay anchored to the trigger (default) vs an embedded inline panel.
`open`	`boolean`	Controlled open state (overlay only).
`defaultOpen`	`boolean`	Uncontrolled initial open state (overlay only).
`onOpenChange`	`(open: boolean) => void`
`children`	`react.ReactNode`

<FiltrationTrigger>

الخاصية	النوع	الوصف
`size`	`"sm" \| "md" \| "lg" \| "icon" \| "icon-md" \| "icon-sm" \| "icon-xs"`
`fullWidth`	`boolean`
`onColor`	`boolean`
`loading`	`boolean`
`startIcon`	`react.ReactNode`	Leading icon. For an icon-only button pass the glyph as `children` with an icon size and an `aria-label`.
`endIcon`	`react.ReactNode`
`iconFlip`	`boolean`	Flip start/end icons horizontally in RTL (for chevrons, arrows, etc.)

<FiltrationResults>

الخاصية	النوع	الافتراضي	الوصف
`aria-label`	`string`		Names the applied-filters chip group for assistive tech, e.g. "Applied filters".

<FiltrationPanel>

الخاصية	النوع	الوصف
`deferPointerDownOutside`	`boolean`	When `true`, a `'pointerdown'` event outside of the layered element will wait for the interaction's click event before dispatching, allowing third-party code to stop propagation of later events and cancel dismissal.
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	Event handler called when the escape key is down. Can be prevented.
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
`onFocusOutside`	`(event: FocusOutsideEvent) => void`	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
`forceMount`	`true`	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`onOpenAutoFocus`	`(event: Event) => void`	Event handler called when auto-focusing on open. Can be prevented.
`onCloseAutoFocus`	`(event: Event) => void`	Event handler called when auto-focusing on close. Can be prevented.
`side`	`"top" \| "right" \| "bottom" \| "left"`
`sideOffset`	`number`
`align`	`"center" \| "start" \| "end"`
`alignOffset`	`number`
`arrowPadding`	`number`
`avoidCollisions`	`boolean`
`collisionBoundary`	`Element \| Element[]`
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`
`sticky`	`"always" \| "partial"`
`hideWhenDetached`	`boolean`
`updatePositionStrategy`	`"always" \| "optimized"`

<FiltrationCheckboxFilter>

الخاصية	النوع	الوصف
`options`إلزامي	`FiltrationCheckboxOption[]`
`value`	`string[]`	Controlled selected values.
`defaultValue`	`string[]`	Uncontrolled initial selected values.
`onValueChange`	`(next: string[]) => void`
`searchable`	`boolean`	Show a search field that filters options by label.
`searchPlaceholder`	`string`
`searchLabel`	`string`	Accessible label for the search field (it has no visible label).
`collapseAfter`	`number`	Collapse to the first N options behind a "Show more" toggle.
`showMoreLabel`	`(remaining: number) => ReactNode`	Maps the hidden-count → the expand button label. Default `Show {n} more`.
`showLessLabel`	`react.ReactNode`
`aria-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.
`className`	`string`

<FiltrationOptionList>

الخاصية	النوع	الافتراضي	الوصف
`name`	`string`
`form`	`string`
`required`	`boolean`
`disabled`	`boolean`
`dir`	`Direction`
`orientation`	`"vertical" \| "horizontal"`
`loop`	`boolean`
`defaultValue`	`string`
`value`	`string`
`onValueChange`	`(value: string) => void`

<FiltrationOption>

الخاصية	النوع	الافتراضي	الوصف
`children`إلزامي	`react.ReactNode`
`asChild`	`boolean`
`checked`	`boolean`
`required`	`boolean`
`value`إلزامي	`string`

<FiltrationFooter>

الخاصية	النوع	الوصف
`applyLabel`	`react.ReactNode`
`clearLabel`	`react.ReactNode`
`appliedCount`	`number`	Appended to the apply label as `(n)`.
`onApply`	`() => void`
`onClear`	`() => void`
`closeOnApply`	`boolean`	Close the overlay when Apply is pressed (overlay only). Default `true`.

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

يحمل كل قسم role="group" ويأخذ اسمه من عنوانه. ويعرض مشغل اللوحة المنبثقة aria-expanded وaria-controls. المرشحات داخل اللوحة مربعات اختيار وحقول حقيقية لها تسميات.

زرا التطبيق والمسح زران حقيقيان. ويظهر عداد النتائج نصاً، مما يتيح لقارئ الشاشة قراءة عدد النتائج المطابقة المتبقية.