لوح تصفية

Filtration

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

افتح في ستوري بوك ↗

تفتح 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. المرشّحات داخلها مربّعات اختيار وحقول حقيقية بتسميات.

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