API Reference
/
Vue InstantSearch Widgets
/
ais-panel
Apr. 24, 2019
Widget signature
<ais-panel // Optional parameters :class-names="object" />
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 #
Copy
1
2
3
<ais-panel>
<p>Panel content</p>
</ais-panel>
Props #
class-names
# |
type: object
default: {}
Optional
The CSS classes to override.
|
||
Copy
|
Customize the UI #
default
# |
The slot to provide a body to the widget. 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#
Copy
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>