SelectedFilters creates a selectable filter UI view displaying the current selected values from other components. This component is useful for improving selection accessibility of other components.
- displaying all the user selected facet filters together in the main view area for better accessibility.
- building mobile responsive views where it is not practical to show all the UI components in the main view.
<template> <selected-filters /> </template>
<selected-filters clearAllLabel="Clear filters" :showClearAll="true" />
boolean[optional] (defaults to
true) When set to
true, displays an additional button to clear all the filters
string[optional] (defaults to
'Clear All') Sets the label for the clear all button.
string[optional] Can be used to set a title
Most ReactiveSearch filter components have a prop
showFilter (defaults to
true) which can be used to control whether the component's selected state appears in the SelectedFilters component. There is also a
filterLabel prop which controls how that component is displayed.
filterLabelprop updates are only reflected if the underlying query of the associated component has changed.
As an example, check MultiList usage to see how
filterLabel can be used.
SelectedFilters component supports
innerClass prop with the following keys:
Read more about it here.
SelectedFilters component can be extended to customize the look and feel with
<selected-filters className="custom-class" />
StringCSS class to be injected on the component container.
- slot-scope ( Default Slot ) Enables custom rendering for SelectedFilters component. It provides an object as a param which contains all the props needed to render the custom selected-filters, including the functions to clear and update the component values.