ais-numeric-menu
<ais-numeric-menu attribute="string" :items="object[]" // Optional parameters :transform-items="function" :class-names="object" />
1
2
3
4
5
6
7
8
9
import { AisNumericMenu } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3
export default {
components: {
AisNumericMenu
},
// ...
};
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-numeric-menu
widget displays a list of numeric filters in a list. Those numeric filters are pre-configured when creating the widget.
Requirements
The values of the attribute must be numbers, not strings.
Examples
1
2
3
4
5
6
7
8
9
10
<ais-numeric-menu
attribute="price"
:items="[
{ label: 'All' },
{ label: '<= 10$', end: 10 },
{ label: '10$ - 100$', start: 10, end: 100 },
{ label: '100$ - 500$', start: 100, end: 500 },
{ label: '>= 500$', start: 500 },
]"
/>
Props
attribute
|
type: string
Required
The name of the attribute in the record. |
||
Copy
|
|||
items
|
type: object[]
Required
A list of all the options to display, with:
|
||
Copy
|
|||
transform-items
|
type: function
default: items => items
Optional
Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for transforming, removing, or reordering items. In addition, the full |
||
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
With each item an
|
||
Copy
|
HTML output
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="ais-NumericMenu">
<ul class="ais-NumericMenu-list">
<li class="ais-NumericMenu-item ais-NumericMenu-item--selected">
<label class="ais-NumericMenu-label">
<input
class="ais-NumericMenu-radio"
type="radio"
name="NumericMenu"
checked
/>
<span class="ais-NumericMenu-labelText">All</span>
</label>
</li>
<li class="ais-NumericMenu-item">
<label class="ais-NumericMenu-label">
<input
class="ais-NumericMenu-radio"
type="radio"
name="NumericMenu"
/>
<span class="ais-NumericMenu-labelText">Less than 500</span>
</label>
</li>
</ul>
</div>