ais-panel
<ais-panel // Optional parameters :class-names="object" />
1
2
3
4
5
6
7
8
9
import { AisPanel } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3
export default {
components: {
AisPanel
},
// ...
};
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-panel
widget wraps other widgets in a consistent panel design. It also reacts by adding a CSS class when the widget no longer can refine. An example is when a ais-refinement-list
becomes empty because of the current search results.
Examples
1
2
3
<ais-panel>
<p>Panel content</p>
</ais-panel>
Props
class-names
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
Customize the UI
default
|
The slot to provide a body to 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
|
|||
header
|
The slot to provide a header to the widget. Scope
|
||
Copy
|
|||
footer
|
The slot to provide a footer to the widget. Scope
|
||
Copy
|
HTML output
1
2
3
4
5
<div class="ais-Panel">
<div class="ais-Panel-header">Header</div>
<div class="ais-Panel-body">Panel content</div>
<div class="ais-Panel-footer">Footer</div>
</div>