ais-clear-refinements
<ais-clear-refinements // Optional parameters :excluded-attributes="string[]" :included-attributes="string[]" :transform-items="function" :class-names="object" />
1
2
3
4
5
6
7
8
9
import { AisClearRefinements } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3
export default {
components: {
AisClearRefinements
},
// ...
};
1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.
About this widget
The ais-clear-refinements
widget displays a button that lets users clears every currently applied refinement.
Examples
1
<ais-clear-refinements />
Props
excluded-attributes
|
type: string[]
default: ["query"]
Optional
The attributes to exclude from the refinements to clear. In the example below, the attribute This can’t be used with |
||
Copy
|
|||
included-attributes
|
type: string[]
default: []
Optional
The attributes to include in the refinements to clear (all by default). In the example below, only the This can’t be used with |
||
Copy
|
|||
transform-items
|
type: function
default: items => items
Optional
Receives the items to clear, and is called before clearing them. Should return a new array with the same shape as the original array. Useful for filtering items. In addition, the full When using an array, take steps to avoid creating infinite loops. When you use an array as a prop, it causes the widget to re-register on every render, and this can sometimes cause these infinite loops. |
||
Copy
|
|||
class-names
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
Customize the UI
default
|
The slot to override the complete DOM output of the widget. Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them. Scope
|
||
Copy
|
|||
resetLabel
|
The slot to override the DOM output for the label of the reset button. |
||
Copy
|
HTML output
1
2
3
4
5
<div class="ais-ClearRefinements">
<button class="ais-ClearRefinements-button">
Clear refinements
</button>
</div>